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

THREE.Object3D.add: object not an instance of THREE.Object3D

提问by rikuto148

so i'm getting this error and I cant find the source of it. I believe it has to do with me importing and creating my 3d objects in my scene but i'm not sure what i'm doing wrong.

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

here is the code: I call this function before I call init

这是代码：我在调用 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);
} );
}

Then in init I add the objects to the scene

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

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

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

采纳答案by ProllyGeek

Ok here is the issue , the add call is invoked in wrong time , because i havent written this code from scratch and dont have time for very deep debugging , but i will give you a hint of what is wrong , and im sure you will find it easy to find the bug later , cause i think some of your objects are still loading while you are trying to add them to scene.

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

Procedure :

程序 ：

i changed

我变了

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);
    }

grouped the action in one new function called addObjects();:

将操作分组到一个名为 的新函数中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);
    };

then in your init()function i invoked the addObjects();, but it still give the same error !! so i tried invoking it after sometime - in line 309 > index.html :

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

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

please note that i have tried 100ms , and it didnt work , then 1 second works well , this is not a solution , it is just and indication that if you delay the function call everything will work fine , it is your job now to determine when to call it (i.e find the proper event to invoke the function ) as it appears that loader.onLoadCompleteis not doing the job.

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

you can find the modified file here.

你可以在这里找到修改后的文件。

回答by AdeptApril

For those arriving here and looking for an alternate reason for getting this error, I got it because I loaded a GLTF object, but did not add it to the scene as a THREE.Object3D object.

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

A pared-down example of what I did wrong:

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

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

I was puzzled for a while, as I did various debugging to see that, indeed, it was loading, and waiting 5 seconds didn't make the problem go away.

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

The key was to add ".scene", as seen below.

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

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