如何在three.js中加载gLTF

Question

如何在three.js中加载gLTF

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

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

Run Code Online (Sandbox Code Playgroud)

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

有人能帮我吗？我只是想用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

2ph*_*pha 5

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

归档时间：	7 年，5 月前
查看次数：	2024 次
最近记录：	7 年，4 月前