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

问题:

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.

here is the code: I call this function before I call 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

loader.onLoadComplete=function(){     scene.add(FloorDiskFire);      scene.add(firePillar);     scene.add(earthPillar);     scene.add(waterPillar);     scene.add(airPillar); }; 

回答1:

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.

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(); :

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 :

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.onLoadComplete is not doing the job.

you can find the modified file here.

文章来源: THREE.Object3D.add: object not an instance of THREE.Object3D