CODEWITHSUNDEEP
javascriptthree.js3dgltf
Sophia98
Sophia98

Reputation: 339

GLTF Loader not working and doesn't load 3D model

I'm trying to upload a 3D model to my scene in three.js however I have trouble doing this. I decided to recreate an example to practice which is shown below but I still get error and it doesn't work.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Website first attempt</title>

        <script src="js/three.min.js"></script>
        <script type = "module"src="js/OrbitControls.js"></script>
        <script type = "module" src="js/GLTFLoader.js"></script>


        <style>
            body { margin: 0;}
            canvas { display: block; }
        </style>

    </head>


    <body>
        <div class = "wave"></div>
        <script type = "module">


            var scene, camera, renderer, controls;
            var hlight,directionalLight, light, light2, light3, light4;


            function init () {
                //scene
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xdddddd );


                //camera
                camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
                camera.rotation.y = 45/180*Math.PI;
                camera.position.x = 800;
                camera.position.y = 100;
                camera.position.z = 1000;


                //render                
                renderer = new THREE.WebGLRenderer({antialias:true});
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize(window.innerWidth, window.innerHeight);

                document.body.appendChild(renderer.domElement);

                //controls
                controls = new THREE.OrbitControls( camera, renderer.domElement );

                hlight = new THREE.AmbientLight (0x404040,100);
                scene.add(hlight);

                directionalLight = new THREE.DirectionalLight(0xffffff,100);
                directionalLight.position.set(0,1,0);
                directionalLight.castShadow = true;
                scene.add(directionalLight);

                light = new THREE.PointLight(0xc4c4c4,10);
                light.position.set(0,300,500);
                scene.add(light);

                light2 = new THREE.PointLight(0xc4c4c4,10);
                light2.position.set(500,100,0);
                scene.add(light2);

                light3 = new THREE.PointLight(0xc4c4c4,10);
                light3.position.set(0,100,-500);
                scene.add(light3);

                light4 = new THREE.PointLight(0xc4c4c4,10);
                light4.position.set(-500,300,500);
                scene.add(light4);

                var loader = new THREE.GLTFLoader();
                loader.load('scene.gltf', function(gltf){
                car = gltf.scene.children[0];
                car.scale.set(0.5,0.5,0.5);
                scene.add(gltf.scene);
                animate();
        });









            }




            function onWindowResize () {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
                }

                window.addEventListener('resize', onWindowResize, false);

            function animate () {

                requestAnimationFrame(animate);
                controls.update();               
                render();

            }

            function render() {

                renderer.render( scene, camera );

            }

            init ();
            animate();


        </script>
    </body>
</html>

Comes with an error:

GET http://127.0.0.1:5500/build/three.module.js net::ERR_ABORTED 404 (Not Found) index4.html:78 Uncaught TypeError: THREE.GLTFLoader is not a constructor at init (index4.html:78) at index4.html:122

Upvotes: 1

Views: 7958

Answers (1)

Mugen87
Mugen87

Reputation: 31086

I think easier to stick to the example's code style and organize your imports like so:

<script type = "module">

    import * as THREE from '../build/three.module.js';

    import { OrbitControls } from './jsm/controls/OrbitControls.js';
    import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

    var scene, camera, renderer, controls;

Meaning three.module.js, OrbitControls and GLTFLoader are ES6 modules. In this case, you can create an instance of GLTFLoader without the THREE namespace. Same for OrbitControls.

Notice that it's no good approach to mix ES6 modules with non-ES6 modules. If you do so, you will be inevitably faced with issues which are really hard to track down. E.g. libraries like three.js get included twice.

Upvotes: 3

Related Questions