找不到 GLTF 文件 404

Question

所以我在尝试加载 GLTF 文件时收到此错误：

我不知道为什么它不能找到并打开文件。我必须设置本地服务器吗？我在网上查找了其他示例，this one 包含一个 DRACOLoader。诚然，我不知道这是做什么用的，想知道我是否需要实现它才能加载它。

这是我的代码：

<html>

    <head>
        <meta charset="utf-8">
        <title>Website first attempt</title>


        <style>
            body { margin: 0;
                background: linear-gradient(to bottom, #33ccff 0%, #ffffff 20%);}
            canvas { display: block; }
        </style>

    </head>

    <body>

      <!-- <script type = "module" src="build/myScript.js"></script>-->
       <script type = "module">
        import * as THREE from '../build/three.module.js';

          import { GLTFLoader } from '../build/GLTFLoader.js';

            let scene, camera, renderer, hlight;


            function init () {
                //scene
                scene = new THREE.Scene();

                //camera
                camera = new THREE.PerspectiveCamera(40, window.innerWidth/ window.innerHeight, 1, 5000);

                //light
                hlight = new THREE.AmbientLight (0x404040, 100);
                scene.add(hlight);


                //render                
                renderer = new THREE.WebGLRenderer({antialias:true});
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setClearColor( 0x000000, 0 );
                renderer.setSize(window.innerWidth, window.innerHeight);

                document.body.appendChild(renderer.domElement);

                //3d
                let loader = new GLTFLoader();
                loader.load('assets/londonmap.gltf', function(gltf){
                    scene.add(gltf.scene);

                })


            }


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

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }

            init ();
            animate();


       </script>
    </body>
</html>

Answer 1

DracoLoader 仅当 glTF 资产使用同名压缩算法压缩时才需要。

HTTP 404 表示无法从给定路径加载文件（在您的情况下 assets/londonmap.gltf）。所以你必须确保资产实际存在于相应的目录中。

是的，强烈建议使用本地网络服务器。特别是为了避免任何与安全相关的浏览器问题。该项目实际上提供了一个关于这个主题的小指南：How to run things locally.

找不到 GLTF 文件 404

GLTF file 404 not found

javascript

three.js

gltf