Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Examples: Some Refactoring

Mugen87 8 жил өмнө
parent
b93d4c5d13
commit
62701a3ef2
2 өөрчлөгдсөн 125 нэмэгдсэн , 142 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  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">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family: Monospace;
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+				background:#777;
 
+				padding:0;
 
+				margin:0;
 
+				font-weight: bold;
 
+				overflow:hidden;
 
 			}
 
 			}
 
 
 
 			#info {
 
 			#info {
 
-				color: #fff;
 
 				position: absolute;
 
 				position: absolute;
 
-				top: 10px;
 
+				top: 0px;
 
 				width: 100%;
 
 				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>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
+
 
+		<div id="container"></div>
 
 		<div id="info">
 
 		<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>
 
 			monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<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/loaders/ColladaLoader.js"></script>
 
-
 
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 
@@ -47,92 +49,62 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 
 			var container, stats;
 
 			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() {
 
 			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 = 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();
 
 				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 );
 
 				scene.add( directionalLight );
 
 
 
-				var pointLight = new THREE.PointLight( 0xffffff, 4 );
 
-				particleLight.add( pointLight );
 
+				//
 
 
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
+				//
 
+
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+
 
+				//
 
+
 
 				stats = new Stats();
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 				container.appendChild( stats.dom );
 
 
 
@@ -151,8 +123,6 @@
 
 
 
 			}
 
 			}
 
 
 
-			//
 
-
 
 			function animate() {
 
 			function animate() {
 
 
 
 				requestAnimationFrame( animate );
 
 				requestAnimationFrame( animate );
 
@@ -162,24 +132,8 @@
 
 
 
 			}
 
 			}
 
 
 
-			var clock = new THREE.Clock();
 
-
 
 			function render() {
 
 			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 );
 
 				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">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
 			body {
 
 			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 {
 
 			#info {
 
 				position: absolute;
 
 				position: absolute;
 
-				top: 0px; width: 100%;
 
+				top: 0px;
 
+				width: 100%;
 
+				color: #ffffff;
 
 				padding: 5px;
 
 				padding: 5px;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
 			}
 
 			}
 
 
 
 			a {
 
 			a {
 
-
 
-				color: #f00;
 
+				color: #ffffff;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
-
 
 		<div id="info">
 
 		<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>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<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/loaders/ColladaLoader.js"></script>
 
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 
@@ -49,60 +46,82 @@
 
 
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			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();
 
 			init();
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
 				container = document.getElementById( 'container' );
 
 				container = document.getElementById( 'container' );
 
 
 
 				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				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();
 
 				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();
 
 				var loader = new THREE.ColladaLoader();
 
+				loader.options.convertUpAxis = true;
 
 				loader.load( "./models/collada/avatar.dae", function ( collada ) {
 
 				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() {
 
 			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>
 
 	</body>
 
 </html>
 
 </html>
 
-