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。

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

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

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

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

如何在three.js中加载gLTF

1 个答案: