Javascript 从导入的网格返回未定义的

Javascript 从导入的网格返回未定义的,javascript,typescript,babylonjs,Javascript,Typescript,Babylonjs,我正在使用BabylonJS,我刚刚从Blender导入了一个网格 问题在于,在生产线上: x = this.cube.position.x; 我明白了 未捕获的TypeError:无法读取未定义的属性“position” 以下是完整的代码: export class Game { private canvas: HTMLCanvasElement; private engine: BABYLON.Engine; private scene: BABYLON.Scene; p

我正在使用BabylonJS,我刚刚从Blender导入了一个网格

问题在于,在生产线上:

         x = this.cube.position.x;
我明白了

未捕获的TypeError:无法读取未定义的属性“position”

以下是完整的代码:

export class Game {
private canvas: HTMLCanvasElement;
private engine: BABYLON.Engine;
private scene: BABYLON.Scene;
private camera: BABYLON.FreeCamera;
private light: BABYLON.Light;
private skybox: BABYLON.Mesh;
private skyboxMaterial: BABYLON.StandardMaterial;
private waterMesh: BABYLON.Mesh;
private water: Materials.WaterMaterial;
private ground: BABYLON.Mesh;
private groundTexture: BABYLON.Texture;
private groundMaterial: BABYLON.StandardMaterial;
private sphere: BABYLON.Mesh;
private sphereMaterial: BABYLON.StandardMaterial;
private cube: BABYLON.Mesh;


constructor(canvasElement : string) {
    // Create canvas and engine.
    this.canvas = document.getElementById(canvasElement) as HTMLCanvasElement;
    this.engine = new BABYLON.Engine(this.canvas, true);
}

createScene() : void {
    this.scene = new BABYLON.Scene(this.engine);

    this.camera = new BABYLON.FreeCamera("Camera", BABYLON.Vector3.Zero(), this.scene);
    this.camera.attachControl(this.canvas, true);


    this.light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), this.scene);

    // Skybox
    this.skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, this.scene);
    this.skyboxMaterial = new BABYLON.StandardMaterial("skyBox", this.scene);
    this.skyboxMaterial.backFaceCulling = false;
    this.skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../../../assets/Terrain/skybox/TropicalSunnyDay", this.scene);
    this.skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    this.skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    this.skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    this.skyboxMaterial.disableLighting = true;
    this.skybox.material = this.skyboxMaterial;

    // Ground
    this.groundTexture = new BABYLON.Texture("../../../assets/Terrain/sand.jpg", this.scene);
    this.groundTexture.vScale = this.groundTexture.uScale = 4.0;

    this.groundMaterial = new BABYLON.StandardMaterial("groundMaterial", this.scene);
    this.groundMaterial.diffuseTexture = this.groundTexture;

    this.ground = BABYLON.Mesh.CreateGround("ground", 512, 512, 32, this.scene, false);
    this.ground.position.y = -1;
    this.ground.material = this.groundMaterial;


    // Sphere
    this.sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", this.scene);
    this.sphereMaterial.diffuseTexture = new BABYLON.Texture("../../../assets/Terrain/wood.jpg", this.scene);

    this.sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 10, this.scene);
    this.sphere.position.y = 20;
    this.sphere.material = this.sphereMaterial;

        // The first parameter can be used to specify which mesh to import. Here we import all meshes
    BABYLON.SceneLoader.ImportMesh("cube", "../../../assets/Vessel/", "untitled.glb", this.scene, function (newMeshes) {
        this.cube = newMeshes[0];
        this.cube.position.y = 20;
        this.cube.position.x = 20;
    }.bind(this));


        // Water
    this.waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, this.scene, false);
    this.water = new Materials.WaterMaterial("water", this.scene, new BABYLON.Vector2(1024, 1024));
    this.water.backFaceCulling = true;
    this.water.bumpTexture = new BABYLON.Texture("../../../assets/Terrain/waterbump.png", this.scene);
    this.water.windForce = -10;
    this.water.waveHeight = 0.5;
    this.water.bumpHeight = 0.1;
    this.water.waveLength = 0.1;
    this.water.waveSpeed = 50.0;
    this.water.colorBlendFactor = 0;
    this.water.windDirection = new BABYLON.Vector2(1, 1);
    this.water.colorBlendFactor = 0;
    this.waterMesh.material = this.water;

    this.water.addToRenderList(this.skybox);
    this.water.addToRenderList(this.ground);
    this.water.addToRenderList(this.sphere);
    this.water.addToRenderList(this.cube);

        ////////// RAY CAST TO FIND WATER HEIGHT ////////////
    //var angle = 0;
    this.scene.registerBeforeRender(function() {
        let time = this.water._lastTime / 100000;
        let x = this.sphere.position.x;
        let z = this.sphere.position.z;
        this.sphere.position.y = Math.abs((Math.sin(((x / 0.05) + time * this.water.waveSpeed)) * this.water.waveHeight * this.water.windDirection.x * 5.0) + (Math.cos(((z / 0.05) +  time * this.water.waveSpeed)) * this.water.waveHeight * this.water.windDirection.y * 5.0));

        x = this.cube.position.x;
        z = this.cube.position.z;
        this.cube.position.y = Math.abs((Math.sin(((x / 0.05) + time * this.water.waveSpeed)) * this.water.waveHeight * this.water.windDirection.x * 5.0) + (Math.cos(((z / 0.05) +  time * this.water.waveSpeed)) * this.water.waveHeight * this.water.windDirection.y * 5.0));

    }.bind(this));
}

doRender() : void {
    // Run the render loop.
    this.engine.runRenderLoop(() => {
        this.scene.render();
    });

    // The canvas/window resize event handler.
    window.addEventListener('resize', () => {
        this.engine.resize();
    });
}
我知道我可以进行空检查,但我不明白为什么我的多维数据集没有定义,因为(ImportMesh)是一个同步函数


一旦我设置了空检查,我就消除了错误。

由于bue是使用
ImportMesh
函数异步加载的,所以在前几帧中没有它,这会导致在
注册表前Render
函数中引发异常。请尝试以下操作:

this.scene.registerBeforeRender(函数(){
让时间=这个水;
设x=this.sphere.position.x;
设z=this.sphere.position.z;
this.sphere.position.y=Math.abs((Math.sin((x/0.05)+time*this.water.waveSpeed))*this.water.waveHeight*this.water.windDirection.x*5.0)+(Math.cos((z/0.05)+time*this.water.waveSpeed))*this.water.waveHeight*this.water.windDirection.y*5.0);
if(this.cube){
x=这个.cube.position.x;
z=这个.cube.position.z;
this.cube.position.y=Math.abs((Math.sin((x/0.05)+time*this.water.waveSpeed))*this.water.waveHeight*this.water.windDirection.x*5.0)+(Math.cos((z/0.05)+time*this.water.waveSpeed))*this.water.waveHeight*this.water.windDirection.y*5.0);
}
}.约束(这个);
这是一个非常简单的方法。另一种方法是在加载多维数据集后注册before Render函数(在
ImportMesh
的onSuccess回调中)