Question

当我在three.js-master上下载threejs.org文件夹并打开glTF加载器示例（文件名webgl_loader_gltf.html）时，我的浏览器无法渲染3D模型。

它应该像在web version上那样显示3D头盔，但我所看到的只是一个黑屏。我怀疑实际模型在那里，但是照明或网格设置不正确？

我所看到的：

我应该看到的东西

我在Safari开发人员模式下检查了控制台窗口，发现了这两个可能是错误的原因。最值得注意的是cannot load due to access control checks：

我已经使用Google Chrome浏览器尝试过，但是存在相同的问题。我确保实际的3D模型位于文件夹中（three.js-master>示例>模型> gltf> DamagedHelmet）。

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - glTF loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000;
                color: #fff;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #info a {
                color: #75ddc1;
                font-weight: bold;
            }
        </style>
    </head>

<body>
    <div id="info">
        <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader<br />
        Battle Damaged Sci-fi Helmet by
        <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
        <a href="https://hdrihaven.com/hdri/?h=pedestrian_overpass" target="_blank" rel="noopener">Pedestrian Overpass</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
    </div>

    <script src="../build/three.js"></script>

    <script src="js/controls/OrbitControls.js"></script>
    <script src="js/loaders/GLTFLoader.js"></script>

    <script src="js/loaders/EquirectangularToCubeGenerator.js"></script>
    <script src="js/loaders/RGBELoader.js"></script>

    <script src="js/pmrem/PMREMGenerator.js"></script>
    <script src="js/pmrem/PMREMCubeUVPacker.js"></script>

    <script src="js/WebGL.js"></script>
    <script src="js/libs/stats.min.js"></script>

    <script>
        if ( WEBGL.isWebGLAvailable() === false ) {
            document.body.appendChild( WEBGL.getWebGLErrorMessage() );
        }
        var container, stats, controls;
        var camera, scene, renderer;
        init();
        animate();
        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
            camera.position.set( - 1.8, 0.9, 2.7 );
            controls = new THREE.OrbitControls( camera );
            controls.target.set( 0, - 0.2, - 0.2 );
            controls.update();
            scene = new THREE.Scene();
            var loader = new THREE.RGBELoader().setPath( 'textures/equirectangular/' );
            loader.load( 'pedestrian_overpass_2k.hdr', function ( texture ) {
                texture.encoding = THREE.RGBEEncoding;
                texture.minFilter = THREE.NearestFilter;
                texture.magFilter = THREE.NearestFilter;
                texture.flipY = true;
                var cubeGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
                cubeGenerator.update( renderer );
                var pmremGenerator = new THREE.PMREMGenerator( cubeGenerator.renderTarget.texture );
                pmremGenerator.update( renderer );
                var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
                pmremCubeUVPacker.update( renderer );
                var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
                // model
                var loader = new THREE.GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
                loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
                    gltf.scene.traverse( function ( child ) {
                        if ( child.isMesh ) {
                            child.material.envMap = envMap;
                        }
                    } );
                    scene.add( gltf.scene );
                } );
                pmremGenerator.dispose();
                pmremCubeUVPacker.dispose();
                scene.background = cubeGenerator.renderTarget;
            } );
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.gammaOutput = true;
            container.appendChild( renderer.domElement );
            window.addEventListener( 'resize', onWindowResize, false );
            // stats
            stats = new Stats();
            container.appendChild( stats.dom );
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        //
        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
            stats.update();
        }
    </script>

</body>

Answer 1

这是因为您只是打开文件，而不是通过本地服务器提供文件。
它在名为How to run things locally的three.js文档页面上概述。

从外部文件加载的内容
  如果从中加载模型或纹理   外部文件，因为浏览器具有相同的原始策略安全性   限制，从文件系统加载将因安全性而失败

有两种解决方法：

更改浏览器中本地文件的安全性。
  这使您能够   以以下方式访问您的页面：
  file：///yourFile.html

从本地Web服务器运行文件。
  这使您可以按以下方式访问页面：
  http://localhost/yourFile.html

Answer 2

对于每个@ 2pha解决方案，我在Mac上打开Terminal并输入以下内容：

sudo npm install http-server -g

如果您没有输入sudo，则可能由于管理特权而无法使用。运行后，我输入：

http-server . -p 8000

您应该看到这样的输出：

Starting up http-server, serving ./
Available on:
  http://192.168.0.5:8000
  http://127.0.0.1:8000
Hit CTRL-C to stop the server

接下来，打开浏览器并输入以下地址：http://localhost:8000。导航到.html文件（在我的情况下为webgl_loader_gltf.html）并将其打开。应该可以！

示例three.js glTF加载器未渲染3D模型

2 个答案: