THREE.Object3D.add:对象不是THREE.Object3D的实例

Question

所以我收到这个错误,我找不到它的来源.我相信它与我在我的场景中导入和创建我的3D对象有关,但我不确定我做错了什么.

这是代码:我在调用init之前调用此函数

function loadObjects()
{
loader = new THREE.JSONLoader();

var floorDiskmaterial = new THREE.MeshPhongMaterial({
    map: THREE.ImageUtils.loadTexture('img/floor_test.jpg'),
    transparent: true,
    color: 0xeaeaea,
    ambient: 0xeaeaea,
    overdraw: 0.5,
    //specular: 0x6a3e6d,
    shading: THREE.FlatShading,
    fog: false,
    //shininess: 50,
});

loader.load( "models/floorScene.js", function( geometry ) {
    FloorDiskFire = new THREE.Mesh( geometry, floorDiskmaterial);
    FloorDiskFire.position.set(0,0.2,0);
    FloorDiskFire.castShadow = true;
    FloorDiskFire.receiveShadow = true;
    FloorDiskFire.scale.set(1.5,1.5,1.5);
    //FloorDiskFire.rotation.y = -0.78;
} );

//-----Pillar Loader------//

var pillarMaterial = new THREE.MeshPhongMaterial({
    //map: THREE.ImageUtils.loadTexture('img/pillarMap.png'),
    //transparent: true,
    color: 0xeaeaea,
    ambient: 0xeaeaea,
    overdraw: 0.5,
    //specular: 0x6a3e6d,
    shading: THREE.FlatShading,
    fog: false,
    //shininess: 50,
});

loader.load( "models/pillar.js", function( pillar ) {
    firePillar = new THREE.Mesh(pillar, pillarMaterial);
    firePillar.position.set(135,0,135);
    firePillar.castShadow = true;
    firePillar.receiveShadow = true;
    firePillar.scale.set(1.7,1.7,1.7);
} );

loader.load( "models/pillar.js", function( pillar ) {
    earthPillar = new THREE.Mesh(pillar, pillarMaterial);
    earthPillar.position.set(135,0,-135);
    earthPillar.castShadow = true;
    earthPillar.receiveShadow = true;
    earthPillar.scale.set(1.7,1.7,1.7);
} );

loader.load( "models/pillar.js", function( pillar ) {
    airPillar = new THREE.Mesh(pillar, pillarMaterial);
    airPillar.position.set(-135,0,135);
    airPillar.castShadow = true;
    airPillar.receiveShadow = true;
    airPillar.scale.set(1.7,1.7,1.7);
} );

loader.load( "models/pillar.js", function( pillar ) {
    waterPillar = new THREE.Mesh(pillar, pillarMaterial);
    waterPillar.position.set(-135,0,-135);
    waterPillar.castShadow = true;
    waterPillar.receiveShadow = true;
    waterPillar.scale.set(1.7,1.7,1.7);
} );
}

然后在init中我将对象添加到场景中

loader.onLoadComplete=function(){
    scene.add(FloorDiskFire);

    scene.add(firePillar);
    scene.add(earthPillar);
    scene.add(waterPillar);
    scene.add(airPillar);
};

Answer 1

对于那些到达这里并寻找出现此错误的其他原因的人，我得到了它，因为我加载了一个 GLTF 对象，但没有将它作为 THREE.Object3D 对象添加到场景中。

我做错了什么的简化示例：

let example = new THREE.Object3D();
loader.load(objects.exampleGLTF, function (object){
    example = object;
    scene.add(example);
});

我困惑了一段时间，因为我做了各种调试才看到，确实是在加载，等待 5 秒并没有让问题消失。

关键是添加“.scene”，如下所示。

let example = new THREE.Object3D();
loader.load(objects.exampleGLTF, function (object){
    example = object.scene;
    scene.add(example);
});

Answer 2

好吧，问题是，添加调用在错误的时间被调用，因为我没有从头开始编写这段代码，也没有时间进行非常深入的调试，但我会给你一个提示，告诉你哪里出了问题，我相信你会发现的。稍后很容易找到错误，因为我认为当您尝试将某些对象添加到场景时，它们仍在加载。

程序 ：

我变了

loader.onLoadComplete=function(){
        scene.add(FloorDiskFire);
        //scene.add(FloorDiskEarth);
        //scene.add(FloorDiskWater);
        //scene.add(FloorDiskAir);

        scene.add(firePillar);
        scene.add(earthPillar);
        scene.add(waterPillar);
        scene.add(airPillar);
    }

将操作分组到一个名为 的新函数中addObjects();：

function addObjects(){
        scene.add(FloorDiskFire);
        //scene.add(FloorDiskEarth);
        //scene.add(FloorDiskWater);
        //scene.add(FloorDiskAir);

        scene.add(firePillar);
        scene.add(earthPillar);
        scene.add(waterPillar);
        scene.add(airPillar);
    };

然后在你的init()函数中我调用了addObjects();，但它仍然给出相同的错误！所以我尝试在一段时间后调用它 - 在第 309 行> index.html 中：

setTimeout(function(){addObjects();},1000);

请注意，我已经尝试了 100 毫秒，但没有成功，然后 1 秒就可以了，这不是一个解决方案，它只是表明如果您延迟函数调用，一切都会正常工作，现在您的工作是确定何时调用它（即找到适当的事件来调用该函数），因为它似乎loader.onLoadComplete没有完成这项工作。

您可以在此处找到修改后的文件。