如何在 three.js 中加载 gLTF

Question

我正在尝试使用 three.js 上传 gLTF 文件，但它对我不起作用。我一直在做一些研究来修复错误，但我仍然有黑屏。修复方法之一是将其添加到我的 chrome 目标目录

‘path to your chrome installation\chrome.exe --allow-file-access-from-files’

这解决了我的问题，但是当我打开控制台时，我仍然得到这个

有人可以帮助我吗？我只是想用 three.js

在屏幕上显示 'DamagedHelmet.gltf' 文件

有时错误会再次出现，这就是它的样子 JS代码

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Three.js Crash Course</title>

    <style>

        body{

            margin: 0;

        }

        canvas{

            width: 100%;
            height: 100%;
        }

    </style>

    </head>

    <body>

    <script src="js/three.js"></script>
        <script src="js/OrbitControls.js"></script>
        <script src="js/GLTFLoader.js"></script>

        <script>

        //To display anything we need three things: scene, camera, renderer.

             var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75/*POV*/, window.innerWidth / window.innerHeight/*aspect ratio so it takes on the size of the screen*/, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();//API for rendering/processing 2D and 3D to browsers
            renderer.setSize(window.innerWidth, innerHeight);//size you want it to render which is size of screen/area
            document.body.appendChild(renderer.domElement);//Add the renderer to the HTML document/canvas

            controls = new THREE.OrbitControls(camera, renderer.domElement);
            //-------create shape you need geometry, material/apperance and cube

            var loader = new THREE.GLTFLoader();

            loader.load(
    // resource URL
    'models/gltf/duck/gLTF/duck.gltf',
    // called when the resource is loaded
    function ( gltf ) {

        scene.add( gltf.scene );
        camera.position.z = 5;
        gltf.animations; // Array<THREE.AnimationClip>
        gltf.scene; // THREE.Scene
        gltf.scenes; // Array<THREE.Scene>
        gltf.cameras; // Array<THREE.Camera>
        gltf.asset; // Object

    },
    // called when loading is in progresses
    function ( xhr ) {

        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    },
    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );

    }
);


            var animate = function(){


                requestAnimationFrame(animate);
                //cube.rotation.x +=0.01;
                //cube.rotation.y +=0.01;
                renderer.render(scene, camera);
            }



            animate();
        </script>
    </body>


</html>

Answer 1

直接取自 three.js 手册：
https://threejs.org/docs/#manual/introduction/How-to-run-things-locally

如何运行本地化
如果您只使用程序几何体并且不加载任何纹理，网页应该直接从文件系统工作，只需双击文件管理器中的 HTML 文件，它应该在浏览器中显示工作（您将请参阅地址栏中的 file:///yourFile.html）。

从外部文件加载的内容如果从外部文件加载模型或纹理，由于浏览器的同源策略安全限制，从文件系统加载会失败并出现安全异常。

有两种方法可以解决这个问题：

更改浏览器中本地文件的安全性。这使您可以访问您的页面：file:///yourFile.html
运行来自本地网络服务器的文件。这允许您访问您的页面为：http://localhost/yourFile.html

如果您使用选项 1，请注意，如果使用相同的浏览器进行常规网上冲浪，您可能会面临一些漏洞。为了安全起见，您可能希望创建一个单独的浏览器配置文件/快捷方式，仅用于本地开发。让我们依次讨论每个选项。

如何在 three.js 中加载 gLTF

How to load gLTF in three.js

javascript

three.js

gltf