Trying to run example from github does not work

Questions
1

Hi all,

I am trying to run the HDRI/webgl loader gltf example: three.js webgl - glTF loader

using the github source code: three.js/webgl_loader_gltf.html at 0ccf4fe7d5ad9073492c4bb3e35ffd1ca6241d53 · mrdoob/three.js · GitHub

However this is what I got on my local env, just blank black screen:

Screenshot 2020-03-25 at 13.00.22
Screenshot 2020-03-25 at 13.00.222548×1134 81.4 KB

I found no errors on the console, as I have all the files needed.

This is the test project:

Or direct download link:
https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/shonsirsha/sandbox/blob/b3b7357279edeccda78ceee19265c2b6d5bf63d8/3js_hdr.zip
(sorry I can’t upload it here as it’s too big)

any help would be appreciated!! :slight_smile:
Thank you very much.

2

You are mixing module vs non-module code which is not supported. Use the import style from the following code listing to make your example work (meaning only ES6 imports and no global script includes).

<!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">
		<link type="text/css" rel="stylesheet" href="main.css">
</head>

	<body>
		<div id="info">
			<a href="https://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=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
		</div>

		<script type="module">

			import * as THREE from 'https://threejs.org/build/three.module.js';

			import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
			import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
			import { RGBELoader } from 'https://threejs.org/examples/jsm/loaders/RGBELoader.js';
			import { RoughnessMipmapper } from 'https://threejs.org/examples/jsm/utils/RoughnessMipmapper.js';

			var container, controls;
			var camera, scene, renderer;

			init();
			render();

			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.6, 2.7 );

				scene = new THREE.Scene();

				new RGBELoader()
					.setDataType( THREE.UnsignedByteType )
					.setPath( 'textures/equirectangular/' )
					.load( 'royal_esplanade_2k.hdr', function ( texture ) {

						var envMap = pmremGenerator.fromEquirectangular( texture ).texture;

						scene.background = envMap;
						scene.environment = envMap;

						texture.dispose();
						pmremGenerator.dispose();

						render();

						// model

						// use of RoughnessMipmapper is optional
						var roughnessMipmapper = new RoughnessMipmapper( renderer );

						var loader = new GLTFLoader().setPath( 'glTF/' );
						loader.load( 'DamagedHelmet.gltf', function ( gltf ) {

							gltf.scene.traverse( function ( child ) {

								if ( child.isMesh ) {

									roughnessMipmapper.generateMipmaps( child.material );

								}

							} );

							scene.add( gltf.scene );

							roughnessMipmapper.dispose();

							render();

						} );

					} );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 0.8;
				renderer.outputEncoding = THREE.sRGBEncoding;
				container.appendChild( renderer.domElement );

				var pmremGenerator = new THREE.PMREMGenerator( renderer );
				pmremGenerator.compileEquirectangularShader();

				controls = new OrbitControls( camera, renderer.domElement );
				controls.addEventListener( 'change', render ); // use if there is no animation loop
				controls.minDistance = 2;
				controls.maxDistance = 10
				controls.target.set( 0, 0, - 0.2 );
				controls.update();

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

				render();

			}

			//

			function render() {

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>
3 Likes
3

Thanks, @Mugen87 for your advice.

I managed to make a THREE.js example file work and publish it on my GitHub Pages test page after replacing the “local paths” to THREE.js and jsm library files with the “absolute paths” to their locations on threejs.org as shown below:

<script type="module">

			// import * as THREE from './build/three.module.js';
			import * as THREE from 'https://threejs.org/build/three.module.js'; 

			// import Stats from './jsm/libs/stats.module.js';
			// import { GUI } from './jsm/libs/dat.gui.module.js';
			// import { CinematicCamera } from './jsm/cameras/CinematicCamera.js';

			import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
			import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';
			import { CinematicCamera } from 'https://threejs.org/examples/jsm/cameras/CinematicCamera.js';