【发布时间】：2019-10-11 12:18:05
【问题描述】：
当我下载threejs.org 上的three.js-master 文件夹并打开glTF 加载程序示例（文件名webgl_loader_gltf.html）时，我的浏览器无法渲染3D 模型。
它应该像web version 一样显示 3D 头盔，但我看到的只是黑屏。我怀疑实际模型在那里，但照明或网格设置不正确？
我所看到的：
我应该看到的：
我在 Safari 开发者模式下检查了控制台窗口，发现这两个错误可能是原因。最值得注意的是cannot load due to access control checks：
我已经使用谷歌浏览器尝试过，但同样的问题。我确保实际的 3D 模型在文件夹中（three.js-master > examples > models > 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>
【问题讨论】：
-
您不能简单地打开存储在硬盘中的
.html文件，然后让它收集也存储在硬盘中的资产。对于恶意人员来说，这将是一个巨大的安全漏洞，可以读取您存储在其中的所有文档，因此浏览器可以保护您免受攻击。您需要设置一个本地服务器，如下面的答案所述，它以更安全的http协议交付文件，而无需授予对C:/驱动器的访问权限。