Docs: Update SkinnedMesh page

docs/api/en/objects/SkinnedMesh.html

@@ -38,41 +38,60 @@
 		<h2>Example</h2>
 
 		<code>
-		var geometry = new THREE.CylinderGeometry( 5, 5, 5, 5, 15, 5, 30 );
+		var geometry = new THREE.CylinderBufferGeometry( 5, 5, 5, 5, 15, 5, 30 );
 
-		//Create the skin indices and skin weights
-		for ( var i = 0; i < geometry.vertices.length; i ++ ) {
+		// create the skin indices and skin weights
 
-			// Imaginary functions to calculate the indices and weights
-			// This part will need to be changed depending your skeleton and model
-			var skinIndex = calculateSkinIndex( geometry.vertices, i );
-			var skinWeight = calculateSkinWeight( geometry.vertices, i );
+		var position = geometry.attributes.position;
 
-			// Ease between each bone
-			geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
-			geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );
+		var vertex = new THREE.Vector3();
+
+		var skinIndices = [];
+		var skinWeights = [];
+
+		for ( var i = 0; i < position.count; i ++ ) {
+
+			vertex.fromBufferAttribute( position, i );
+
+			// compute skinIndex and skinWeight based on some configuration data
+
+			var y = ( vertex.y + sizing.halfHeight );
+
+			var skinIndex = Math.floor( y / sizing.segmentHeight );
+			var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;
+
+			skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
+			skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
 
 		}
 
+		geometry.addAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
+		geometry.addAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
+
+		// create skinned mesh and skeleton
+
 		var mesh = new THREE.SkinnedMesh( geometry, material );
+		var skeleton = new THREE.Skeleton( bones );
+
+		// see example from THREE.Skeleton
 
-		// See example from THREE.Skeleton for the armSkeleton
-		var rootBone = armSkeleton.bones[ 0 ];
+		var rootBone = skeleton.bones[ 0 ];
 		mesh.add( rootBone );
 
-		// Bind the skeleton to the mesh
-		mesh.bind( armSkeleton );
+		// bind the skeleton to the mesh
 
-		// Move the bones and manipulate the model
-		armSkeleton.bones[ 0 ].rotation.x = -0.1;
-		armSkeleton.bones[ 1 ].rotation.x = 0.2;
+		mesh.bind( skeleton );
+
+		// move the bones and manipulate the model
+
+		skeleton.bones[ 0 ].rotation.x = -0.1;
+		skeleton.bones[ 1 ].rotation.x = 0.2;
 		</code>
 
 		<h2>Constructor</h2>
-		<h3>[name]( [param:Geometry geometry], [param:Material material] )</h3>
+		<h3>[name]( [param:BufferGeometry geometry], [param:Material material] )</h3>
 		<p>
-    [page:Geometry geometry] - an instance of [page:Geometry] or [page:BufferGeometry] (recommended).
-		[page:Geometry.skinIndices skinIndices] and [page:Geometry.skinWeights skinWeights] should be set to true on the geometry.<br />
+    [page:Geometry geometry] - an instance of [page:BufferGeometry].<br />
     [page:Material material] - (optional) an instance of [page:Material]. Default is a new [page:MeshBasicMaterial].
 		</p>
 
@@ -109,8 +128,7 @@
 
 		<h3>[property:Skeleton skeleton]</h3>
 		<p>
-		[page:Skeleton] created from the [page:Geometry.bones bones] of the [page:Geometry] passed in the
-		constructor.
+		[page:Skeleton] representing the bone hierachy of the skinned mesh.
 		</p>
 
 
@@ -136,7 +154,7 @@
 
 		<h3>[method:null normalizeSkinWeights]()</h3>
 		<p>
-		Normalizes the [page:Geometry.skinWeights] vectors. Does not affect [page:BufferGeometry].
+		Normalizes the skin weights.
 		</p>
 
 		<h3>[method:null pose]()</h3>

docs/scenes/bones-browser.html

@@ -43,12 +43,10 @@
 			var gui, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
 
 			var state = {
-
-				animateBones : false
-
+				animateBones: false
 			};
 
-			function initScene () {
+			function initScene() {
 
 				gui = new dat.GUI();
 				scene = new THREE.Scene();
@@ -92,35 +90,46 @@
 
 			}
 
-			function createGeometry ( sizing ) {
+			function createGeometry( sizing ) {
 
-				var geometry = new THREE.CylinderGeometry(
-					5,                       // radiusTop
-					5,                       // radiusBottom
-					sizing.height,           // height
-					8,                       // radiusSegments
+				var geometry = new THREE.CylinderBufferGeometry(
+					5, // radiusTop
+					5, // radiusBottom
+					sizing.height, // height
+					8, // radiusSegments
 					sizing.segmentCount * 3, // heightSegments
-					true                     // openEnded
+					true // openEnded
 				);
 
-				for ( var i = 0; i < geometry.vertices.length; i ++ ) {
+				var position = geometry.attributes.position;
+
+				var vertex = new THREE.Vector3();
+
+				var skinIndices = [];
+				var skinWeights = [];
+
+				for ( var i = 0; i < position.count; i ++ ) {
+
+					vertex.fromBufferAttribute( position, i );
 
-					var vertex = geometry.vertices[ i ];
 					var y = ( vertex.y + sizing.halfHeight );
 
 					var skinIndex = Math.floor( y / sizing.segmentHeight );
 					var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;
 
-					geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
-					geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );
+					skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
+					skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
 
 				}
 
+				geometry.addAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
+				geometry.addAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
+
 				return geometry;
 
 			}
 
-			function createBones ( sizing ) {
+			function createBones( sizing ) {
 
 				bones = [];
 
@@ -142,10 +151,10 @@
 
 			}
 
-			function createMesh ( geometry, bones ) {
+			function createMesh( geometry, bones ) {
 
 				var material = new THREE.MeshPhongMaterial( {
-					skinning : true,
+					skinning: true,
 					color: 0x156289,
 					emissive: 0x072534,
 					side: THREE.DoubleSide,
@@ -167,7 +176,7 @@
 
 			}
 
-			function setupDatGui () {
+			function setupDatGui() {
 
 				var folder = gui.addFolder( "General Options" );
 
@@ -213,7 +222,7 @@
 
 			}
 
-			function initBones () {
+			function initBones() {
 
 				var segmentHeight = 8;
 				var segmentCount = 4;
@@ -221,10 +230,10 @@
 				var halfHeight = height * 0.5;
 
 				var sizing = {
-					segmentHeight : segmentHeight,
-					segmentCount : segmentCount,
-					height : height,
-					halfHeight : halfHeight
+					segmentHeight: segmentHeight,
+					segmentCount: segmentCount,
+					height: height,
+					halfHeight: halfHeight
 				};
 
 				var geometry = createGeometry( sizing );
@@ -236,7 +245,7 @@
 
 			}
 
-			function render () {
+			function render() {
 
 				requestAnimationFrame( render );