javascriptgltfthreejs-editor

threejs gltf loader not defined


i want to use gltf loader. but i get gltf laoder not defined error, want to use orbitcontrols get same error taht they arenot defined.

<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>

this is me trying to import all of them .

function loadGLTF() {
        let balloonLoader = new THREE.GLTFLoader();

        balloonLoader.load('./model/esa.gltf', (gltf) => {
            Mesh = gltf.scene;
            Mesh.scale.set(0.2,0.2,0.2);
            scene.add(Mesh);
            Mesh.position.x = 0;
            Mesh.position.y = 10.5;
            Mesh.position.z = 17;
        });
    }

this is how i try to use gltf loader. what is wrong with the code could you tell me?

and even better would be if someone could finally explain how to properly import threejs.


Solution

  • I'm not sure what you are doing exactly, but I created a file index.html with the following content, opened it in a browser and the code executes just fine.

    <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.122.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
    
    <script>
        function loadGLTF() {
            let balloonLoader = new THREE.GLTFLoader();
    
            balloonLoader.load('./model/esa.gltf', (gltf) => {
                Mesh = gltf.scene;
                Mesh.scale.set(0.2,0.2,0.2);
                scene.add(Mesh);
                Mesh.position.x = 0;
                Mesh.position.y = 10.5;
                Mesh.position.z = 17;
            });
        }
    
        loadGLTF()
    </script>
    </head>
    <body>
        
    </body>
    

    The GLTF loader is being invoked, and I'm not hitting any errors that THREE components are not defined.

    (I do hit a 404 error as I don't have a file locally called ./model/esa.gltf but that's not the problem you seem to be hitting).

    Could your loadGLTF() function somehow be being invoked before you have imported the scripts?

    Perhaps you could post the full code that has the problem?