Runtime error when using BufferGeometryLoader

Questions
1

I have this error message in the console:

TypeError: Cannot read property ‘index’ of undefined
at BufferGeometryLoader.parse (three.module.js:40525)
at Object.onLoad (three.module.js:40462)
at XMLHttpRequest. (three.module.js:36471)

my code is:

const loader= new THREE.BufferGeometryLoader();

meteor = loader.load("obj/meteor.json", function (geometry) {

    geometry.computeVertexNormals();
    geometry.scale( 1, 1, 1 );

    const material = new THREE.MeshStandardMaterial();

    meteor = new THREE.InstancedMesh( geometry, material, count );
    meteor.instanceMatrix.setUsage( THREE.DynamicDrawUsage );

    meteor.name = 'meteor';
    scene.add( meteor );
});

const meteor = scene.getObjectByName('meteor');

function animate() {

   requestAnimationFrame( animate );

   const meteor = scene.getObjectByName('meteor');

if(meteor) {

        for (i=0; i<amount; i++) {

            var angle = Math.random()*Math.PI*2;
            var d = Math.random()*300 + 1300;
            var x = Math.cos(angle)*d;
            var z = Math.sin(angle)*d;
            var y = (Math.random()*100)-50;

            var size = Math.random()+1;
            meteor.rotation.y += 0.2;
            meteor.position.set(x, y, z);
            meteor.scale.set(size, size, size);

            meteor.position.x = x;
            meteor.position.z = z;
            meteor.position.y = y;

            scene.add(meteor);

        }

    }

controls.update();
 composer.render(render);

}

function render() {

    renderer.render( scene, camera );

}

if you can help me that would be nice. I have been struggling since yesterday

2

Can you please share meteor.json in this thread?

3

meteor.json (207,0 Ko)

5

You have to load this kind of JSON with THREE.ObjectLoader.

6

ok, with THREE.ObjectLoader. i have this error message in the console:
three.module.js:15153 Uncaught TypeError: Cannot read property ‘attributes’ of undefined
at Object.update (three.module.js:15153)
at Object.update (three.module.js:15588)
at projectObject (three.module.js:24212)
at projectObject (three.module.js:24248)
at WebGLRenderer.render (three.module.js:24052)
at RenderPass.render (RenderPass.js:60)
at EffectComposer.render (EffectComposer.js:138)
at animate (app.js:425)

7

Well, ObjectLoader does not return a geometry. Meaning the line:

meteor = loader.load("obj/meteor.json", function (geometry) {

should be

loader.load("obj/meteor.json", function ( object ) {

In any event, they way you manage the meteor variable in your code looks strange. You should assign the meteor variable in the onLoad() and nowhere else.

8

sorry for these stupid questions I am a beginner.
I rewrote the code like this:

objloader.load(“obj/meteor.json”, function (object) {

// console.log(object.geometry);

// console.log(object.material);



geometry = object.geometry;

geometry.computeVertexNormals();

geometry.scale( 1, 1, 1 );

material = object.material;

meteor = new THREE.InstancedMesh(geometry, material, count );



meteor.instanceMatrix.setUsage( THREE.DynamicDrawUsage );

meteor.name = 'meteor';

scene.add( meteor );

});

const meteor = scene.getObjectByName(‘meteor’);

console.log(meteor);

I get meteor : undefined in console.

9

load() is asynchronous. You can’t safely access meteor until the loading process has finished.