When I download the three.js-master folder on threejs.org, and open up the glTF loader example (file name webgl_loader_gltf.html), my browser does not render the 3D model.
It should show the 3D helmet like on the web version, but all I see is a black screen. I suspect the actual model is there, but the lighting or mesh isn't set up correctly?
What I see:
What I should see:
I checked the console window in Safari Developer Mode, and discovered these two errors that might be the cause. Most notable is cannot load due to access control checks:
I have tried it using Google Chrome but same issue. I made sure the actual 3D model is in the folder (three.js-master > examples > models > gltf > DamagedHelmet).
Here is the code:
<!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>
.htmlfile stored in your hard drive, and have it gather assets also stored in your hard drive. This would be a huge security vulnerability for malicious people to read all the documents you have stored there, so the browser protects you from that. You need to set up a local server, as explained in the answer below, which delivers the files in the saferhttpprotocol without granting access to yourC:/drive.