Support for ray-line picking with scale matrix + polish few stuffs.

examples/webgl_interactive_lines.html

@@ -40,7 +40,7 @@
 				info.style.top = '10px';
 				info.style.width = '100%';
 				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive cubes';
+				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive lines';
 				container.appendChild( info );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -62,28 +62,28 @@
 
 				var geometry = new THREE.Geometry();
 				geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
-				geometry.vertices.push( new THREE.Vector3( 15, 15, 15 ) );
+				geometry.vertices.push( new THREE.Vector3( 15, 0, 0 ) );
 				geometry.vertices.push( new THREE.Vector3( 0, 30, -40 ) );
 				geometry.vertices.push( new THREE.Vector3( -15, -15, -30 ) );
 
 				parentTransform = new THREE.Mesh();
-				parentTransform.position.x = Math.random() * 200 - 400;
-				parentTransform.position.y = Math.random() * 200 - 400;
-				parentTransform.position.z = Math.random() * 200 - 400;
+				parentTransform.position.x = Math.random() * 40 - 20;
+				parentTransform.position.y = Math.random() * 40 - 20;
+				parentTransform.position.z = Math.random() * 40 - 20;
 
 				parentTransform.rotation.x = Math.random() * 2 * Math.PI;
 				parentTransform.rotation.y = Math.random() * 2 * Math.PI;
 				parentTransform.rotation.z = Math.random() * 2 * Math.PI;
 
-				// parentTransform.scale.x = Math.random() + 0.5;
-				// parentTransform.scale.y = Math.random() + 0.5;
-				// parentTransform.scale.z = Math.random() + 0.5;
+				parentTransform.scale.x = Math.random() + 0.5;
+				parentTransform.scale.y = Math.random() + 0.5;
+				parentTransform.scale.z = Math.random() + 0.5;
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( var i = 0; i < 500; i ++ ) {
 
 					var type = Math.random() > 0.5 ? THREE.LineStrip : THREE.LinePieces;
-					var object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff, linewidth: 5 } ), type );
-
+					var object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff } ), type );
+					
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
 					object.position.z = Math.random() * 800 - 400;
@@ -92,9 +92,9 @@
 					object.rotation.y = Math.random() * 2 * Math.PI;
 					object.rotation.z = Math.random() * 2 * Math.PI;
 
-					// object.scale.x = Math.random() + 0.5;
-					// object.scale.y = Math.random() + 0.5;
-					// object.scale.z = Math.random() + 0.5;
+					object.scale.x = Math.random() + 0.5;
+					object.scale.y = Math.random() + 0.5;
+					object.scale.z = Math.random() + 0.5;
 
 					parentTransform.add( object );
 
@@ -104,7 +104,7 @@
 
 				projector = new THREE.Projector();
 				raycaster = new THREE.Raycaster();
-				raycaster.linePrecision = 5;
+				raycaster.linePrecision = 3;
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.sortObjects = false;

src/core/Raycaster.js

@@ -288,19 +288,34 @@
 			
 			inverseMatrix.getInverse(object.matrixWorld);
 			localRay.copy(raycaster.ray).applyMatrix4(inverseMatrix);
+			localRay.direction.normalize(); // for scale matrix
 			var vertices = object.geometry.vertices;
 			var nbVertices = vertices.length;
-			var interPoint = new THREE.Vector3();
+			var interSegment = new THREE.Vector3();
+			var interLine = new THREE.Vector3();
 			var step = object.type === THREE.LineStrip ? 1 : 2;
 
 			for(var i = 0; i < nbVertices - 1; i=i+step) {
 
-				var distTestSq = localRay.distanceSqAndPointToSegment(vertices[i], vertices[i + 1], null, interPoint);
-				if(distTestSq <= precisionSq) {
-					interPoint.applyMatrix4(object.matrixWorld);
-					var distance = raycaster.ray.origin.distanceTo(interPoint);
-					if(raycaster.near <= distance && distance <= raycaster.far)
-						intersects.push({distance: distance, point: interPoint.clone(), object: object});
+				localRay.distanceSqAndPointToSegment(vertices[i], vertices[i + 1], interLine, interSegment);
+				interSegment.applyMatrix4(object.matrixWorld);
+				interLine.applyMatrix4(object.matrixWorld);
+				if(interLine.distanceToSquared(interSegment) <= precisionSq) {
+
+					var distance = raycaster.ray.origin.distanceTo(interLine);
+
+					if(raycaster.near <= distance && distance <= raycaster.far) {
+
+						intersects.push( {
+
+							distance: distance,
+							point: interSegment.clone(),
+							face: null,
+							faceIndex: null,
+							object: object
+
+						} );
+					}
 				}
 			}
 		}