javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - glTF 2.0</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: #222222;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				color: #808080;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}

			#container {
				position: absolute;
				top: 0px;
				width:100%;
				height:100%;
				z-index: -1;
			}

			#controls {
				position: absolute;
				width: 200px;
				bottom: 0px;
				left: 0px;
				padding: 10px;
				background-color: White;
				font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
			}

			#controls > div {
				margin-bottom: 8px;
			}

			#controls hr {
				border: 0px;
				height: 1px;
				margin-bottom: 10px;
				background-color: #bbb;
			}

			#info a, .button {
				color: #f00;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer
			}
		</style>
	</head>

	<body>
		<div id="info">
		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
		<a href="https://github.com/KhronosGroup/glTF" target="_blank" rel="noopener">glTF</a> 2.0 loader
		<br>
		BoomBox by <a href="https://www.microsoft.com/" target="_blank" rel="noopener">Microsoft</a>
		</div>
	<div id="container"></div>
	<div id="controls">
		<div id="status">Loading...</div>
		<hr />
		<div>
			Model
			<select id="scenes_list" size="1" onchange="selectScene();" ondblclick="selectScene();"></select>
		</div>
		<div>
			Camera
			<select id="cameras_list" size="1" onchange="selectCamera();" ondblclick="selectCamera();"></select>
		</div>
		<div>
			Animations
			<input type="checkbox" checked onclick="toggleAnimations();">Play</input>
		</div>
		<div>
			Extension
			<select id="extensions_list" onchange="selectExtension();">
				<option value="glTF">None (Default)</option>
				<option value="glTF-Embedded">None (Embedded)</option>
				<option value="glTF-Binary">None (Binary)</option>
				<option value="glTF-MaterialsCommon">Common Materials</option>
				<option value="glTF-pbrSpecularGlossiness">Specular-Glossiness (PBR)</option>
				<option value="glTF-techniqueWebGL">GLSL</option>
			</select>
		</div>
	</div>
		<script src="../build/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/loaders/GLTF2Loader.js"></script>

		<script>
			var orbitControls = null;
			var container, camera, scene, renderer, loader;

			var cameraIndex = 0;
			var cameras = [];
			var cameraNames = [];
			var defaultCamera = null;
			var gltf = null;
			var mixer = null;
			var clock = new THREE.Clock();

			function onload() {

				window.addEventListener( 'resize', onWindowResize, false );
				document.addEventListener( 'keydown', function(e) { onKeyDown(e); }, false );

				buildSceneList();
				switchScene(0);
				animate();

			}

			function initScene(index) {

				container = document.getElementById( 'container' );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x222222 );

				defaultCamera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 1000 );

				//defaultCamera.up = new THREE.Vector3( 0, 1, 0 );
				scene.add( defaultCamera );
				camera = defaultCamera;

				var sceneInfo = sceneList[index];

				var spot1 = null;

				if (sceneInfo.addLights) {

					var ambient = new THREE.AmbientLight( 0x222222 );
					scene.add( ambient );

					var directionalLight = new THREE.DirectionalLight( 0xdddddd );
					directionalLight.position.set( 0, 0, 1 ).normalize();
					scene.add( directionalLight );

					spot1   = new THREE.SpotLight( 0xffffff, 1 );
					spot1.position.set( 10, 20, 10 );
					spot1.angle = 0.25;
					spot1.distance = 1024;
					spot1.penumbra = 0.75;

					if ( sceneInfo.shadows ) {

						spot1.castShadow = true;
						spot1.shadow.bias = 0.0001;
						spot1.shadow.mapSize.width = 2048;
						spot1.shadow.mapSize.height = 2048;

					}

					scene.add( spot1 );

				}

				// RENDERER

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				if (sceneInfo.shadows) {
					renderer.shadowMap.enabled = true;
					renderer.shadowMap.type = THREE.PCFSoftShadowMap;
				}

				container.appendChild( renderer.domElement );

				var ground = null;

				if (sceneInfo.addGround) {
					var groundMaterial = new THREE.MeshPhongMaterial({
							color: 0xFFFFFF
						});
					ground = new THREE.Mesh( new THREE.PlaneBufferGeometry(512, 512), groundMaterial);

					if (sceneInfo.shadows) {
						ground.receiveShadow = true;
					}

					if (sceneInfo.groundPos) {
						ground.position.copy(sceneInfo.groundPos);
					} else {
						ground.position.z = -70;
					}

					ground.rotation.x = -Math.PI / 2;

					scene.add(ground);
				}

				loader = new THREE.GLTF2Loader();

				for (var i = 0; i < extensionSelect.children.length; i++) {
					var child = extensionSelect.children[i];
					child.disabled = sceneInfo.extensions.indexOf(child.value) === -1;
					if (child.disabled && child.selected) {
						extensionSelect.value = extension = 'glTF';
					}
				}

				var url = sceneInfo.url;
				var r = eval("/" + '\%s' + "/g");
				url = url.replace(r, extension);

				if (extension === 'glTF-Binary') {
					url = url.replace('.gltf', '.glb');
				}

				var loadStartTime = performance.now();
				var status = document.getElementById("status");
				status.innerHTML = "Loading...";

				loader.load( url, function(data) {

					gltf = data;

					var object = gltf.scene;

					status.innerHTML = "Load time: " + ( performance.now() - loadStartTime ).toFixed( 2 ) + " ms.";

					if (sceneInfo.cameraPos)
						defaultCamera.position.copy(sceneInfo.cameraPos);

					if (sceneInfo.center) {
						orbitControls.target.copy(sceneInfo.center);
					}

					if (sceneInfo.objectPosition) {
						object.position.copy(sceneInfo.objectPosition);

						if (spot1) {
							spot1.position.set(sceneInfo.objectPosition.x - 100, sceneInfo.objectPosition.y + 200, sceneInfo.objectPosition.z - 100 );
							spot1.target.position.copy(sceneInfo.objectPosition);
						}
					}

					if (sceneInfo.objectRotation)
						object.rotation.copy(sceneInfo.objectRotation);

					if (sceneInfo.objectScale)
						object.scale.copy(sceneInfo.objectScale);

					if ( sceneInfo.addEnvMap ) {

						var envMap = getEnvMap();

						object.traverse( function( node ) {

							if ( node.material && ( node.material.isMeshStandardMaterial ||
								 ( node.material.isShaderMaterial && node.material.envMap !== undefined ) ) ) {

								node.material.envMap = envMap;
								node.material.needsUpdate = true;

							}

						} );

						scene.background = envMap;

					}

					cameraIndex = 0;
					cameras = [];
					cameraNames = [];

					if (gltf.cameras && gltf.cameras.length) {

						var i, len = gltf.cameras.length;

						for (i = 0; i < len; i++) {

							var addCamera = true;
							var cameraName = gltf.cameras[i].parent.name || ('camera_' + i);

							if (sceneInfo.cameras && !(cameraName in sceneInfo.cameras)) {
									addCamera = false;
							}

							if (addCamera) {
								cameraNames.push(cameraName);
								cameras.push(gltf.cameras[i]);
							}

						}

						updateCamerasList();
						switchCamera(1);

					} else {

						updateCamerasList();
						switchCamera(0);

					}

					var animations = gltf.animations;

					if ( animations && animations.length ) {

						mixer = new THREE.AnimationMixer( object );

						for ( var i = 0; i < animations.length; i ++ ) {

							var animation = animations[ i ];

							// There's .3333 seconds junk at the tail of the Monster animation that
							// keeps it from looping cleanly. Clip it at 3 seconds
							if ( sceneInfo.animationTime )
								animation.duration = sceneInfo.animationTime;

							mixer.clipAction( animation ).play();

						}

					}

					scene.add( object );
					onWindowResize();

				});

			orbitControls = new THREE.OrbitControls(defaultCamera, renderer.domElement);

			}

			function onWindowResize() {

				defaultCamera.aspect = container.offsetWidth / container.offsetHeight;
				defaultCamera.updateProjectionMatrix();

				var i, len = cameras.length;

				for (i = 0; i < len; i++) { // just do it for default
					cameras[i].aspect = container.offsetWidth / container.offsetHeight;
					cameras[i].updateProjectionMatrix();
				}

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

			}

			function animate() {
				requestAnimationFrame( animate );
				if (mixer) mixer.update(clock.getDelta());
				if (cameraIndex == 0)
					orbitControls.update();
				render();
			}

			function render() {
				renderer.render( scene, camera );
			}

			function onKeyDown(event) {

				var chr = String.fromCharCode(event.keyCode);

				if (chr == ' ') {

					index = cameraIndex + 1;
					if (index > cameras.length)
					index = 0;
					switchCamera(index);

				} else {

					var index = parseInt(chr);
					if (!isNaN(index)	&& (index <= cameras.length)) {
						switchCamera(index);
					}

				}

			}

			var envMap;

			function getEnvMap() {

				if ( envMap ) {

					return envMap;

				}

				var path = 'textures/cube/Park2/';
				var format = '.jpg';
				var urls = [
					path + 'posx' + format, path + 'negx' + format,
					path + 'posy' + format, path + 'negy' + format,
					path + 'posz' + format, path + 'negz' + format
				];

				envMap = new THREE.CubeTextureLoader().load( urls );
				envMap.format = THREE.RGBFormat;
				return envMap;

			}

			var sceneList = [
				{
					name : 'BoomBox (PBR)', url : './models/gltf/BoomBox/%s/BoomBox.gltf',
					cameraPos: new THREE.Vector3(0.02, 0.01, 0.03),
					objectRotation: new THREE.Euler(0, Math.PI, 0),
					addLights:true,
					extensions: ['glTF', 'glTF-pbrSpecularGlossiness', 'glTF-Binary'],
					addEnvMap: true
				},
				{
					name : 'MetalRoughSpheres (PBR)', url : './models/gltf/MetalRoughSpheres/%s/MetalRoughSpheres.gltf',
					cameraPos: new THREE.Vector3(2, 1, 15),
					objectRotation: new THREE.Euler(0, 0, 0),
					addLights:true,
					extensions: ['glTF', 'glTF-Embedded'],
					addEnvMap: true
				},
				{
					name : 'Duck', url : './models/gltf/Duck/%s/Duck.gltf',
					cameraPos: new THREE.Vector3(0, 3, 5),
					addLights:true,
					addGround:true,
					shadows:true,
					// TODO: 'glTF-techniqueWebGL'
					extensions: ['glTF', 'glTF-Embedded', 'glTF-MaterialsCommon', 'glTF-pbrSpecularGlossiness', 'glTF-Binary']
				},
				{
					name : "Monster", url : "./models/gltf/Monster/%s/Monster.gltf",
					cameraPos: new THREE.Vector3(30, 10, 70),
					objectScale: new THREE.Vector3(0.4, 0.4, 0.4),
					objectPosition: new THREE.Vector3(2, 1, 0),
					objectRotation: new THREE.Euler(0, - 3 * Math.PI / 4, 0),
					animationTime: 3,
					addLights:true,
					shadows:true,
					addGround:true,
					// TODO: 'glTF-MaterialsCommon', 'glTF-techniqueWebGL'
					extensions: ['glTF', 'glTF-Embedded', 'glTF-pbrSpecularGlossiness', 'glTF-Binary']
				},
				{
					name : "Cesium Man", url : "./models/gltf/CesiumMan/%s/CesiumMan.gltf",
					 cameraPos: new THREE.Vector3(0, 3, 10),
					 objectRotation: new THREE.Euler(0, 0, 0),
					 addLights:true,
					 addGround:true,
					 shadows:true,
					// TODO: 'glTF-MaterialsCommon', 'glTF-techniqueWebGL'
					extensions: ['glTF', 'glTF-Embedded', 'glTF-pbrSpecularGlossiness', 'glTF-Binary']
				},
				{
					name : "Cesium Milk Truck",
					url : "./models/gltf/CesiumMilkTruck/%s/CesiumMilkTruck.gltf",
					cameraPos: new THREE.Vector3(0, 3, 10),
					addLights:true,
					addGround:true,
					shadows:true,
					// TODO: 'glTF-MaterialsCommon', 'glTF-techniqueWebGL'
					extensions: ['glTF', 'glTF-Embedded', 'glTF-pbrSpecularGlossiness', 'glTF-Binary']
				},
				{
					name : "Rigged Simple",
					url : "./models/gltf/RiggedSimple/%s/RiggedSimple.gltf",
					cameraPos: new THREE.Vector3(0, 5, 15),
					objectRotation: new THREE.Euler(0, 90, 0),
					addLights:true,
					shadows:true,
					// TODO: 'glTF-MaterialsCommon', 'glTF-techniqueWebGL'
					extensions: ['glTF', 'glTF-Embedded', 'glTF-pbrSpecularGlossiness', 'glTF-Binary']
				},
				{
					name : 'Outlined Box',
					url : './models/gltf/OutlinedBox/OutlinedBox.gltf',
					cameraPos: new THREE.Vector3(0, 5, 15),
					objectScale: new THREE.Vector3(0.01, 0.01, 0.01),
					objectRotation: new THREE.Euler(0, 90, 0),
					addLights:true,
					shadows:true,
					extensions: ['glTF']
				},
			];

			function buildSceneList() {

				var elt = document.getElementById('scenes_list');

				while( elt.hasChildNodes() ){
					elt.removeChild(elt.lastChild);
				}

				var i, len = sceneList.length;

				for (i = 0; i < len; i++) {
					var option = document.createElement("option");
					option.text=sceneList[i].name;
					elt.add(option);
				}

			}

			function switchScene(index) {

				cleanup();
				initScene(index);
				var elt = document.getElementById('scenes_list');
				elt.selectedIndex = index;

			}

			function selectScene() {

				var select = document.getElementById("scenes_list");
				var index = select.selectedIndex;

				if (index >= 0) {
					switchScene(index);
				}

			}

			function switchCamera(index) {

				cameraIndex = index;

				if (cameraIndex == 0) {
					camera = defaultCamera;
				}

				if (cameraIndex >= 1 && cameraIndex <= cameras.length) {
					camera = cameras[cameraIndex - 1];
				}

				var elt = document.getElementById('cameras_list');
				elt.selectedIndex = cameraIndex;

			}

			function updateCamerasList() {

				var elt = document.getElementById('cameras_list');

				while( elt.hasChildNodes() ){
					elt.removeChild(elt.lastChild);
				}

				var option = document.createElement("option");
				option.text="[default]";
				elt.add(option);

				var i, len = cameraNames.length;

				for (i = 0; i < len; i++) {
					var option = document.createElement("option");
					option.text=cameraNames[i];
					elt.add(option);
				}

			}

			function selectCamera() {

				var select = document.getElementById("cameras_list");
				var index = select.selectedIndex;

				if (index >= 0) {
					switchCamera(index);
				}

			}

			function toggleAnimations() {

				var i, len = gltf.animations.length;

				for (i = 0; i < len; i++) {

					var clip = gltf.animations[i];
					var action = mixer.existingAction( clip );

					if (action.isRunning()) {
						action.stop();
					} else {
						action.play();
					}

				}

			}

			var extensionSelect = document.getElementById("extensions_list");
			var extension = extensionSelect.value;
			function selectExtension()
			{
				extension = extensionSelect.value;
				selectScene();
			}

			function cleanup() {

				if (container && renderer) {
					container.removeChild(renderer.domElement);
				}

				cameraIndex = 0;
				cameras = [];
				cameraNames = [];
				defaultCamera = null;

				if (!loader || !mixer)
					return;

				mixer.stopAllAction();

			}

			onload();
		</script>

	</body>
</html>