Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

FBXLoader example: Replaced xsi man with mixamo animation.

Mr.doob 7 years ago
parent
3939371825
commit
5ea3a703f7
7 changed files with 188 additions and 1229 deletions
Unified View Show Diff Stats
  1. 1 0
      examples/files.js
  2. BIN
      examples/models/fbx/Char_UV_Texture.gif
  3. BIN
      examples/models/fbx/Mixamo - Samba Dancing.fbx
  4. 0 617
      examples/models/fbx/xsi_man.fbx
  5. 0 544
      examples/models/fbx/xsi_man_skinning.fbx
  6. 59 68
      examples/webgl_loader_fbx.html
  7. 128 0
      examples/webgl_loader_fbx_nurbs.html

+ 1 - 0
examples/files.js
View File 

@@ -88,6 +88,7 @@ var files = {
 
 		"webgl_loader_ctm_materials",
 
 		"webgl_loader_ctm_materials",
 
 		"webgl_loader_draco",
 
 		"webgl_loader_draco",
 
 		"webgl_loader_fbx",
 
 		"webgl_loader_fbx",
 
+		"webgl_loader_fbx_nurbs",
 
 		"webgl_loader_gcode",
 
 		"webgl_loader_gcode",
 
 		"webgl_loader_gltf",
 
 		"webgl_loader_gltf",
 
 		"webgl_loader_imagebitmap",
 
 		"webgl_loader_imagebitmap",

BIN
examples/models/fbx/Char_UV_Texture.gif
View File


BIN
examples/models/fbx/Mixamo - Samba Dancing.fbx
View File


File diff suppressed because it is too large
+ 0 - 617
examples/models/fbx/xsi_man.fbx


File diff suppressed because it is too large
+ 0 - 544
examples/models/fbx/xsi_man_skinning.fbx


+ 59 - 68
examples/webgl_loader_fbx.html
View File 

@@ -21,23 +21,26 @@
 
 				z-index: 100;
 
 				z-index: 100;
 
 				display:block;
 
 				display:block;
 
 			}
 
 			}
 
-			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
 
+			#info a {
 
+				color: #046;
 
+				font-weight: bold;
 
+			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
-		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader test
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
 
+			Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/curves/NURBSCurve.js"></script>
 
-		<script src="js/curves/NURBSUtils.js"></script>
 
+		<script src="js/libs/inflate.min.js"></script>
 
 		<script src="js/loaders/FBXLoader.js"></script>
 
 		<script src="js/loaders/FBXLoader.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>
 
 
 
@@ -53,6 +56,7 @@
 
 			var mixers = [];
 
 			var mixers = [];
 
 
 
 			init();
 
 			init();
 
+			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
@@ -60,45 +64,45 @@
 
 				document.body.appendChild( container );
 
 				document.body.appendChild( 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( 100, 200, 300 );
 
 
 
-				scene = new THREE.Scene();
 
-
 
-				// grid
 
-				var gridHelper = new THREE.GridHelper( 28, 28, 0x303030, 0x303030 );
 
-				gridHelper.position.set( 0, - 0.04, 0 );
 
-				scene.add( gridHelper );
 
+				controls = new THREE.OrbitControls( camera );
 
+				controls.target.set( 0, 100, 0 );
 
+				controls.update();
 
 
 
-				// stats
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				scene = new THREE.Scene();
 
+				scene.background = new THREE.Color( 0xa0a0a0 );
 
+				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
 
+
 
+				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
+				light.position.set( 0, 200, 0 );
 
+				scene.add( light );
 
+
 
+				light = new THREE.DirectionalLight( 0xffffff );
 
+				light.position.set( 0, 200, 100 );
 
+				light.castShadow = true;
 
+				light.shadow.camera.top = 180;
 
+				light.shadow.camera.bottom = -100;
 
+				light.shadow.camera.left = -120;
 
+				light.shadow.camera.right = 120;
 
+				scene.add( light );
 
+
 
+				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
+
 
+				// ground
 
+				var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 
+				mesh.rotation.x = - Math.PI / 2;
 
+				mesh.receiveShadow = true;
 
+				scene.add( mesh );
 
+
 
+				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 
+				grid.material.opacity = 0.2;
 
+				grid.material.transparent = true;
 
+				scene.add( grid );
 
 
 
 				// model
 
 				// model
 
-				var manager = new THREE.LoadingManager();
 
-				manager.onProgress = function( item, loaded, total ) {
 
-
 
-					console.log( item, loaded, total );
 
-
 
-				};
 
-
 
-				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 ) {
 
-
 
-					console.error( xhr );
 
-
 
-				};
 
