switch to spherify and twist targets

examples/webgl_buffergeometry_morphtargets.html

@@ -86,61 +86,49 @@
 
 			function createGeometry() {
 
-				var geometry = new THREE.BufferGeometry();
-
-				// 2 x 2 cube centered at (0, 0, 0) defined by 8 corner vertices
-				var positions = [
-					- 1, - 1, 1, // front bottom left
-					1, - 1, 1, // front bottom right
-					- 1, 1, 1, // front top left
-					1, 1, 1, // front top right
-					- 1, - 1, - 1, // back bottom left
-					1, - 1, - 1, // back bottom right
-					- 1, 1, - 1, // back top left
-					1, 1, - 1, // back top right
-				];
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
-
-				// each face consists of two triangles
-				var indices = [
-					2, 0, 1, 1, 3, 2, // front
-					4, 6, 5, 6, 7, 5, // back
-					2, 3, 6, 3, 7, 6, // top
-					0, 4, 5, 5, 1, 0, // bottom
-					0, 6, 4, 6, 0, 2, // left
-					1, 5, 3, 3, 5, 7 // right
-				];
-				geometry.setIndex( indices );
+				var geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
 
 				// create an empty array to  hold targets for the attribute we want to morph
 				// morphing positions and normals is supported
 				geometry.morphAttributes.position = [];
 
-				// squash
-				var morphTargetPositions0 = [
-					- 1.25, - 1, 1.25,
-					1.25, - 1, 1.25,
-					- 1.25, 0.5, 1.25,
-					1.25, 0.5, 1.25,
-					- 1.25, - 1, - 1.25,
-					1.25, - 1, - 1.25,
-					- 1.25, 0.5, - 1.25,
-					1.25, 0.5, - 1.25,
-				];
-				geometry.morphAttributes.position[ 0 ] = new THREE.Float32BufferAttribute( morphTargetPositions0, 3 );
-
-				// lean
-				var morphTargetPositions1 = [
-					- 1, - 1, 1,
-					1, - 1, 1,
-					- 1.5, 1, 1,
-					0.5, 1, 1,
-					- 1, - 1, - 1,
-					1, - 1, - 1,
-					- 1.5, 1, - 1,
-					0.5, 1, - 1,
-				];
-				geometry.morphAttributes.position[ 1 ] = new THREE.Float32BufferAttribute( morphTargetPositions1, 3 );
+				// the original positions of the cube's vertices
+				var positions = geometry.attributes.position.array;
+
+				// for the first morph target we'll move the cube's vertices onto the surface of a sphere
+				var spherePositions = [];
+
+				// for the second morph target, we'll twist the cubes vertices
+				var twistPositions = [];
+				var direction = new THREE.Vector3( 1, 0, 0 ).normalize();
+				var vertex = new THREE.Vector3();
+
+				for ( var i = 0; i < positions.length; i += 3 ) {
+
+					var x = positions[ i ];
+					var y = positions[ i + 1 ];
+					var z = positions[ i + 2 ];
+
+					spherePositions.push(
+
+						x * Math.sqrt( 1 - ( y * y / 2 ) - ( z * z / 2 ) + ( y * y * z * z / 3 ) ),
+						y * Math.sqrt( 1 - ( z * z / 2 ) - ( x * x / 2 ) + ( z * z * x * x / 3 ) ),
+						z * Math.sqrt( 1 - ( x * x / 2 ) - ( y * y / 2 ) + ( x * x * y * y / 3 ) )
+
+					);
+
+					// stretch along the x-axis so we can see the twist better
+					vertex.set( x * 2, y, z );
+
+					vertex.applyAxisAngle( direction, Math.PI * x / 2 ).toArray( twistPositions, twistPositions.length );
+
+				}
+
+				// add the spherical positions as the first morph target
+				geometry.morphAttributes.position[ 0 ] = new THREE.Float32BufferAttribute( spherePositions, 3 );
+
+				// add the twisted positions as the second morph target
+				geometry.morphAttributes.position[ 1 ] = new THREE.Float32BufferAttribute( twistPositions, 3 );
 
 				return geometry;
 
@@ -150,18 +138,18 @@
 
 				// Set up dat.GUI to control targets
 				var params = {
-					Squash: 0,
-					Lean: 0,
+					Spherify: 0,
+					Twist: 0,
 				};
 				var gui = new dat.GUI();
 				var folder = gui.addFolder( 'Morph Targets' );
 
-				folder.add( params, 'Squash', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+				folder.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 0 ] = value;
 
 				} );
-				folder.add( params, 'Lean', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+				folder.add( params, 'Twist', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 1 ] = value;