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


Answers

Three.js Error with THREE.ObjectLoader

I think you should just do scene.add( result ) instead.

Question

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



three.js - object not an instance of THREE.Object3D

Thanks to fritx for this answer pasted here from: https://github.com/fritx/vue-threejs/issues/2

Thanks for using the library!

For now, an component supposes that the mesh exists when it is created, like <object3d :obj="mesh"></object3d>.

If you're using async loaders, your code might look like this:

<template>
  <object3d v-if="mesh" :obj="mesh"></object3d>
</template>

<script>
export default {
  data () {
    return {
      mesh: null // <----
    }
  },
  methods: {
    createBox () {
      objLoader.load(xxx, geometry => {
        let mesh = new THREE.Mesh(geometry, material)
        this.mesh = mesh // <----
      })
    }
  }
}
</script>

More snippets by key word user:fritx "Loader.load(":

(including code in both vue-threejs and react-threejs)

https://github.com/search?q=user%3Afritx+%22Loader%28%29.load%28%22&ref=opensearch&type=Code

In "ExSpaceFighter.js", I also had a snippet with MTLLoader and OBJLoader:

https://github.com/fritx/react-threejs/blob/6e2317d1e616ed5562f889de6b885deffb14d18a/example/ExSpaceFighter.js#L18-L31

Hope that helps.

var mtlLoader = new MTLLoader();
mtlLoader.setBaseUrl( 'SpaceFighter03/' )
mtlLoader.setPath( 'SpaceFighter03/' )
mtlLoader.load( 'SpaceFighter03.mtl', ( materials ) => {
  materials.preload();
  var objLoader = new OBJLoader();
  objLoader.setMaterials( materials );
  objLoader.setPath( 'SpaceFighter03/' )
  objLoader.load( 'SpaceFighter03.obj', ( group ) => {
    const body = group.children[0]
    body.material.color.set(0xffffff)
    this.setState({ body })
  })
})

If I'm wrong, please let me know ;)





Tags