时间戳

首页 > 解决方案 > GLTF Loader 不工作且不加载 3D 模型

javascript - GLTF Loader 不工作且不加载 3D 模型

问题描述

我正在尝试在 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>

带有一个错误：

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

标签： javascriptthree.js3dgltf

解决方案

我认为更容易坚持示例的代码风格并像这样组织您的导入：

<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.js,OrbitControls和GLTFLoader是 ES6 模块。在这种情况下，您可以创建一个GLTFLoader没有THREE命名空间的实例。对OrbitControls.

请注意，将 ES6 模块与非 ES6 模块混合使用并不是一个好方法。如果你这样做，你将不可避免地面临一些很难追查的问题。例如，像three.js被包含两次的库。

推荐阅读