Add rotation/translation to lines raycasting example (#25042)

* Fix raytracing of LineSegments2 when the mesh has a transformation applied.

* Adding rotation animation to the example to make testing the worldMatrix test more common

* Fix threshold object

* Just update everything

Co-authored-by: mloeppky <[email protected]>

examples/webgl_lines_fat_raycasting.html

@@ -43,10 +43,10 @@
 
 			let line, thresholdLine, segments, thresholdSegments;
 			let renderer, scene, camera, camera2, controls;
-			let raycaster, sphereInter, sphereOnLine;
-			let matLine, matThresholdLine;
+			let sphereInter, sphereOnLine;
 			let stats, gpuPanel;
 			let gui;
+			let clock;
 
 			// viewport
 			let insetWidth;
@@ -54,11 +54,57 @@
 
 			const pointer = new THREE.Vector2( Infinity, Infinity );
 
+			const raycaster = new THREE.Raycaster();
+
+			raycaster.params.Line2 = {};
+			raycaster.params.Line2.threshold = 0;
+
+			const matLine = new LineMaterial( {
+
+				color: 0xffffff,
+				linewidth: 1, // in world units with size attenuation, pixels otherwise
+				worldUnits: true,
+				vertexColors: true,
+
+				//resolution:  // to be set by renderer, eventually
+				alphaToCoverage: true,
+
+			} );
+
+			const matThresholdLine = new LineMaterial( {
+
+				color: 0xffffff,
+				linewidth: matLine.linewidth, // in world units with size attenuation, pixels otherwise
+				worldUnits: true,
+				// vertexColors: true,
+				transparent: true,
+				opacity: 0.2,
+				depthTest: false,
+				visible: false,
+				//resolution:  // to be set by renderer, eventually
+
+			} );
+
+			const params = {
+
+				'line type': 0,
+				'world units': matLine.worldUnits,
+				'visualize threshold': matThresholdLine.visible,
+				'width': matLine.linewidth,
+				'alphaToCoverage': matLine.alphaToCoverage,
+				'threshold': raycaster.params.Line2.threshold,
+				'translation': raycaster.params.Line2.threshold,
+				'animate': true
+
+			};
+
 			init();
 			animate();
 
 			function init() {
 
+				clock = new THREE.Clock();
+
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setClearColor( 0x000000, 0.0 );
@@ -77,10 +123,6 @@
 				controls.minDistance = 10;
 				controls.maxDistance = 500;
 
-				raycaster = new THREE.Raycaster();
-				raycaster.params.Line2 = {};
-				raycaster.params.Line2.threshold = 0;
-
 				const sphereGeometry = new THREE.SphereGeometry( 0.25 );
 				const sphereInterMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, depthTest: false } );
 				const sphereOnLineMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00, depthTest: false } );
@@ -131,32 +173,6 @@
 				segmentsGeometry.setPositions( positions );
 				segmentsGeometry.setColors( colors );
 
-				matLine = new LineMaterial( {
-
-					color: 0xffffff,
-					linewidth: 1, // in world units with size attenuation, pixels otherwise
-					worldUnits: true,
-					vertexColors: true,
-
-					//resolution:  // to be set by renderer, eventually
-					alphaToCoverage: true,
-
-				} );
-
-				matThresholdLine = new LineMaterial( {
-
-					color: 0xffffff,
-					linewidth: matLine.linewidth, // in world units with size attenuation, pixels otherwise
-					worldUnits: true,
-					// vertexColors: true,
-					transparent: true,
-					opacity: 0.2,
-					depthTest: false,
-					visible: false,
-					//resolution:  // to be set by renderer, eventually
-
-				} );
-
 				segments = new LineSegments2( segmentsGeometry, matLine );
 				segments.computeLineDistances();
 				segments.scale.set( 1, 1, 1 );
@@ -228,18 +244,32 @@
 
 				// main scene
 
+				const delta = clock.getDelta();
+
+				const obj = line.visible ? line : segments;
+				thresholdLine.position.copy( line.position );
+				thresholdLine.quaternion.copy( line.quaternion );
+				thresholdSegments.position.copy( segments.position );
+				thresholdSegments.quaternion.copy( segments.quaternion );
+
+				if ( params.animate ) {
+
+					line.rotation.y += delta * 0.5;
+					segments.rotation.y += delta * 0.5;
+
+				}
+
 				renderer.setClearColor( 0x000000, 0 );
 
 				renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
 
 				raycaster.setFromCamera( pointer, camera );
-				
+
 				// renderer will set this eventually
 				// set the new resolution before raycasting so it is set correctly
 				matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
 				matThresholdLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
 
-				const obj = line.visible ? line : segments;
 				const intersects = raycaster.intersectObject( obj, true );
 
 				if ( intersects.length > 0 ) {
@@ -323,22 +353,13 @@
 
 				gui = new GUI();
 
-				const param = {
-					'line type': 0,
-					'world units': matLine.worldUnits,
-					'visualize threshold': matThresholdLine.visible,
-					'width': matLine.linewidth,
-					'alphaToCoverage': matLine.alphaToCoverage,
-					'threshold': raycaster.params.Line2.threshold
-				};
-
-				gui.add( param, 'line type', { 'LineGeometry': 0, 'LineSegmentsGeometry': 1 } ).onChange( function ( val ) {
+				gui.add( params, 'line type', { 'LineGeometry': 0, 'LineSegmentsGeometry': 1 } ).onChange( function ( val ) {
 
 					switchLine( val );
 
 				} ).setValue( 1 );
 
-				gui.add( param, 'world units' ).onChange( function ( val ) {
+				gui.add( params, 'world units' ).onChange( function ( val ) {
 
 					matLine.worldUnits = val;
 					matLine.needsUpdate = true;
@@ -347,32 +368,41 @@
 
 				} );
 
-				gui.add( param, 'visualize threshold' ).onChange( function ( val ) {
+				gui.add( params, 'visualize threshold' ).onChange( function ( val ) {
 
 					matThresholdLine.visible = val;
 
 				} );
 
-				gui.add( param, 'width', 1, 10 ).onChange( function ( val ) {
+				gui.add( params, 'width', 1, 10 ).onChange( function ( val ) {
 
 					matLine.linewidth = val;
 					matThresholdLine.linewidth = matLine.linewidth + raycaster.params.Line2.threshold;
 
 				} );
 
-				gui.add( param, 'alphaToCoverage' ).onChange( function ( val ) {
+				gui.add( params, 'alphaToCoverage' ).onChange( function ( val ) {
 
 					matLine.alphaToCoverage = val;
 
 				} );
 
-				gui.add( param, 'threshold', 0, 10 ).onChange( function ( val ) {
+				gui.add( params, 'threshold', 0, 10 ).onChange( function ( val ) {
 
 					raycaster.params.Line2.threshold = val;
 					matThresholdLine.linewidth = matLine.linewidth + raycaster.params.Line2.threshold;
 
 				} );
 
+				gui.add( params, 'translation', 0, 10 ).onChange( function ( val ) {
+
+					line.position.x = val;
+					segments.position.x = val;
+
+				} );
+
+				gui.add( params, 'animate' );
+
 			}
 
 		</script>