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

Question

so I get this error and I can not find its source. I believe that this is due to the fact that I import and create 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 objects to the scene

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

Answer 1

Ok, here is the problem, the add call is called at the wrong time, because I did not write this code from scratch and did not have time for very deep debugging, but I will give you a hint of what's wrong, and I'm sure it will be easier to find the error later, because I think some of your objects are still loading when you try to add them to the 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 am called addObjects(); but she still gives the same error! so I tried calling it after a while - on line 309> index.html:

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

Please note that I tried 100 ms and it didn’t work, then 1 second works well, this is not a solution, it’s just an indication that if you delay the function call, everything will work fine, it's your job now to determine when it call (i.e. find the appropriate event to call the function), because it turns out that loader.onLoadComplete not doing the job.

You can find the modified file here .

Answer 2

For those who come here and look for an alternative reason to get this error, I got it because I loaded the GLTF object, but did not add it to the scene as a THREE.Object3D object.

A stripped-down example of what I did wrong:

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

For a while I was puzzled because I was doing various debugs to see that, indeed, it was loading, and waiting for 5 seconds did not fix the problem.

The key was to add ".scene" as shown below.

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