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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - LDrawLoader</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;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				color: #888;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				display:block;
			}
			#info a {
				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> - LDrawLoader
		</div>

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

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

		<script src='js/libs/dat.gui.min.js'></script>

		<script>

			var container, progressBarDiv;

			var camera, scene, renderer, controls, gui, guiData;

			var modelFileList, model, textureCube;

			var envMapActivated = false;

			var ldrawPath = 'models/ldraw/officialLibrary/';

			var modelFileList = {
				'Car': 'models/car.ldr_Packed.mpd',
				'Lunar Vehicle': 'models/1621-1-LunarMPVVehicle.mpd_Packed.mpd',
				'Radar Truck': 'models/889-1-RadarTruck.mpd_Packed.mpd',
				'Trailer': 'models/4838-1-MiniVehicles.mpd_Packed.mpd',
				'Bulldozer': 'models/4915-1-MiniConstruction.mpd_Packed.mpd',
				'Helicopter': 'models/4918-1-MiniFlyers.mpd_Packed.mpd',
				'Plane': 'models/5935-1-IslandHopper.mpd_Packed.mpd',
				'Lighthouse': 'models/30023-1-Lighthouse.ldr_Packed.mpd',
				'X-Wing mini': 'models/30051-1-X-wingFighter-Mini.mpd_Packed.mpd',
				'AT-ST mini': 'models/30054-1-AT-ST-Mini.mpd_Packed.mpd',
				'AT-AT mini': 'models/4489-1-AT-AT-Mini.mpd_Packed.mpd',
				'Shuttle': 'models/4494-1-Imperial Shuttle-Mini.mpd_Packed.mpd',
				'TIE Interceptor': 'models/6965-1-TIEIntercep_4h4MXk5.mpd_Packed.mpd',
				'Star fighter': 'models/6966-1-JediStarfighter-Mini.mpd_Packed.mpd',
				'X-Wing': 'models/7140-1-X-wingFighter.mpd_Packed.mpd',
				'AT-ST': 'models/10174-1-ImperialAT-ST-UCS.mpd_Packed.mpd'
			};

			init();
			animate();


			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.set( 150, 200, 250 );

				// scene

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

				var ambientLight = new THREE.AmbientLight( 0xdeebed, 0.4 );
				scene.add( ambientLight );

				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
				directionalLight.position.set( - 1000, 1200, 1500 );
				scene.add( directionalLight );

				//

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				controls = new THREE.OrbitControls( camera, renderer.domElement );

				//

				guiData = {
					modelFileName: modelFileList[ 'Car' ],
					envMapActivated: false
				};

				gui = new dat.GUI();

				gui.add( guiData, 'modelFileName', modelFileList ).name( 'Model' ).onFinishChange( function () {

					reloadObject( true );

				} );

				gui.add( guiData, 'envMapActivated' ).name( 'Env. map' ).onChange( function ( value ) {

					envMapActivated = value;

					reloadObject( false );

				} );

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

				progressBarDiv = document.createElement( 'div' );
				progressBarDiv.innerText = "Loading...";
				progressBarDiv.style.fontSize = "3em";
				progressBarDiv.style.color = "#888";
				progressBarDiv.style.display = "block";
				progressBarDiv.style.position = "absolute";
				progressBarDiv.style.top = "50%";
				progressBarDiv.style.width = "100%";
				progressBarDiv.style.textAlign = "center";


				// load materials and then the model

				reloadObject( true );

			}

			function reloadObject( resetCamera ) {

				if ( model ) {

					scene.remove( model );

				}

				model = null;

				updateProgressBar( 0 );
				showProgressBar();

				var lDrawLoader = new THREE.LDrawLoader();
				lDrawLoader
					.setPath( ldrawPath )
					.load( guiData.modelFileName, function ( group2 ) {

						if ( model ) {

							scene.remove( model );

						}

						model = group2;

						// Convert from LDraw coordinates: rotate 180 degrees around OX
						model.rotation.x = Math.PI;

						scene.add( model );

						// Adjust materials

						var materials = lDrawLoader.materials;

						if ( envMapActivated ) {

							if ( ! textureCube ) {

								// Envmap texture
								var r = "textures/cube/Bridge2/";
								var urls = [ r + "posx.jpg", r + "negx.jpg",
									r + "posy.jpg", r + "negy.jpg",
									r + "posz.jpg", r + "negz.jpg" ];
								textureCube = new THREE.CubeTextureLoader().load( urls );
								textureCube.format = THREE.RGBFormat;
								textureCube.mapping = THREE.CubeReflectionMapping;

							}

							for ( var i = 0, n = materials.length; i < n; i ++ ) {

								var material = materials[ i ];

								if ( material.userData.canHaveEnvMap ) {

									material.envMap = textureCube;

								}

							}

						}

						// Adjust camera and light

						var bbox = new THREE.Box3().setFromObject( model );
						var size = bbox.getSize( new THREE.Vector3() );
						var radius = Math.max( size.x, Math.max( size.y, size.z ) ) * 0.5;

						if ( resetCamera ) {

							controls.target0.copy( bbox.getCenter( new THREE.Vector3() ) );
							controls.position0.set( - 2.3, 2, 2 ).multiplyScalar( radius ).add( controls.target0 );
							controls.reset();

						}

						hideProgressBar();

					}, onProgress, onError );

			}

			function onWindowResize() {

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

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

			}

			//

			function animate() {

				requestAnimationFrame( animate );
				render();

			}

			function render() {

				renderer.render( scene, camera );

			}

			function onProgress( xhr ) {

				if ( xhr.lengthComputable ) {

					updateProgressBar( xhr.loaded / xhr.total );

					console.log( Math.round( xhr.loaded / xhr.total * 100, 2 ) + '% downloaded' );

				}

			}

			function onError() {

				var message = "Error loading model";
				progressBarDiv.innerText = message;
				console.log( message );

			}

			function showProgressBar() {

				document.body.appendChild( progressBarDiv );

			}

			function hideProgressBar() {

				document.body.removeChild( progressBarDiv );

			}

			function updateProgressBar( fraction ) {

				progressBarDiv.innerText = 'Loading... ' + Math.round( fraction * 100, 2 ) + '%';

			}

		</script>

		<!-- LDraw.org CC BY 2.0 Parts Library attribution -->
		<div style="display: block; position: absolute; bottom: 8px; left: 8px; width: 160px; padding: 10px; background-color: #F3F7F8;">
			<center>
				<a href="http://www.ldraw.org"><img style="width: 145px" src="files/ldraw_org_logo/Stamp145.png"></a>
				<br />
				<a href="http://www.ldraw.org/">This software uses the LDraw Parts Library</a>
			</center>
		</div>

	</body>
</html>