Skin raycast

examples/webgl_animation_skinning_blending.html

@@ -47,6 +47,7 @@
 			var container, stats;
 
 			var blendMesh, helper, camera, scene, renderer, controls;
+			var ball, mouse, raycaster;
 
 			var clock = new THREE.Clock();
 			var gui = null;
@@ -100,6 +101,33 @@
 				blendMesh = new THREE.BlendCharacter();
 				blendMesh.load( "models/skinned/marine/marine_anims.js", start );
 
+				ball = new THREE.Mesh( new THREE.SphereGeometry( 4, 3, 2 ), new THREE.MeshBasicMaterial( { color: 255 } ) );
+				scene.add( ball );
+
+				mouse = { x: 0, y: 0 };
+				raycaster = new THREE.Raycaster();
+
+				window.addEventListener( 'mousemove', onTouchMove );
+				window.addEventListener( 'touchmove', onTouchMove );
+
+				function onTouchMove( event ) {
+
+					if ( event.changedTouches ) {
+
+						x = event.changedTouches[ 0 ].pageX;
+						y = event.changedTouches[ 0 ].pageY;
+
+					} else {
+
+						x = event.clientX;
+						y = event.clientY;
+
+					}
+
+					mouse.x = ( x / window.innerWidth ) * 2 - 1;
+					mouse.y = - ( y / window.innerHeight ) * 2 + 1;
+				}
+
 			}
 
 			function onWindowResize() {
@@ -249,6 +277,17 @@
 
 				THREE.AnimationHandler.update( stepSize );
 
+				// raycast
+
+				raycaster.setFromCamera( mouse, camera );
+				var intersects = raycaster.intersectObjects( [ blendMesh ] );
+				if ( intersects.length > 0 ) {
+					ball.visible = true;
+					ball.position.copy( intersects[ 0 ].point );
+				} else {
+					ball.visible = false;
+				}
+
 				renderer.render( scene, camera );
 				stats.update();
 

src/objects/Mesh.js

@@ -15,6 +15,7 @@ THREE.Mesh = function ( geometry, material ) {
 	this.material = material !== undefined ? material : new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } );
 
 	this.updateMorphTargets();
+	this.makeVertexGetter();
 
 };
 
@@ -55,6 +56,24 @@ THREE.Mesh.prototype.getMorphTargetIndexByName = function ( name ) {
 
 };
 
