Examples: Manually manipulating morph targets on a model.

examples/files.js

@@ -181,6 +181,7 @@ var files = {
 		"webgl_morphtargets",
 		"webgl_morphtargets_horse",
 		"webgl_morphtargets_human",
+		"webgl_morphtargets_sphere",
 		"webgl_multiple_canvases_circle",
 		"webgl_multiple_canvases_complex",
 		"webgl_multiple_canvases_grid",

examples/models/gltf/AnimatedMorphSphere/README.md

+# Animated Morph Sphere
+
+## Details
+
+The sphere contains two morph targets in it:
+
+  * **`blob`** : moves the vertices so that it becomes a somewhat amorphous fat, blob shape.
+  * **`ship`** : moves the vertices so that it looks a bit like a spaceship, the goal being
+    to just make it a much more complicated morph example than the [cube](../AnimatedMorphCube/README.md).
+
+The animation loops, morphing between these two states.
+
+## Screenshot
+
+![screenshot](screenshot/screenshot.gif)
+
+## License Information
+
+Public domain ([CC0](https://creativecommons.org/publicdomain/zero/1.0/))
+
+Donated by Howard Wolosky for glTF testing.

examples/models/gltf/AnimatedMorphSphere/glTF/AnimatedMorphSphere.gltf

+{
+  "accessors": [
+    {
+      "bufferView": 0,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC4"
+    },
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC3",
+      "max": [
+        0.009999998,
+        0.009999991,
+        0.01
+      ],
+      "min": [
+        -0.0100000026,
+        -0.0100000035,
+        -0.01
+      ]
+    },
+    {
+      "bufferView": 3,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC3",
+      "name": "Ship"
+    },
+    {
+      "bufferView": 4,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC3",
+      "max": [
+        0.0313265175,
+        0.0226246975,
+        0.008465132
+      ],
+      "min": [
+        -0.0313265137,
+        -0.022857653,
+        0.0
+      ],
+      "name": "Ship"
+    },
+    {
+      "bufferView": 5,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC3",
+      "name": "Ship"
+    },
+    {
+      "bufferView": 6,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC3",
+      "name": "Blob"
+    },
+    {
+      "bufferView": 7,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC3",
+      "max": [
+        0.008781092,
+        0.0,
+        0.0
+      ],
+      "min": [
+        -0.008781091,
+        -0.0007655843,
+        0.0
+      ],
+      "name": "Blob"
+    },
+    {
+      "bufferView": 8,
+      "componentType": 5126,
+      "count": 1876,
+      "type": "VEC3",
+      "name": "Blob"
+    },
+    {
+      "bufferView": 9,
+      "componentType": 5123,
+      "count": 2880,
+      "type": "SCALAR"
+    },
+    {
+      "bufferView": 10,
+      "componentType": 5126,
+      "count": 217,
+      "type": "SCALAR",
+      "max": [
+        7.19999456
+      ],
+      "min": [
+        0.0
+      ]
+    },
+    {
+      "bufferView": 11,
+      "componentType": 5126,
+      "count": 434,
+      "type": "SCALAR"
+    }
+  ],
+  "animations": [
+    {
+      "channels": [
+        {
+          "sampler": 0,
+          "target": {
+            "node": 0,
+            "path": "weights"
+          }
+        }
+      ],
+      "samplers": [
+        {
+          "input": 10,
+          "interpolation": "LINEAR",
+          "output": 11
+        }
+      ],
+      "name": "Globe"
+    }
+  ],
+  "asset": {
+    "generator": "glTF Tools for Unity",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 22512
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 22512,
+      "byteLength": 30016
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 52528,
+      "byteLength": 22512
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 75040,
+      "byteLength": 22512
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 97552,
+      "byteLength": 22512
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 120064,
+      "byteLength": 22512
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 142576,
+      "byteLength": 22512
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 165088,
+      "byteLength": 22512
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 187600,
+      "byteLength": 22512
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 210112,
+      "byteLength": 5760
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 215872,
+      "byteLength": 868
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 216740,
+      "byteLength": 1736
+    }
+  ],
+  "buffers": [
+    {
+      "uri": "AnimatedMorphSphere.bin",
+      "byteLength": 218476
+    }
+  ],
+  "meshes": [
+    {
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 0,
+            "TANGENT": 1,
+            "POSITION": 2
+          },
+          "indices": 9,
+          "material": 0,
+          "targets": [
+            {
+              "NORMAL": 3,
+              "POSITION": 4,
+              "TANGENT": 5
+            },
+            {
+              "NORMAL": 6,
+              "POSITION": 7,
+              "TANGENT": 8
+            }
+          ]
+        }
+      ],
+      "weights": [
+        0.0,
+        0.0
+      ],
+      "name": "Sphere"
+    }
+  ],
+  "materials": [
+    {
+      "pbrMetallicRoughness": {
+        "metallicFactor": 0.0,
+        "roughnessFactor": 0.5
+      },
+      "name": "No Name"
+    }
+  ],
+  "nodes": [
+    {
+      "mesh": 0,
+      "rotation": [
+        0.0,
+        0.7071067,
+        -0.7071068,
+        0.0
+      ],
+      "scale": [
+        100.0,
+        100.0,
+        100.0
+      ],
+      "name": "AnimatedMorphSphere"
+    }
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "nodes": [
+        0
+      ]
+    }
+  ]
+}
\ No newline at end of file

examples/webgl_morphtargets_sphere.html

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - morph targets - horse</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: #f0f0f0;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px;
+				width: 100%;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				color: #ffffff;
+			}
+
+			a {
+				color: #ffffff;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGL morph target example
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+
+		<script>
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var geometry, objects;
+
+			var mesh;
+
+			var sign = 1;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.2, 100 );
+				camera.position.set( 0, 5, 5 );
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x222222 );
+				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
+
+				var light = new THREE.PointLight( 0xff2200, 0.7 );
+				light.position.set( 100, 100, 100 );
+				scene.add( light );
+
+				light = new THREE.PointLight( 0x22ff00, 0.7 );
+				light.position.set( -100, -100, -100 );
+				scene.add( light );
+
+				light = new THREE.AmbientLight( 0x111111 );
+				scene.add( light );
+
+				var loader = new THREE.GLTFLoader();
+				loader.load( 'models/gltf/AnimatedMorphSphere/glTF/AnimatedMorphSphere.gltf', function ( gltf ) {
+
+					gltf.scene.traverse( function ( node ) {
+
+						if ( node.isMesh ) mesh = node;
+
+					} );
+
+					mesh.material.morphTargets = true;
+
+					mesh.rotation.z = Math.PI / 2;
+
+					scene.add( mesh );
+
+				});
+
+				//
+
+				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 );
+
+				//
+
+				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 );
+				render();
+
+			}
+
+			function render() {
+
+				if ( mesh !== undefined ) {
+
+					mesh.rotation.y += 0.01;
+
+					mesh.morphTargetInfluences[ 1 ] = mesh.morphTargetInfluences[ 1 ] + 0.01 * sign;
+
+					if ( mesh.morphTargetInfluences[ 1 ] <= 0 || mesh.morphTargetInfluences[ 1 ] >= 1 ) {
+
+						sign *= -1;
+
+					}
+
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>