Unable to load DynamicTerrain extension as a module

Questions
1

I’m new to Babylonjs. A little frustrated by my inability to include the DynamicTerrain extension as a module in my app.ts file. I downloaded the js file locally and include the following statement in app.ts … What am I missing here?

let DynamicTerrain = require(’…/public/js/DynamicTerrain.min.js’);

gives error:

bundleName.js:12175 Uncaught TypeError: Cannot read properties of undefined (reading ‘Zero’)

Thanks in advance.

3

The DynamicTerrain module (written by @jerome ) requires the BABYLON global namespace.

define window.BABYLON = YourBabylonImport and it should work as expected.

1 Like
4

Hi @Polymorrah just checking in! Were you able to import the extension? :smiley:

5

Hi @carolhmj, thanks for asking. I honestly can’t remember now. I think I succeeded but realised that there was an easier way to achieve what I wanted with a GroundMesh. This was day 1 of learning Babylon, and I’ve been quite immersed in it since then, and still learning. Cheers.

1 Like
6

Hurray for learning! :grinning_face_with_smiling_eyes: We’ll always be here to help you on this path!

1 Like
7

I got the same error.
If RaananW is right, code should look like this

import * as BABYLON from’@babylonjs/core’; // or import BABYLON from’@babylonjs/core’;
…
export function createTerrain(){
(window as any).BABYLON = BABYLON;
var DynamicTerrain = require(“…/plugin/babylon.dynamicTerrain”);

let scene = getScene();
var url = "https://Blabla.png";
var terrainTexture = new Texture(url, scene);
var terrainMaterial = new StandardMaterial("tm", scene);
terrainMaterial.diffuseTexture = terrainTexture;
terrainMaterial.specularColor = new Color3(0,0,0);

var terrain;
var createTerrain = function(mapData: Float32ArrayConstructor, mapSubX: number, mapSubZ: number) {
    var params = {
        terrainSub: 101,
        mapData: mapData, 
        mapSubX: mapSubX,
        mapSubZ: mapSubZ
    };
    terrain = new DynamicTerrain("t", params as any, scene);
    terrain.createUVMap();             // compute the UVs to stretch the image on the whole map
    terrain.mesh.material = terrainMaterial;
    terrain.update(true);
};

…
}

hello @Polymorrah Did this work for you?

babylon is v6.10.0
dynamicTerrain files :https://github.com/BabylonJS/Extensions/tree/master/DynamicTerrain/dist

8

i would recommend importing the needed files and not populating the global namespace, of course. But in this case it seems that the global namespace is needed. However, i would not use both import and require. And - the babylon classes should be used from the global namespace or imported, otherwise this code will fail, not knowing what Texture or StandardMaterial is.

1 Like
9

Everything else is fine (Texture tandardMaterial …etc) because they are imported separately by tree shaking and we don’t need to worry about them.

I just need to make sure that I define BABYLON with a global namespace, and that my structure uses the
Whether I call JS with require or D.TS, I get the same error and the solution is to define BABYLON with the global namespace again.

The meaning of this confuses me

Is this my interpretation of what you said?

import * as BABYLON from’@babylonjs/core’
import DynamicTerrain from ‘…/plugin/babylon.dynamicTerrain’;
export function createTerrain(){
…
var terrain;
var createTerrain = function(mapData: Float32ArrayConstructor, mapSubX:
number, mapSubZ: number) {
var params = {
terrainSub: 101,
mapData: mapData,
mapSubX: mapSubX,
mapSubZ: mapSubZ
};
…
};
…