Browse Source

Examples: Some Refactoring

Mugen87 8 years ago
parent
commit
62701a3ef2
2 changed files with 125 additions and 142 deletions
  1. 47 93
      examples/webgl_loader_collada.html
  2. 78 49
      examples/webgl_loader_collada_skinning.html

+ 47 - 93
examples/webgl_loader_collada.html

@@ -6,39 +6,41 @@
 		<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;
+				background:#777;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
 			}
 
 			#info {
-				color: #fff;
 				position: absolute;
-				top: 10px;
+				top: 0px;
 				width: 100%;
-				text-align: center;
-				z-index: 100;
-				display:block;
-
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
 			}
 
-			a { color: skyblue }
+			a {
+				color: #ffffff;
+			}
 		</style>
 	</head>
 	<body>
+
+		<div id="container"></div>
 		<div id="info">
-			<a href="http://threejs.org" target="_blank">three.js</a> -
+			<a href="https://threejs.org" target="_blank">three.js</a> -
 			monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a>
 		</div>
 
 		<script src="../build/three.js"></script>
-		<script src="js/loaders/collada/Animation.js"></script>
-		<script src="js/loaders/collada/AnimationHandler.js"></script>
-		<script src="js/loaders/collada/KeyFrameAnimation.js"></script>
 
 		<script src="js/loaders/ColladaLoader.js"></script>
-
+		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -47,92 +49,62 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var container, stats;
+			var camera, scene, renderer, controls;
 
-			var camera, scene, renderer, objects;
-			var particleLight;
-			var dae;
-
-			var loader = new THREE.ColladaLoader();
-			loader.options.convertUpAxis = true;
-			loader.load( './models/collada/monster/monster.dae', function ( collada ) {
-
-				dae = collada.scene;
-
-				dae.traverse( function ( child ) {
-
-					if ( child instanceof THREE.SkinnedMesh ) {
-
-						var animation = new THREE.Animation( child, child.geometry.animation );
-						animation.play();
-
-					}
-
-				} );
-
-				dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
-				dae.updateMatrix();
-
-				init();
-				animate();
-
-			} );
+			init();
+			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
+				container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.set( 2, 2, 3 );
+				camera.position.set( 7, 5, 7 );
 
 				scene = new THREE.Scene();
 
-				// Grid
-
-				var size = 14, step = 1;
-
-				var geometry = new THREE.Geometry();
-				var material = new THREE.LineBasicMaterial( { color: 0x303030 } );
+				// collada
 
-				for ( var i = - size; i <= size; i += step ) {
+				var loader = new THREE.ColladaLoader();
+				loader.options.convertUpAxis = true;
+				loader.load( './models/collada/monster/monster.dae', function ( collada ) {
 
-					geometry.vertices.push( new THREE.Vector3( - size, - 0.04, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, - 0.04, i ) );
+					var object = collada.scene;
 
-					geometry.vertices.push( new THREE.Vector3( i, - 0.04, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, - 0.04,   size ) );
+					object.scale.set( 0.0025, 0.0025, 0.0025 );
+					object.position.set( - 2, 0.2, 0 );
 
-				}
+					scene.add( object );
 
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
-
-				// Add the COLLADA
+				} );
 
-				scene.add( dae );
+				//
 
-				particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
-				scene.add( particleLight );
+				var gridHelper = new THREE.GridHelper( 10, 20 );
+				scene.add( gridHelper );
 
-				// Lights
+				//
 
-				scene.add( new THREE.AmbientLight( 0xcccccc ) );
+				var ambientLight = new THREE.AmbientLight( 0xcccccc );
+				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee );
-				directionalLight.position.x = Math.random() - 0.5;
-				directionalLight.position.y = Math.random() - 0.5;
-				directionalLight.position.z = Math.random() - 0.5;
-				directionalLight.position.normalize();
+				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight.position.set( 0, 1, -1 ).normalize();
 				scene.add( directionalLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 4 );
-				particleLight.add( pointLight );
+				//
 
 				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 );
+
+				//
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
@@ -151,8 +123,6 @@
 
 			}
 
-			//
-
 			function animate() {
 
 				requestAnimationFrame( animate );
@@ -162,24 +132,8 @@
 
 			}
 
