1

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

1 回答 1

5

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

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

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

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

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

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

于 2018-05-17T02:11:26.740 回答