Home Verkennen Help
Inloggen
javascript
/
three.js
spiegel van https://github.com/tazdij/three.js.git
2
0
Vork 0
Bestanden Issues 0 Wiki
Bladeren bron

Examples: Replace JSONLoader animated examples using THREE.Geometry.

Don McCurdy 7 jaren geleden
bovenliggende
4a41232068
commit
863bd7ef35
23 gewijzigde bestanden met toevoegingen van 67 en 621 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 7 10
      examples/canvas_morphtargets_horse.html
  2. 0 2
      examples/files.js
  3. 1 1
      examples/js/loaders/GLTFLoader.js
  4. 0 15
      examples/models/animated/flamingo.js
  5. 0 19
      examples/models/animated/horse.js
  6. BIN
      examples/models/animated/monster/monster.blend
  7. BIN
      examples/models/animated/monster/monster.jpg
  8. 0 31
      examples/models/animated/monster/monster.js
  9. 0 15
      examples/models/animated/parrot.js
  10. 0 48
      examples/models/animated/sittingBox.js
  11. 0 18
      examples/models/animated/stork.js
  12. BIN
      examples/models/gltf/Flamingo.glb
  13. BIN
      examples/models/gltf/Horse.glb
  14. BIN
      examples/models/gltf/Parrot.glb
  15. BIN
      examples/models/gltf/SittingBox.glb
  16. BIN
      examples/models/gltf/Stork.glb
  17. 5 5
      examples/webgl_lights_hemisphere.html
  18. 0 175
      examples/webgl_loader_json.html
  19. 0 195
      examples/webgl_morphnormals.html
  20. 5 8
      examples/webgl_morphtargets_horse.html
  21. 5 6
      examples/webgl_shading_physical.html
  22. 33 20
      examples/webgl_shadowmap.html
  23. 11 53
      examples/webgl_shadowmap_performance.html

+ 7 - 10
examples/canvas_morphtargets_horse.html
Bestand weergeven 

@@ -20,6 +20,8 @@
 
 		<script src="js/renderers/Projector.js"></script>
 
 		<script src="js/renderers/CanvasRenderer.js"></script>
 
 
+		<script src="js/loaders/GLTFLoader.js"></script>
 
+
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 		<script>
 
@@ -63,22 +65,17 @@
 
 				light.position.set( -1, -1, -1 ).normalize();
 
 				scene.add( light );
 
 
-				var loader = new THREE.JSONLoader();
 