-			var clock = new THREE.Clock();
-
 			function render() {
 
-				var timer = Date.now() * 0.0005;
-
-				camera.position.x = Math.cos( timer ) * 10;
-				camera.position.y = 2;
-				camera.position.z = Math.sin( timer ) * 10;
-
-				camera.lookAt( scene.position );
-
-				particleLight.position.x = Math.sin( timer * 4 ) * 3009;
-				particleLight.position.y = Math.cos( timer * 5 ) * 4000;
-				particleLight.position.z = Math.cos( timer * 4 ) * 3009;
-
-				THREE.AnimationHandler.update( clock.getDelta() );
-
 				renderer.render( scene, camera );
 
 			}

+ 78 - 49
examples/webgl_loader_collada_skinning.html

@@ -6,42 +6,39 @@
 		<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;
-				text-align:center;
-
-				background-color: #000;
-				margin: 0px;
-				overflow: hidden;
+				background:#777;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
 			}
 
 			#info {
 				position: absolute;
-				top: 0px; width: 100%;
+				top: 0px;
+				width: 100%;
+				color: #ffffff;
 				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
 			}
 
 			a {
-
-				color: #f00;
+				color: #ffffff;
 			}
-
 		</style>
 	</head>
 	<body>
 
 		<div id="container"></div>
-
 		<div id="info">
-		<a href="http://threejs.org" target="_blank">three.js</a> webgl - collada - skinning
+			<a href="https://threejs.org" target="_blank">three.js</a> webgl - collada - skinning
 		</div>
 
 		<script src="../build/three.js"></script>
-		<script src="js/loaders/collada/Animation.js"></script>
-		<script src="js/loaders/collada/AnimationHandler.js"></script>
-		<script src="js/loaders/collada/KeyFrameAnimation.js"></script>
 		<script src="js/loaders/ColladaLoader.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -49,60 +46,82 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
-			var camera, scene, renderer;
-			var clock = new THREE.Clock();
+			var container, stats, clock;
+			var camera, scene, renderer, mixer;
 
 			init();
+			animate();
 
 			function init() {
 
 				container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.set( -5, -5, 5 );
-				camera.up.set( 0, 0, 1 );
+				camera.position.set( - 7, 4, 7 );
 
 				scene = new THREE.Scene();
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light.position.set( 0, -4, -4 ).normalize();
-				scene.add( light );
+				clock = new THREE.Clock();
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xfff4e5 );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.sortObjects = false;
-				container.appendChild( renderer.domElement );
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-				
+				// collada
 
 				var loader = new THREE.ColladaLoader();
+				loader.options.convertUpAxis = true;
 				loader.load( "./models/collada/avatar.dae", function ( collada ) {
-				
-					collada.scene.traverse( function ( child ) {
 
-						if ( child instanceof THREE.SkinnedMesh ) {
+					var object = collada.scene;
+
+					mixer = new THREE.AnimationMixer( object );
 
-							var animation = new THREE.Animation( child, child.geometry.animation );
-							animation.play();
+					object.traverse( function ( child ) {
 
-							camera.lookAt( child.position );
+						if ( child instanceof THREE.SkinnedMesh ) {
+
+							var clip = THREE.AnimationClip.parseAnimation( child.geometry.animation, child.geometry.bones );
+							mixer.clipAction( clip, child ).play();
 
 						}
 
 					} );
 
-					scene.add( collada.scene );
+					scene.add( object );
 
 				} );
 
-				window.addEventListener( 'resize', onWindowResize, false );
+				//
+
+				var gridHelper = new THREE.GridHelper( 5, 20 );
+				scene.add( gridHelper );
+
+				//
+
+				var ambientLight = new THREE.AmbientLight( 0xcccccc );
+				scene.add( ambientLight );
+
+				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight.position.set( -1, 0.5, -1 ).normalize();
+				scene.add( directionalLight );
 
-				animate();
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				container.appendChild( renderer.domElement );
+
+				//
+
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+
+				//
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 
@@ -117,13 +136,24 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate, renderer.domElement );
+				requestAnimationFrame( animate );
 
-				THREE.AnimationHandler.update( clock.getDelta() );
+				render();
+				stats.update();
 
-				renderer.render( scene, camera );
+			}
 
-				stats.update();
+			function render() {
+
+				var delta = clock.getDelta();
+
+				if ( mixer !== undefined ) {
+
+					mixer.update( delta );
+
+				}
+
+				renderer.render( scene, camera );
 
 			}
 
@@ -131,4 +161,3 @@
 
 	</body>
 </html>
-