I’ve started using BabylonJS recently, and I’d like to make a game with server side generated procedural terrain.
So I’ve found the DynamicTerrain extension, which is exactly what I’m looking for.
The problem is, that I can’t seem to figure out how to use it.
I’m using Typescript and Webpack.
I’ve downloaded the babylon.dynamicTerrain.d.ts, babylon.dynamicTerrain.js, babylon.dynamicTerrain.mins.js and copied them to my src folder.
index.ts:
import { Scene, Engine, Vector3, UniversalCamera, DynamicTerrain } from ‘babylonjs’;
…
…
const terrain = new DynamicTerrain(“terrain”, mapParams, scene);
When I try to instantiate DynamicTerrain I get the following exception (in runtime):
Uncaught TypeError: babylonjs_1.DynamicTerrain is not a constructor.
Thanks for the quick answer, but unfortunately it didn’t solve the issue.
Uncaught TypeError: BABYLON.DynamicTerrain is not a constructor
Update:
I’m using VS Code by the way.
Tried with 4.0.0-alpha.29 (I’ve previously used 3.3.0) but with no success.
If I import BABYLON from babylonjs, DynamicTerrain class can not be found.
If I import the classes individually (import { Engine, Scene, … } from ‘babylonjs’; ) then VS Code doesn’t show error on the line: new BABYLON.DynamicTerrain, but I can only give it a scene instance from BABYLON.Scene and not the individually imported Scene instance. (Argument of type ‘import(“babylonjs/scene”).Scene’ is not assignable to parameter of type ‘BABYLON.Scene’.)
My guess is that somehow DynamicTerrain is conflicting with BabylonJS.
I’m using npm to install babylonjs, but just simply copying DynamicTerrain to my src folder.
I don’t really know how the module importation process works. Something is probably missing in the DynamicTerrain extension so it can run as an imported module.
If someone knows, please …
Now another issue emerges.
“babylon.dynamicTerrain.js:1389 Uncaught TypeError: Cannot read property ‘Zero’ of undefined
at eval (babylon.dynamicTerrain.js:1389)
at eval (babylon.dynamicTerrain.js:1408)
at eval (babylon.dynamicTerrain.js:1410)
at Object…/src/extensions/babylon.dynamicTerrain.js (main.f598f66dac1254eb409b.js:426)
at webpack_require (main.f598f66dac1254eb409b.js:20)
at eval (index.ts:6)
at Object…/src/index.ts (main.f598f66dac1254eb409b.js:438)
at webpack_require (main.f598f66dac1254eb409b.js:20)
at main.f598f66dac1254eb409b.js:84
at main.f598f66dac1254eb409b.js:87”
I’m sure I’m doing something entirely wrong.
If you could provide me an example.ts file with tsconfig and webpack config I would appreciate it very much.
I guess the word “BABYLON.” used in the DynamicTerrain code is the problem regarding all the module system.
The DynamicTerrain extension was created at the time when we used BJS only in the browser, directly downloaded with a html tag.
Probably something should be fixed or rewritten in the code so it could become compliant to the module system. As I don’t know the module system yet, I don’t know for now what should be done
How do I include it with webpack provide plugin?
What name should I use?
Anything I try just gives me the same “e.DynamicTerrain is not a constructor”
I have also tried adding the script as an HTML element to index.html head, but that throws the “can not get .Zero of undefined” error which is mentioned above.
It is hard because you are mixing none module code and module code so it involves a bit of config. There are several ways to solve the issue in the config. Let me detail one:
Use ProvidePlugin to expose BABYLON as a global:
plugins: [
new webpack.ProvidePlugin({
'BABYLON': 'babylonjs'
})
]
Force the terrain script to consider BABYLON from the module babylonjs:
Please not it require the imports-loader package: npm install imports-loader --save-dev
3. In your ts file where you need to use Babylon and the Material, reference their typings:
You can now use both of then in the ts file with typings.
Find attached an ultra quick sample, forumBug.zip (21.0 KB) To run it, unzip, npm install then npm run start the ideal would be to make the extension a proper npm package to prevent some of those issues.
This is still not ideal as we are relying here on namespace typings vs module but it should be ok.
The code comes from the default example in the terrain documentation.
has there been any movement in updating Dynamic Terrain to be more friendly to modules? I am struggling with this and am going down multiple rabbit holes. From what I gather from comments in this thread I need to modify the webpack config files to hack support for DynamicTerrain but I am unsure how to proceed on that.
I have a React app that was generated from Create React App (using js not typescript) and the webpack config files are hidden. I think I can “eject” them but there seem to be issues with doing that and it is not recommended. I found a few tools the rewire or override the config but some look to be outdated. Is a tool like craco - GitHub - gsoft-inc/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app - the “best” option? Is there another way to use Dynamic Terrain in a module based project?
Thanks.