-				loader.load( "models/animated/horse.js", function ( geometry ) {
 
-
 
-					var material = new THREE.MeshLambertMaterial( {
 
-						vertexColors: THREE.FaceColors,
 
-						morphTargets: true,
 
-						overdraw: 0.5
 
-					} );
 
+				var loader = new THREE.GLTFLoader();
 
+				loader.load( "models/gltf/Horse.glb", function ( gltf ) {
 
 
-					mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = gltf.scene.children[ 0 ];
 
+					mesh.material.overdraw = 0.5;
 
 					mesh.scale.set( 1.5, 1.5, 1.5 );
 
 					scene.add( mesh );
 
 
 					mixer = new THREE.AnimationMixer( mesh );
 
 
-					var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
 
+					var clip = gltf.animations[ 0 ];
 
 					mixer.clipAction( clip ).setDuration( 1 ).play();
 
 
 				} );

+ 0 - 2
examples/files.js
Bestand weergeven 

@@ -93,7 +93,6 @@ var files = {
 
 		"webgl_loader_gltf",
 
 		"webgl_loader_gltf_extensions",
 
 		"webgl_loader_imagebitmap",
 
-		"webgl_loader_json",
 
 		"webgl_loader_json_claraio",
 
 		"webgl_loader_json_objconverter",
 
 		"webgl_loader_kmz",
 
@@ -188,7 +187,6 @@ var files = {
 
 		"webgl_modifier_simplifier",
 
 		"webgl_modifier_subdivision",
 
 		"webgl_modifier_tessellation",
 
-		"webgl_morphnormals",
 
 		"webgl_morphtargets",
 
 		"webgl_morphtargets_horse",
 
 		"webgl_morphtargets_human",

+ 1 - 1
examples/js/loaders/GLTFLoader.js
Bestand weergeven 

@@ -1881,7 +1881,7 @@ THREE.GLTFLoader = ( function () {
 
 			var elementBytes = TypedArray.BYTES_PER_ELEMENT;
 
 			var itemBytes = elementBytes * itemSize;
 
 			var byteOffset = accessorDef.byteOffset || 0;
 
-			var byteStride = json.bufferViews[ accessorDef.bufferView ].byteStride;
 
+			var byteStride = accessorDef.bufferView !== undefined ? json.bufferViews[ accessorDef.bufferView ].byteStride : undefined;
 
 			var normalized = accessorDef.normalized === true;
 
 			var array, bufferAttribute;

File diff suppressed because it is too large
+ 0 - 15
examples/models/animated/flamingo.js


File diff suppressed because it is too large
+ 0 - 19
examples/models/animated/horse.js


BIN
examples/models/animated/monster/monster.blend
Bestand weergeven


BIN
examples/models/animated/monster/monster.jpg
Bestand weergeven


File diff suppressed because it is too large
+ 0 - 31
examples/models/animated/monster/monster.js


File diff suppressed because it is too large
+ 0 - 15
examples/models/animated/parrot.js


File diff suppressed because it is too large
+ 0 - 48
examples/models/animated/sittingBox.js


File diff suppressed because it is too large
+ 0 - 18
examples/models/animated/stork.js


BIN
examples/models/gltf/Flamingo.glb
Bestand weergeven


BIN
examples/models/gltf/Horse.glb
Bestand weergeven


BIN
examples/models/gltf/Parrot.glb
Bestand weergeven


BIN
examples/models/gltf/SittingBox.glb
Bestand weergeven


BIN
examples/models/gltf/Stork.glb
Bestand weergeven


+ 5 - 5
examples/webgl_lights_hemisphere.html
Bestand weergeven 

@@ -49,6 +49,7 @@
 
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 
 		<script type="x-shader/x-vertex" id="vertexShader">
 
 
@@ -179,12 +180,11 @@
 
 
 				// MODEL
 
 
-				var loader = new THREE.JSONLoader();
 
+				var loader = new THREE.GLTFLoader();
 
 
-				loader.load( 'models/animated/flamingo.js', function( geometry ) {
 
+				loader.load( 'models/gltf/Flamingo.glb', function( gltf ) {
 
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, vertexColors: THREE.FaceColors, flatShading: true } );
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = gltf.scene.children[ 0 ];
 
 
 					var s = 0.35;
 
 					mesh.scale.set( s, s, s );
 
@@ -197,7 +197,7 @@
 
 					scene.add( mesh );
 
 
 					var mixer = new THREE.AnimationMixer( mesh );
 
-					mixer.clipAction( geometry.animations[ 0 ] ).setDuration( 1 ).play();
 
+					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
 
 					mixers.push( mixer );
 
 
 				} );

+ 0 - 175
examples/webgl_loader_json.html
Bestand weergeven 

@@ -1,175 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - loader -json</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 {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
 
-			monster by <a href="http://www.3drt.com/downloads.htm" target="_blank" rel="noopener">3drt</a>
 
-		</div>
 
-
 
-		<script src="../build/three.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, clock, mixer;
 
-			var camera, scene, renderer, objects;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 
-				camera.position.set( 2, 4, 5 );
 
-
 
-				clock = new THREE.Clock();
 
-
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.FogExp2( 0x000000, 0.035 );
 
-
 
-				mixer = new THREE.AnimationMixer( scene );
 
-
 
-				var loader = new THREE.JSONLoader();
 
-				loader.load( 'models/animated/monster/monster.js', function ( geometry, materials ) {
 
-
 
-					// adjust color a bit
 
-
 
-					var material = materials[ 0 ];
 
-					material.morphTargets = true;
 
-					material.color.setHex( 0xffaaaa );
 
-
 
-					for ( var i = 0; i < 729; i ++ ) {
 
-
 
-						var mesh = new THREE.Mesh( geometry, materials );
 
-
 
-						// random placement in a grid
 
-
 
-						var x = ( ( i % 27 )  - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
 
-						var z = ( Math.floor( i / 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
 
-
 
-						mesh.position.set( x, 0, z );
 
-
 
-						var s = THREE.Math.randFloat( 0.00075, 0.001 );
 
-						mesh.scale.set( s, s, s );
 
-
 
-						mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );
 
-
 
-						mesh.matrixAutoUpdate = false;
 
-						mesh.updateMatrix();
 
-
 
-						scene.add( mesh );
 
-
 
-						mixer.clipAction( geometry.animations[ 0 ], mesh )
 
-								.setDuration( 1 )			// one second
 
-								.startAt( - Math.random() )	// random phase (already running)
 
-								.play();					// let's go
 
-
 
-					}
 
-
 
-				} );
 
-
 
-				// lights
 
-
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc );
 
-				scene.add( ambientLight );
 
-
 
-				var pointLight = new THREE.PointLight( 0xff4400, 5, 30 );
 
-				pointLight.position.set( 5, 0, 0 );
 
-				scene.add( pointLight );
 
-
 
-				// 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();
 
-
 
-			}
 
-
 
-			//
 
-
 
-			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;
 
-
 
-				mixer.update( clock.getDelta() );
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 195
examples/webgl_morphnormals.html
Bestand weergeven 

@@ -1,195 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - morph normals</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: #111;
 
-				color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a { color: #f00 }
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/Detector.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-
 
-			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight;
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer;
 
-			var mixers = [];
 
-
 
-			var clock = new THREE.Clock();
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - morph normals - model by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a>';
 
-				container.appendChild( info );
 
-
 
-				//
 
-
 
-				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
-				camera.position.y = 300;
 
-				camera.target = new THREE.Vector3( 0, 150, 0 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				//
 
-
 
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x222233 ) );
 
-
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
 
-				light.position.set( 1, 1, 1 );
 
-				scene.add( light );
 
-
 
-				//
 
-
 
-
 
-				var loader = new THREE.JSONLoader();
 
-				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
-
 
-					var material = new THREE.MeshPhongMaterial( {
 
-						color: 0xffffff,
 
-						morphTargets: true,
 
-						vertexColors: THREE.FaceColors,
 
-						flatShading: true
 
-					} );
 
-					var mesh = new THREE.Mesh( geometry, material );
 
-
 
-					mesh.position.x = - 150;
 
-					mesh.position.y = 150;
 
-					mesh.scale.set( 1.5, 1.5, 1.5 );
 
-
 
-					scene.add( mesh );
 
-
 
-					var mixer = new THREE.AnimationMixer( mesh );
 
-					mixer.clipAction( geometry.animations[ 0 ] ).setDuration( 1 ).play();
 
-
 
-					mixers.push( mixer );
 
-
 
-				} );
 
-
 
-				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
-
 
-					geometry.computeVertexNormals();
 
-					geometry.computeMorphNormals();
 
-
 
-					var material = new THREE.MeshPhongMaterial( {
 
-						color: 0xffffff,
 
-						morphTargets: true,
 
-						morphNormals: true,
 
-						vertexColors: THREE.FaceColors
 
-					} );
 
-					var mesh = new THREE.Mesh( geometry, material );
 
-
 
-					mesh.position.x = 150;
 
-					mesh.position.y = 150;
 
-					mesh.scale.set( 1.5, 1.5, 1.5 );
 
-
 
-					scene.add( mesh );
 
-
 
-					var mixer = new THREE.AnimationMixer( mesh );
 
-					mixer.clipAction( geometry.animations[ 0 ] ).setDuration( 1 ).play();
 
-
 
-					mixers.push( mixer );
 
-
 
-				} );
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function onWindowResize( event ) {
 
-
 
-				SCREEN_WIDTH = window.innerWidth;
 
-				SCREEN_HEIGHT = window.innerHeight;
 
-
 
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-
 
-				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
-				camera.updateProjectionMatrix();
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			var radius = 600;
 
-			var theta = 0;
 
-
 
-			function render() {
 
-
 
-				theta += 0.1;
 
-
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 
-
 
-				camera.lookAt( camera.target );
 
-
 
-				var delta = clock.getDelta();
 
-
 
-				for ( var i = 0; i < mixers.length; i ++ ) {
 
-
 
-					mixers[ i ].update( delta );
 
-
 
-				}
 
-
 
-				renderer.clear();
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 5 - 8
examples/webgl_morphtargets_horse.html
Bestand weergeven 

@@ -17,6 +17,7 @@
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 
 		<script>
 
 
@@ -59,20 +60,16 @@
 
 				light.position.set( -1, -1, -1 ).normalize();
 
 				scene.add( light );
 
 
-				var loader = new THREE.JSONLoader();
 
-				loader.load( "models/animated/horse.js", function( geometry ) {
 
+				var loader = new THREE.GLTFLoader();
 
+				loader.load( "models/gltf/Horse.glb", function( gltf ) {
 
 
-					mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( {
 
-						vertexColors: THREE.FaceColors,
 
-						morphTargets: true
 
-					} ) );
 
+					mesh = gltf.scene.children[ 0 ];
 
 					mesh.scale.set( 1.5, 1.5, 1.5 );
 
 					scene.add( mesh );
 
 
 					mixer = new THREE.AnimationMixer( mesh );
 
 
-					var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
 
-					mixer.clipAction( clip ).setDuration( 1 ).play();
 
+					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
 
 
 				} );

+ 5 - 6
examples/webgl_shading_physical.html
Bestand weergeven 

@@ -36,6 +36,7 @@
 
 		<script src="../build/three.js"></script>
 
 
 		<script src="js/controls/TrackballControls.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
@@ -209,17 +210,15 @@
 
 
 				// MORPHS
 
 
-				var loader = new THREE.JSONLoader();
 
+				var loader = new THREE.GLTFLoader();
 
 
-				loader.load( "models/animated/sittingBox.js", function( geometry ) {
 
+				loader.load( "models/gltf/SittingBox.glb", function( gltf ) {
 
 
-					var morphMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xff9900, shininess: 50, morphTargets: true, side: THREE.DoubleSide, flatShading: true } );
 
-
 
-					var mesh = new THREE.Mesh( geometry, morphMaterial );
 
+					var mesh = gltf.scene.children[ 0 ];
 
 
 					mixer = new THREE.AnimationMixer( mesh );
 
 
-					mixer.clipAction( geometry.animations[0] ).setDuration( 10 ).play();
 
+					mixer.clipAction( gltf.animations[0] ).setDuration( 10 ).play();
 
 
 					var s = 200;
 
 					mesh.scale.set( s, s, s );

+ 33 - 20
examples/webgl_shadowmap.html
Bestand weergeven 

@@ -35,6 +35,7 @@
 
 		<script src="../build/three.js"></script>
 
 
 		<script src="js/controls/FirstPersonControls.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 
 		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 
 		<script src="js/utils/ShadowMapViewer.js"></script>
 
@@ -265,21 +266,19 @@
 
 
 				mixer = new THREE.AnimationMixer( scene );
 
 
-				function addMorph( geometry, speed, duration, x, y, z, fudgeColor ) {
 
+				function addMorph( mesh, clip, speed, duration, x, y, z, fudgeColor ) {
 
 
-					var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
 
+					mesh = mesh.clone();
 
+					mesh.material = mesh.material.clone();
 
 
 					if ( fudgeColor ) {
 
 
-						material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
 
+						mesh.material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.2 - 0.1 );
 
 
 					}
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
 					mesh.speed = speed;
 
 
-					var clip = geometry.animations[ 0 ];
 
-
 
 					mixer.clipAction( clip, mesh ).
 
 							setDuration( duration ).
 
 							// to shift the playback out of phase:
 
@@ -298,35 +297,49 @@
 
 
 				}
 
 
-				var loader = new THREE.JSONLoader();
 
+				var loader = new THREE.GLTFLoader();
 
+
 
+				loader.load( "models/gltf/Horse.glb", function( gltf ) {
 
+
 
+					var mesh = gltf.scene.children[ 0 ];
 
+					mesh.material.color.setHex( 0xffaa55 );
 
 
-				loader.load( "models/animated/horse.js", function( geometry ) {
 
+					var clip = gltf.animations[ 0 ];
 
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, 300, true );
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, 450, true );
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, 600, true );
 
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, 300, true );
 
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, 450, true );
 
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, 600, true );
 
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 300, true );
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 450, true );
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 600, true );
 
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, - 300, true );
 
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, - 450, true );
 
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, - 600, true );
 
 
 				} );
 
 
