如何在three.js中加载gLTF答案

【问题标题】：How to load gLTF in three.js如何在three.js中加载gLTF
【发布时间】：2018-10-27 04:14:03
【问题描述】：

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

【问题讨论】：

标签： javascript three.js gltf

【解决方案1】：

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

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

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

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

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

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

【讨论】：