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

admin管理员组
文章数量:1024705

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

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

Share Improve this question edited Feb 7, 2020 at 4:53 Simas Joneliunas 3,14620 gold badges31 silver badges39 bronze badges asked Feb 7, 2020 at 0:50 Sophia98 3398 silver badges17 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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.

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

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

Share Improve this question edited Feb 7, 2020 at 4:53 Simas Joneliunas 3,14620 gold badges31 silver badges39 bronze badges asked Feb 7, 2020 at 0:50 Sophia98 3398 silver badges17 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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.

本文标签： javascriptGLTF Loader not working and doesn39t load 3D modelStack Overflow

版权声明：本文标题：javascript - GLTF Loader not working and doesn't load 3D model - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745601102a2158462.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - GLTF Loader not working and doesn't load 3D model - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章