Line2 world units raycaster

examples/jsm/lines/LineSegments2.js

@@ -125,7 +125,17 @@ class LineSegments2 extends Mesh {
 		const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint( ray.origin ) );
 
 		// increase the sphere bounds by the worst case line screen space width
-		const sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, lineWidth, resolution );
+		let sphereMargin;
+		if ( this.material.worldUnits ) {
+
+			sphereMargin = lineWidth * 0.5;
+
+		} else {
+
+			sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, lineWidth, resolution );
+
+		}
+
 		_sphere.radius += sphereMargin;
 
 		if ( raycaster.ray.intersectsSphere( _sphere ) === false ) {
@@ -147,13 +157,18 @@ class LineSegments2 extends Mesh {
 		const distanceToBox = Math.max( camera.near, _box.distanceToPoint( ray.origin ) );
 
 		// increase the box bounds by the worst case line screen space width
-		const boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, lineWidth, resolution );
-		_box.max.x += boxMargin;
-		_box.max.y += boxMargin;
-		_box.max.z += boxMargin;
-		_box.min.x -= boxMargin;
-		_box.min.y -= boxMargin;
-		_box.min.z -= boxMargin;
+		let boxMargin;
+		if ( this.material.worldUnits ) {
+
+			boxMargin = lineWidth * 0.5;
+
+		} else {
+
+			boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, lineWidth, resolution );
+
+		}
+
+		_box.expandByScalar( boxMargin );
 
 		if ( raycaster.ray.intersectsBox( _box ) === false ) {
 
@@ -248,21 +263,50 @@ class LineSegments2 extends Mesh {
 			const zPos = MathUtils.lerp( _start4.z, _end4.z, param );
 			const isInClipSpace = zPos >= - 1 && zPos <= 1;
 
-			const isInside = _ssOrigin3.distanceTo( _closestPoint ) < lineWidth * 0.5;
+			if ( ! isInClipSpace ) {
+
+				return;
+
+			}
 
-			if ( isInClipSpace && isInside ) {
+			let isInside;
+			let point, pointOnLine;
+			function getPointAndPointOnLine() {
 
 				_line.start.fromBufferAttribute( instanceStart, i );
 				_line.end.fromBufferAttribute( instanceEnd, i );
 
 				_line.start.applyMatrix4( matrixWorld );
 				_line.end.applyMatrix4( matrixWorld );
 
-				const pointOnLine = new Vector3();
-				const point = new Vector3();
-
 				ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
 
+			}
+
+			if ( this.material.worldUnits ) {
+
+				pointOnLine = new Vector3();
+				point = new Vector3();
+				getPointAndPointOnLine();
+
+				isInside = point.distanceTo( pointOnLine ) < lineWidth * 0.5;
+
+			} else {
+
+				isInside = _ssOrigin3.distanceTo( _closestPoint ) < lineWidth * 0.5;
+
+			}
+
+			if ( isInside ) {
+
+				if ( ! this.material.worldUnits ) {
+
+					pointOnLine = new Vector3();
+					point = new Vector3();
+					getPointAndPointOnLine();
+
+				}
+
 				intersects.push( {
 
 					point: point,

examples/webgl_lines_fat.html

@@ -40,6 +40,7 @@
 			import * as GeometryUtils from './jsm/utils/GeometryUtils.js';
 
 			let line, renderer, scene, camera, camera2, controls;
+			let raycaster, sphereInter, sphereOnLine;
 			let line1;
 			let matLine, matLineBasic, matLineDashed;
 			let stats, gpuPanel;
@@ -49,6 +50,8 @@
 			let insetWidth;
 			let insetHeight;
 
+			const pointer = new THREE.Vector2();
+
 			init();
 			animate();
 
@@ -72,6 +75,22 @@
 				controls.minDistance = 10;
 				controls.maxDistance = 500;
 
+				raycaster = new THREE.Raycaster();
+				raycaster.params.Line2 = {};
+				raycaster.params.Line2.threshold = 0;
+
+				const sphereGeometry = new THREE.SphereGeometry( 0.5 );
+				const sphereInterMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, depthTest: false } );
+				const sphereOnLineMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00, depthTest: false } );
+
+				sphereInter = new THREE.Mesh( sphereGeometry, sphereInterMaterial );
+				sphereOnLine = new THREE.Mesh( sphereGeometry, sphereOnLineMaterial );
+				sphereInter.visible = false;
+				sphereOnLine.visible = false;
+				sphereInter.renderOrder = 10;
+				sphereOnLine.renderOrder = 10;
+				scene.add( sphereInter );
+				scene.add( sphereOnLine );
 
 				// Position and THREE.Color Data
 
@@ -137,7 +156,7 @@
 				scene.add( line1 );
 
 				//
-
+				document.addEventListener( 'pointermove', onPointerMove );
 				window.addEventListener( 'resize', onWindowResize );
 				onWindowResize();
 
@@ -167,6 +186,13 @@
 
 			}
 
+			function onPointerMove( event ) {
+
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+			}
+
 			function animate() {
 
 				requestAnimationFrame( animate );
@@ -179,6 +205,24 @@
 
 				renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
 
+				raycaster.setFromCamera( pointer, camera );
+
+				const intersects = raycaster.intersectObject( line, true );
+
+				if ( intersects.length > 0 ) {
+
+					sphereInter.visible = true;
+					sphereOnLine.visible = true;
+					sphereInter.position.copy( intersects[ 0 ].point );
+					sphereOnLine.position.copy( intersects[ 0 ].pointOnLine );
+
+				} else {
+
+					sphereInter.visible = false;
+					sphereOnLine.visible = false;
+
+				}
+
 				// renderer will set this eventually
 				matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
 
@@ -223,7 +267,8 @@
 					'alphaToCoverage': true,
 					'dashed': false,
 					'dash scale': 1,
-					'dash / gap': 1
+					'dash / gap': 1,
+					'threshold': raycaster.params.Line2.threshold
 				};
 
 				gui.add( param, 'line type', { 'LineGeometry': 0, 'gl.LINE': 1 } ).onChange( function ( val ) {
@@ -316,6 +361,12 @@
 
 				} );
 
+				gui.add( param, 'threshold', 0, 10 ).onChange( function ( val ) {
+
+					raycaster.params.Line2.threshold = val;
+
+				} );
+
 			}
 
 		</script>