GLTF加载程序无法正常运行,并且无法加载3D模型

时间:2020-02-07 00:50:18

标签: javascript three.js 3d gltf

我正在尝试在Three.js中将3D模型上传到场景中,但是这样做很麻烦。 我决定重新创建一个示例进行练习,如下所示,但仍然出现错误,并且不起作用。

<!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>

出现错误:

获取http://127.0.0.1:5500/build/three.module.js净值:: ERR_ABORTED 404 (未找到)index4.html:78 Uncaught TypeError:THREE.GLTFLoader不是 构造函数 在初始化时(index4.html:78) 在index4.html:122

1 个答案:

答案 0 :(得分:1)

我认为坚持示例的代码样式和组织导入很容易,例如:

<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;

含义three.module.jsOrbitControlsGLTFLoader是ES6模块。在这种情况下,您可以创建没有GLTFLoader名称空间的THREE实例。与OrbitControls相同。

请注意,将ES6模块与非ES6模块混合并不是一种好方法。如果这样做,您将不可避免地面临真正难以追踪的问题。例如。 three.js之类的库被收录两次。