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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - Open Asset Import Library (assimp) / assimp2json</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: #000000;
				margin: 0px;
				overflow: hidden;
			}

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

			}

			a { color: red }
		</style>
	</head>

	<body>
		<div id="info">
			<a href="http://threejs.org" target="_blank">three.js</a> -
			Jeep by Psionic, interior from
			<a href="http://assimp.sf.net" target="_blank">Assimp</a>
		</div>

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

		<script src="js/loaders/AssimpJSONLoader.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			if ( ! Detector.webgl ) {
				Detector.addGetWebGLMessage();
			}

			/*

			Simple demo for loading json files generated by assimp2json
			https://github.com/acgessler/assimp2json

			assimp2json uses assimp (http://assimp.sf.net) to import 40+ 3D file
			formats, including 3ds, obj, dae, blend, fbx, x, ms3d, lwo (and many
			more).

			TODOs:
			  - assimp supports skeletal animations and assimp2son exports
			    them. This demo currently doesn't read them.
			  - not all material properties supported by assimp are currently
			    mapped to THREE.js

			The sample files for this demo originate in assimp's repository,
			and were converted using assimp2json 2.0. The interior file was
			slightly edited to adjust for lower-case texture names.

			*/

			var container, stats;
			var camera, scene, renderer, objects;
			var clock = new THREE.Clock();

			// init scene
			init();

			var onProgress = function ( xhr ) {
				if ( xhr.lengthComputable ) {
					var percentComplete = xhr.loaded / xhr.total * 100;
					console.log( Math.round(percentComplete, 2) + '% downloaded' );
				}
			};

			var onError = function ( xhr ) {
			};

			// Load jeep model using the AssimpJSONLoader
			var loader1 = new THREE.AssimpJSONLoader();
			loader1.load( 'models/assimp/jeep/jeep.assimp.json', function ( object ) {

				object.scale.multiplyScalar( 0.2 );
				scene.add( object );

			}, onProgress, onError );

			// load interior model
			var loader2 = new THREE.AssimpJSONLoader();
			loader2.load( 'models/assimp/interior/interior.assimp.json', function ( object ) {

				scene.add( object );

			}, onProgress, onError );

			animate();


			//

			function init() {

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

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.set( 2, 4, 5 );

				scene = new THREE.Scene();
				scene.fog = new THREE.FogExp2( 0x000000, 0.035 );

				// Lights
				scene.add( new THREE.AmbientLight( 0xcccccc ) );

				var directionalLight = new THREE.DirectionalLight( 0xeeeeee );
				directionalLight.position.x = Math.random() - 0.5;
				directionalLight.position.y = Math.random();
				directionalLight.position.z = Math.random() - 0.5;
				directionalLight.position.normalize();
				scene.add( directionalLight );

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

				// Stats
				stats = new Stats();
				container.appendChild( stats.dom );

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

			}

			//

			function onWindowResize( event ) {

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

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

			}

			//

			var t = 0;
			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();
			}

			//

			function render() {

				var timer = Date.now() * 0.0005;

				camera.position.x = Math.cos( timer ) * 10;
				camera.position.y = 4;
				camera.position.z = Math.sin( timer ) * 10;

				camera.lookAt( scene.position );

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>