CODEWITHSUNDEEP
javascriptconstructorthree.js3dgltf
vergeen3lla
vergeen3lla

Reputation: 13

TypeError: THREE.GLTFLoader is not a constructor

I'm trying to import a 3d model on my javascript file, this is the 'test.html' code:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <script type="module" src="./three.js-master/examples/jsm/loaders/GLTFLoader.js"></script>
        <script src="./three.js-master/build/three.js"></script>
        <script src="./test.js"></script>
    </body>
</html>

And this is the 'test.js' code:

var camera, scene, renderer;

window.onload = function init() {

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 45, 1.8, 0.1, 20.0 ); // fovy, aspect, near, far
    renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(0xffffff);
    renderer.setSize(1280, 720); //Size of the camera
    document.body.appendChild(renderer.domElement);

    var loader = new THREE.GLTFLoader();

    loader.load( 'duck/source/mindbreaker.glb', function ( gltf ) {

        scene.add( gltf.scene );

      }, undefined, function ( error ) {

        console.error( error );

      } );

    camera.position.x = 0.0;
    camera.position.y = 0.0;
    camera.position.z = 10.0;

    render();
}

function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

I run it on FIREFOX and I tried to change every possible path. I also created a localhost to read the files, but the same error appears.

Upvotes: 0

Views: 2088

Answers (1)

2pha
2pha

Reputation: 10165

It is because you are loading in the ES6 version of GLTFLoader, but using the pre built (ES5) three.js.
Load in the ES5 version of the GLTFLoader from the examples/js/loaders folder (and load it after three.js).
eg. 

<script src="./three.js-master/build/three.js"></script>
<script src="./three.js-master/examples/js/loaders/GLTFLoader.js"></script>
<script src="./test.js"></script>

Upvotes: 1

Related Questions