Загрузчик GLTF не работает и не загружает 3D модель - PullRequest
Новая
       17

Загрузчик GLTF не работает и не загружает 3D модель

1 голос
/ 07 февраля 2020

Я пытаюсь загрузить 3D-модель на свою сцену в три раза. js, однако у меня возникают проблемы с этим. Я решил воссоздать пример для практики, который показан ниже, но я все еще получаю ошибку, и она не работает. 

<!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 (не найдено) index4. html: 78 Uncaught TypeError: THREE.GLTFLoader не является конструктором в init ( index4. html: 78) на index4. html: 122

1 Ответ

1 голос
/ 07 февраля 2020

Я думаю, что проще придерживаться стиля кода примера и организовать импорт следующим образом: 

<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 включаются дважды.

...