Procházet zdrojové kódy

Improved AssimpLoader example.

Mr.doob před 8 roky
rodič
revize
c3e7633fb6
1 změnil soubory, kde provedl 50 přidání a 54 odebrání
  1. 50 54
      examples/webgl_loader_assimp.html

+ 50 - 54
examples/webgl_loader_assimp.html

@@ -5,37 +5,37 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-		body {
-				color: #000;
-				font-family: Monospace;
-				font-size: 13px;
+			body {
+					color: #000;
+					font-family: Monospace;
+					font-size: 13px;
+					text-align: center;
+					background-color: #000;
+					margin: 0px;
+					overflow: hidden;
+			}
+
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
 				text-align: center;
-				background-color: #000;
-				margin: 0px;
-				overflow: hidden;
-		}
+				z-index: 100;
+				display:block;
+
+			}
 
-	#info {
-		color: #fff;
-		position: absolute;
-		top: 10px;
-		width: 100%;
-		text-align: center;
-		z-index: 100;
-		display:block;
-
-	}
-
-	a { color: skyblue }
-	.button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
-	.highlight { background:orange; color:#fff; }
-
-	span {
-		display: inline-block;
-		width: 60px;
-		float: left;
-		text-align: center;
-	}
+			a { color: skyblue }
+			.button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
+			.highlight { background:orange; color:#fff; }
+
+			span {
+				display: inline-block;
+				width: 60px;
+				float: left;
+				text-align: center;
+			}
 		</style>
 </head>
 
@@ -46,7 +46,7 @@
 			<a href="https://github.com/Virtulous" target="_blank">Assimp File format</a>
 			<div>Assimp loader by <a href="https://virtulo.us" target="_blank">Virtulous</a></div>
 			<div>Octaminator model from <a href="http://opengameart.org/content/octaminator-engine-ready" target="_blank">Teh_Bucket and raymoohawk</a></div>
-	</div>
+		</div>
 		<script src="../build/three.js"></script>
 		<script src="js/loaders/AssimpLoader.js"></script>
 		<script src="js/Detector.js"></script>
@@ -55,11 +55,13 @@
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<script>
-		if ( !Detector.webgl ) Detector.addGetWebGLMessage();
+
+		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 		var container, stats;
 		var camera, scene, renderer;
-		var clock = new THREE.Clock();
 		var animation;
+
 		init();
 
 		function init() {
@@ -71,36 +73,35 @@
 			camera.lookAt( new THREE.Vector3( -100, 0, 0 ) );
 
 			scene = new THREE.Scene();
-			var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
+
+			var ambient = new THREE.HemisphereLight( 0x8888fff, 0xff8888, 0.5 );
+			ambient.position.set( 0, 1, 0 );
+			scene.add( ambient );
+
+			var light = new THREE.DirectionalLight( 0xffffff, 1 );
 			light.position.set( 0, 4, 4 ).normalize();
 			scene.add( light );
-			var ambient = new THREE.AmbientLight( 0x333333, 1.5 );
-			scene.add( ambient );
-			renderer = new THREE.WebGLRenderer( {
-				antialias: true
-			} );
 
-			renderer.setClearColor( 0xfff4e5 );
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.sortObjects = false;
 			container.appendChild( renderer.domElement );
-			renderer.setClearColor( new THREE.Color( 0, 0, 0 ), 1 );
 
 			var controls = new THREE.OrbitControls( camera, renderer.domElement );
-		controls.target.set(-100,0,0);
-
-		controls.update();
 
 			stats = new Stats();
 			container.appendChild( stats.dom );
+
 			var loader = new THREE.AssimpLoader();
+			loader.load( "./models/assimp/octaminator/Octaminator.assimp", function ( err, result ) {
 
-			loader.load( "./models/assimp/octaminator/Octaminator.assimp", function( err, object ) {
+				var object = result.object;
 
-				object.object.rotation.x = Math.PI / 2;
-				scene.add( object.object );
-				animation = object.animation;
+				object.position.y = - 100;
+				object.rotation.x = Math.PI / 2;
+				scene.add( object );
+
+				animation = result.animation;
 
 			} );
 
@@ -117,17 +118,12 @@
 
 		}
 
-		var now = performance.now();
-
 		function animate() {
 
-			var delta = performance.now() - now;
-			now += delta;
 			requestAnimationFrame( animate, renderer.domElement );
 			renderer.render( scene, camera );
 
-			if ( animation )
-				animation.setTime( now / 1000 );
+			if ( animation ) animation.setTime( performance.now() / 1000 );
 
 			stats.update();