找不到GLTF文件404

索菲亚98

因此，我正在尝试加载GLTF文件，并且收到此错误：

我不知道为什么它无法找到并打开文件。我是否必须设置本地服务器？我在线上查找了其他示例，其中包括一个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>

木根87

DracoLoader仅在glTF使用相同名称的压缩算法压缩资产时才需要使用。

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

是的，强烈建议使用本地Web服务器。特别是为了避免任何与安全性相关的浏览器问题。该项目实际上提供了有关此主题的小指南：如何在本地运行事物。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。