Uncaught ReferenceError: model is not defined

Question

I'm very new to JavaScript so for all I know you all could be cringing hard at what my code. Basically I'm trying to define a model imported via the Three.js GTLF Loader and define it as 'model' so I can make it automatically rotate.

My terminology is probably way off par but this is the only way I know how to explain what I'm doing and what needs fixing.

I'll just link my whole code but the error is evident here:

                        var model
                        var modelLoader = new GLTFLoader().setPath( 'models/DamagedHelmet/' );
                        modelLoader.load( 'DamagedHelmet.gltf', function ( gltf ) {

                            model = gltf.scene;
                            gltf.scene.traverse( function ( child ) {

                                if ( child.isMesh ) {

                                    roughnessMipmapper.generateMipmaps( child.material );

                                }

                            } );

                            scene.add(model);

                            roughnessMipmapper.dispose();

                            render();

                        } );

I only defined the object as model so the object would automatically continuously rotate and I tried doing it here, a few lines of code below:

                function render() {

            renderer.render( scene, camera );

                model.rotation.x += 0.01;
                model.rotation.y += 0.005;

            }

There's probably something really obvious that I'm missing or doing wrong. All the solutions that I found online only seem to work if the Javascript isn't imported via module. (that's at least my guess)

Cheers guys.

Answer 1

Gltf is kind of a pain but for your problem depending if you're using node or à local script be sure to add(for node) :

import { GLTFLoader } from '../../node_modules/three/examples/jsm/loaders/GLTFLoader.js';

in order to add GLTFLoader to your project

Once you've done that you could try to make sure not to cross the CORS policy which is making sure that you allow same-origin in your header, if you use express this gives you something like :

app.get('/', (req, res, next) =>{
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
next()
  });

source

And then you have to make sur that all those files :

"buffers" : [
    {
        "byteLength" : 558504,
        "uri" : "DamagedHelmet.bin"
    }
],
"images" : [
    {
        "uri" : "Default_albedo.jpg"
    },
    {
        "uri" : "Default_metalRoughness.jpg"
    },
    {
        "uri" : "Default_emissive.jpg"
    },
    {
        "uri" : "Default_AO.jpg"
    },
    {
        "uri" : "Default_normal.jpg"
    }
],

listed in DamagedHelmet are also available and don't break CORS policy only then you might use your code which seems correct to me