GLTF 加载器无法正常工作且无法加载 3D 模型

Question

I'm trying to upload a 3D model to my scene in three.js however I have trouble doing this.我正在尝试在three.js中将3D模型上传到我的场景，但是我在这样做时遇到了麻烦。 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 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 ) 在 index4.html:122

Answer 1

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.意思是three.module.js 、 OrbitControls和GLTFLoader是 ES6 模块。 In this case, you can create an instance of GLTFLoader without the THREE namespace.在这种情况下，您可以创建一个没有THREE命名空间的GLTFLoader实例。 Same for OrbitControls .与OrbitControls相同。

Notice that it's no good approach to mix ES6 modules with non-ES6 modules.请注意，将 ES6 模块与非 ES6 模块混合使用并不是一个好方法。 If you do so, you will be inevitably faced with issues which are really hard to track down.如果您这样做，您将不可避免地面临难以追踪的问题。 Eg libraries like three.js get included twice.例如， three.js库three.js被包含两次。

GLTF 加载器无法正常工作且无法加载 3D 模型

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-07 09:24:33

GLTF 加载器无法正常工作且无法加载 3D 模型

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-07 09:24:33

解决方案1
1 已采纳 2020-02-07 09:24:33