README Instructions Not Functional

Bugs

• Expected result:

Following the README should add access to various materials as explained at: https://doc.babylonjs.com/extensions/grid#using-the-grid-material and demoed at: https://www.babylonjs-playground.com/#1UFGZH#12

• Current result:

Following the README does not work. BABYLON gives property errors. e.g.

Property 'GridMaterial' does not exist on type 'typeof import("babylonjs")'.ts(2339)

from

const groundMaterial = new BABYLON.GridMaterial("groundMaterial", this._scene);

This is occurring on a simple barebones app created with npx create-react-app my-app --typescript.

package.json

  "dependencies": {
    "@types/jest": "24.0.18",
    "@types/node": "12.7.4",
    "@types/react": "16.9.2",
    "@types/react-dom": "16.9.0",
    "babylonjs": "^4.0.3",
    "babylonjs-loaders": "^4.0.3",
    "babylonjs-materials": "^4.0.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
    "typescript": "3.6.2"
  },

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "types": [
    "babylonjs",
    "babylonjs-materials",
  ]
}

Canvas.tsx contains the following at the top.

import * as BABYLON from "babylonjs";
import "babylonjs-materials";
...

[gpresland]

For anyone else who comes across this problem, the official documentation is incorrect and does not work. The solution is to do:

import * as BABYLON from "babylonjs";
import * as MATERIALS from "babylonjs-materials";

and use MATERIALS when you want access to the Babylon materials.

That said, there are various other bugs I’ve run in to where the current documentation and examples do not reflect the actual source code, resulting in TypeScript error where you cannot compile. My solution unfortunately has to be to stick with Three.js until these issues in Babylon and/or its documentation get resolved.

[sebavan]

@jaqmol could you share the code you tried and first doc page you looked at ?

I will add the relevant info to those docs.

Basically it should just work by default by importing from the materials-library from ts:

In ES5:

import { GridMaterial } from 'babylonjs-materials';

In ES6:

import { GridMaterial } from '@babylonjs/materials/grid/gridMaterial';