-				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
+				loader.load( "models/gltf/Flamingo.glb", function( gltf ) {
 
 
-					addMorph( geometry, 500, 1, 500 - Math.random() * 500, FLOOR + 350, 40 );
 
+					var mesh = gltf.scene.children[ 0 ];
 
+					var clip = gltf.animations[ 0 ];
 
+
 
+					addMorph( mesh, clip, 500, 1, 500 - Math.random() * 500, FLOOR + 350, 40 );
 
 
 				} );
 
 
-				loader.load( "models/animated/stork.js", function( geometry ) {
 
+				loader.load( "models/gltf/Stork.glb", function( gltf ) {
 
+
 
+					var mesh = gltf.scene.children[ 0 ];
 
+					var clip = gltf.animations[ 0 ];
 
 
-					addMorph( geometry, 350, 1, 500 - Math.random() * 500, FLOOR + 350, 340 );
 
+					addMorph( mesh, clip, 350, 1, 500 - Math.random() * 500, FLOOR + 350, 340 );
 
 
 				} );
 
 
-				loader.load( "models/animated/parrot.js", function( geometry ) {
 
+				loader.load( "models/gltf/Parrot.glb", function( gltf ) {
 
+
 
+					var mesh = gltf.scene.children[ 0 ];
 
+					var clip = gltf.animations[ 0 ];
 
 
-					addMorph( geometry, 450, 0.5, 500 - Math.random() * 500, FLOOR + 300, 700 );
 
+					addMorph( mesh, clip, 450, 0.5, 500 - Math.random() * 500, FLOOR + 300, 700 );
 
 
 				} );

+ 11 - 53
examples/webgl_shadowmap_performance.html
Bestand weergeven 

@@ -34,6 +34,7 @@
 
 		<script src="../build/three.js"></script>
 
 
 		<script src="js/controls/FirstPersonControls.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 
 		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 
 
@@ -243,21 +244,19 @@
 
 
 				// MORPHS
 
 
-				function addMorph( geometry, speed, duration, x, y, z, fudgeColor, massOptimization ) {
 
+				function addMorph( mesh, clip, speed, duration, x, y, z, fudgeColor, massOptimization ) {
 
 
-					var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
 
+					mesh = mesh.clone();
 
+					mesh.material = mesh.material.clone();
 
 
 					if ( fudgeColor ) {
 
 
-						material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
 
+						mesh.material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
 
 
 					}
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
 					mesh.speed = speed;
 
 
-					var clip = geometry.animations[ 0 ];
 
-
 
 					if ( massOptimization ) {
 
 
 						var index = Math.floor( Math.random() * ANIMATION_GROUPS ),
 
@@ -298,62 +297,21 @@
 
 
 				}
 
 
-				var loader = new THREE.JSONLoader();
 
+				var loader = new THREE.GLTFLoader();
 
+
 
+				loader.load( "models/gltf/Horse.glb", function( gltf ) {
 
 
-				loader.load( "models/animated/horse.js", function( geometry ) {
 
+					var mesh = gltf.scene.children[ 0 ];
 
+					var clip = gltf.animations[ 0 ];
 
 
 					for ( var i = - 600; i < 601; i += 2 ) {
 
 
-						addMorph( geometry, 550, 1, 100 - Math.random() * 3000, FLOOR, i, true, true );
 
+						addMorph( mesh, clip, 550, 1, 100 - Math.random() * 3000, FLOOR, i, true, true );
 
 
 					}
 
 
 				} );
 
 
-				/*
 
-				loader.load( "obj/morphs/fox.js", function( geometry ) {
 
-
 
-					addMorph( geometry, 200, 1000, 100 - Math.random() * 500, FLOOR - 5, 600 );
 
-
 
-				} );
 
-
 
-				loader.load( "obj/morphs/shdw3walk.js", function( geometry ) {
 
-
 
-					addMorph( geometry, 40, 2000, -500, FLOOR + 60, 245 );
 
-
 
-				} );
 
-
 
-				loader.load( "obj/morphs/flamingo.js", function( geometry ) {
 
-
 
-					addMorph( geometry, 500, 1000, 500 - Math.random() * 500, FLOOR + 350, 40 );
 
-
 
-				} );
 
-
 
-				loader.load( "obj/morphs/stork.js", function( geometry ) {
 
-
 
-					addMorph( geometry, 350, 1000, 500 - Math.random() * 500, FLOOR + 350, 340 );
 
-
 
-				} );
 
-
 
-				loader.load( "obj/morphs/mountainlion.js", function( geometry ) {
 
-
 
-					addMorph( geometry, 400, 1000, 500 - Math.random() * 500, FLOOR - 5, 700 );
 
-
 
-				} );
 
-
 
-				loader.load( "obj/morphs/bearBrown.js", function( geometry ) {
 
-
 
-					addMorph( geometry, 300, 2500, -500, FLOOR - 5, -750 );
 
-
 
-				} );
 
-
 
-				loader.load( "obj/morphs/parrot.js", function( geometry ) {
 
-
 
-					addMorph( geometry, 450, 500, 500 - Math.random() * 500, FLOOR + 300, 700 );
 
-
 
-				} );
 
-				*/
 
-
 
 			}
 
 
 			//

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