-
 
-				var loader = new THREE.FBXLoader( manager );
 
-				loader.load( 'models/fbx/xsi_man_skinning.fbx', function( object ) {
 
+				var loader = new THREE.FBXLoader();
 
+				loader.load( 'models/fbx/Mixamo - Samba Dancing.fbx', function ( object ) {
 
 
 
 					object.mixer = new THREE.AnimationMixer( object );
 
 					object.mixer = new THREE.AnimationMixer( object );
 
 					mixers.push( object.mixer );
 
 					mixers.push( object.mixer );
 
@@ -106,39 +110,32 @@
 
 					var action = object.mixer.clipAction( object.animations[ 0 ] );
 
 					var action = object.mixer.clipAction( object.animations[ 0 ] );
 
 					action.play();
 
 					action.play();
 
 
 
-					scene.add( object );
 
+					object.traverse( function ( child ) {
 
+
 
+						if ( child.isMesh ) {
 
 
 
+							child.castShadow = true;
 
+							child.receiveShadow = true;
 
 
 
-				}, onProgress, onError );
 
+						}
 
 
 
-				loader.load( 'models/fbx/nurbs.fbx', function( object ) {
 
+					} );
 
 
 
 					scene.add( object );
 
 					scene.add( object );
 
 
 
-				}, onProgress, onError );
 
+				} );
 
 
 
 				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 );
 
+				renderer.shadowMap.enabled = true;
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
-				// controls, camera
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
-				controls.target.set( 0, 12, 0 );
 
-				camera.position.set( 2, 18, 28 );
 
-				controls.update();
 
-
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
 
-				light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
 
-				light.position.set(0, 1, 0);
 
-				scene.add(light);
 
-
 
-				light = new THREE.DirectionalLight(0xffffff, 1.0);
 
-				light.position.set(0, 1, 0);
 
-				scene.add(light);
 
-
 
-				animate();
 
+				// stats
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
 
 
 			}
 
 			}
 
 
 
@@ -167,16 +164,10 @@
 
 
 
 				}
 
 				}
 
 
 
-				stats.update();
 
-
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
 				renderer.render( scene, camera );
 
 				renderer.render( scene, camera );
 
 
 
+				stats.update();
 
+
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</script>

+ 128 - 0
examples/webgl_loader_fbx_nurbs.html
View File 

@@ -0,0 +1,128 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - FBX loader - Nurbs</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;
 
+				color: #fff;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+			#info {
 
+				color: #fff;
 
+				position: absolute;
 
+				top: 10px;
 
+				width: 100%;
 
+				text-align: center;
 
+				z-index: 100;
 
+				display:block;
 
+			}
 
+			#info a {
 
+				color: #f00;
 
+				font-weight: bold;
 
+			}
 
+		</style>
 
+	</head>
 
+
 
+	<body>
 
+		<div id="info">
 
+		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader - Nurbs
 
+		</div>
 
+
 
+		<script src="../build/three.js"></script>
 
+
 
+		<script src="js/controls/OrbitControls.js"></script>
 
+
 
+		<script src="js/curves/NURBSCurve.js"></script>
 
+		<script src="js/curves/NURBSUtils.js"></script>
 
+		<script src="js/loaders/FBXLoader.js"></script>
 
+
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+			var container, stats, controls;
 
+			var camera, scene, renderer, light;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera.position.set( 2, 18, 28 );
 
+
 
+				controls = new THREE.OrbitControls( camera );
 
+				controls.target.set( 0, 12, 0 );
 
+				controls.update();
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
+				light.position.set( 0, 1, 0 );
 
+				scene.add( light );
 
+
 
+				light = new THREE.DirectionalLight( 0xffffff );
 
+				light.position.set( 0, 1, 0 );
 
+				scene.add( light );
 
+
 
+				// grid
 
+				var gridHelper = new THREE.GridHelper( 28, 28, 0x303030, 0x303030 );
 
+				scene.add( gridHelper );
 
+
 
+				// stats
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
+
 
+				// model
 
+				var loader = new THREE.FBXLoader();
 
+				loader.load( 'models/fbx/nurbs.fbx', function( object ) {
 
+
 
+					scene.add( object );
 
+
 
+				} );
 
+
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				container.appendChild( renderer.domElement );
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				renderer.render( scene, camera );
 
+
 
+				stats.update();
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

Some files were not shown because too many files changed in this diff