+THREE.Mesh.prototype.makeVertexGetter = function () {
+
+	// we need this to avoid geometry type checks in actual getter
+
+	if ( this.geometry.attributes ) {
+		var positions = this.geometry.attributes.position.array;
+
+		this.getVertex = function getVertex( vector, index ) {
+			vector.fromArray( positions, index * 3 );
+		};
+	} else {
+		var vertices = this.geometry.vertices;
+
+		this.getVertex = function getVertex( vector, index ) {
+			vector.copy( vertices[ index ] );
+		};
+	}
+};
 
 THREE.Mesh.prototype.raycast = ( function () {
 
@@ -72,6 +91,8 @@ THREE.Mesh.prototype.raycast = ( function () {
 
 	return function raycast( raycaster, intersects ) {
 
+		this.makeVertexGetter();
+
 		var geometry = this.geometry;
 		var material = this.material;
 
@@ -135,9 +156,9 @@ THREE.Mesh.prototype.raycast = ( function () {
 						b = index + indices[ i + 1 ];
 						c = index + indices[ i + 2 ];
 
-						vA.fromArray( positions, a * 3 );
-						vB.fromArray( positions, b * 3 );
-						vC.fromArray( positions, c * 3 );
+						this.getVertex( vA, a );
+						this.getVertex( vB, b );
+						this.getVertex( vC, c );
 
 						if ( material.side === THREE.BackSide ) {
 
@@ -177,9 +198,11 @@ THREE.Mesh.prototype.raycast = ( function () {
 
 				for ( var i = 0, il = positions.length; i < il; i += 9 ) {
 
-					vA.fromArray( positions, i );
-					vB.fromArray( positions, i + 3 );
-					vC.fromArray( positions, i + 6 );
+					a = i / 3;
+
+					this.getVertex( vA, a );
+					this.getVertex( vB, a + 1 );
+					this.getVertex( vC, a + 2 );
 
 					if ( material.side === THREE.BackSide ) {
 
@@ -199,7 +222,6 @@ THREE.Mesh.prototype.raycast = ( function () {
 
 					if ( distance < raycaster.near || distance > raycaster.far ) continue;
 
-					a = i / 3;
 					b = a + 1;
 					c = a + 2;
 
@@ -219,6 +241,10 @@ THREE.Mesh.prototype.raycast = ( function () {
 
 		} else if ( geometry instanceof THREE.Geometry ) {
 
+			a = new THREE.Vector3();
+			b = new THREE.Vector3();
+			c = new THREE.Vector3();
+
 			var isFaceMaterial = material instanceof THREE.MeshFaceMaterial;
 			var materials = isFaceMaterial === true ? material.materials : null;
 
@@ -232,9 +258,9 @@ THREE.Mesh.prototype.raycast = ( function () {
 
 				if ( faceMaterial === undefined ) continue;
 
-				a = vertices[ face.a ];
-				b = vertices[ face.b ];
-				c = vertices[ face.c ];
+				this.getVertex( a, face.a );
+				this.getVertex( b, face.b );
+				this.getVertex( c, face.c );
 
 				if ( faceMaterial.morphTargets === true ) {
 
@@ -263,9 +289,9 @@ THREE.Mesh.prototype.raycast = ( function () {
 					vB.add( b );
 					vC.add( c );
 
-					a = vA;
-					b = vB;
-					c = vC;
+					a.copy( vA );
+					b.copy( vB );
+					c.copy( vC );
 
 				}
 

src/objects/SkinnedMesh.js

@@ -154,3 +154,56 @@ THREE.SkinnedMesh.prototype.copy = function( source ) {
 	return this;
 
 };
+
+THREE.SkinnedMesh.prototype.makeVertexGetter = function () {
+
+	// calculate transformed vertex in the getter
+
+	var result = new THREE.Vector3(), skinIndices = new THREE.Vector4(), skinWeights = new THREE.Vector4();
+	var temp = new THREE.Vector3(), tempMatrix = new THREE.Matrix4(), properties = [ 'x', 'y', 'z', 'w' ];
+
+	if ( this.geometry.attributes ) {
+		var positions = this.geometry.attributes.position.array;
+		var skinIndicesArray = this.geometry.attributes.skinIndex.array;
+		var skinWeightsArray = this.geometry.attributes.skinWeights.array;
+
+		this.getVertex = function getVertex( vector, index ) {
+			var index4 = index << 2;
+			skinIndices.fromArray( skinIndicesArray, index4 );
+			skinWeights.fromArray( skinWeightsArray, index4 );
+			vector.fromArray( positions, index * 3 );
+
+			vector.applyMatrix4( this.bindMatrix ); result.set( 0, 0, 0 );
+			for ( var i = 0; i < 4; i++ ) {
+				var skinWeight = skinWeights[ properties[ i ] ];
+				if (skinWeight != 0) {
+					var boneIndex = skinIndices[ properties[ i ] ];
+					tempMatrix.multiplyMatrices( this.skeleton.bones[ boneIndex ].matrixWorld, this.skeleton.boneInverses[ boneIndex ]);
+					result.add( temp.copy( vector ).applyMatrix4( tempMatrix ).multiplyScalar( skinWeight ) );
+				}
+			}
+			vector.copy( result.applyMatrix4( this.bindMatrixInverse ) );
+		};
+	} else {
+		var vertices = this.geometry.vertices;
+		var skinIndicesArray = this.geometry.skinIndices;
+		var skinWeightsArray = this.geometry.skinWeights;
+
+		this.getVertex = function getVertex( vector, index ) {
+			vector.copy( vertices[ index ] );
+			skinIndices.copy( skinIndicesArray[ index ] );
+			skinWeights.copy( skinWeightsArray[ index ] );
+
+			vector.applyMatrix4( this.bindMatrix ); result.set( 0, 0, 0 );
+			for ( var i = 0; i < 4; i++ ) {
+				var skinWeight = skinWeights[ properties[ i ] ];
+				if (skinWeight != 0) {
+					var boneIndex = skinIndices[ properties[ i ] ];
+					tempMatrix.multiplyMatrices( this.skeleton.bones[ boneIndex ].matrixWorld, this.skeleton.boneInverses[ boneIndex ]);
+					result.add( temp.copy( vector ).applyMatrix4( tempMatrix ).multiplyScalar( skinWeight ) );
+				}
+			}
+			vector.copy( result.applyMatrix4( this.bindMatrixInverse ) );
+		};
+	}
+};