Simplified webgl_lines_fat_raycasting.html (#25191)

* Simplified example

* Clean up

examples/webgl_lines_fat_raycasting.html

@@ -42,15 +42,13 @@
 			import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
 
 			let line, thresholdLine, segments, thresholdSegments;
-			let renderer, scene, camera, camera2, controls;
+			let renderer, scene, camera, controls;
 			let sphereInter, sphereOnLine;
 			let stats, gpuPanel;
 			let gui;
 			let clock;
 
-			// viewport
-			let insetWidth;
-			let insetHeight;
+			const color = new THREE.Color();
 
 			const pointer = new THREE.Vector2( Infinity, Infinity );
 
@@ -116,14 +114,11 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( - 40, 0, 60 );
 
-				camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
-				camera2.position.copy( camera.position );
-
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 500;
 
-				const sphereGeometry = new THREE.SphereGeometry( 0.25 );
+				const sphereGeometry = new THREE.SphereGeometry( 0.25, 8, 4 );
 				const sphereInterMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, depthTest: false } );
 				const sphereOnLineMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00, depthTest: false } );
 
@@ -200,6 +195,7 @@
 				geo.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				//
+
 				document.addEventListener( 'pointermove', onPointerMove );
 				window.addEventListener( 'resize', onWindowResize );
 				onWindowResize();
@@ -221,11 +217,9 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				insetWidth = window.innerHeight / 4; // square
-				insetHeight = window.innerHeight / 4;
-
-				camera2.aspect = insetWidth / insetHeight;
-				camera2.updateProjectionMatrix();
+				// renderer will set this eventually
+				matLine.resolution.set( window.innerWidth, window.innerHeight );
+				matThresholdLine.resolution.set( window.innerWidth, window.innerHeight );
 
 			}
 
@@ -242,8 +236,6 @@
 
 				stats.update();
 
-				// main scene
-
 				const delta = clock.getDelta();
 
 				const obj = line.visible ? line : segments;
@@ -254,35 +246,32 @@
 
 				if ( params.animate ) {
 
-					line.rotation.y += delta * 0.5;
-					segments.rotation.y += delta * 0.5;
-
-				}
+					line.rotation.y += delta * 0.1;
 
-				renderer.setClearColor( 0x000000, 0 );
+					segments.rotation.y = line.rotation.y;
 
-				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 intersects = raycaster.intersectObject( obj, true );
+				const intersects = raycaster.intersectObject( obj );
 
 				if ( intersects.length > 0 ) {
 
 					sphereInter.visible = true;
 					sphereOnLine.visible = true;
+
 					sphereInter.position.copy( intersects[ 0 ].point );
 					sphereOnLine.position.copy( intersects[ 0 ].pointOnLine );
-					const i = intersects[ 0 ].faceIndex;
+
+					const index = intersects[ 0 ].faceIndex;
 					const colors = obj.geometry.getAttribute( 'instanceColorStart' );
-					const color = new THREE.Color().setRGB( colors.getX( i ), colors.getY( i ), colors.getZ( i ) );
-					sphereInter.material.color.copy( color.clone().offsetHSL( 0.3, 0, 0 ) );
-					sphereOnLine.material.color.copy( color.clone().offsetHSL( 0.7, 0, 0 ) );
+
+					color.fromBufferAttribute( colors, index );
+
+					sphereInter.material.color.copy( color ).offsetHSL( 0.3, 0, 0 );
+					sphereOnLine.material.color.copy( color ).offsetHSL( 0.7, 0, 0 );
+
 					renderer.domElement.style.cursor = 'crosshair';
 
 				} else {
@@ -297,28 +286,6 @@
 				renderer.render( scene, camera );
 				gpuPanel.endQuery();
 
-				// inset scene
-
-				renderer.setClearColor( 0x222222, 1 );
-
-				renderer.clearDepth(); // important!
-
-				renderer.setScissorTest( true );
-
-				renderer.setScissor( 20, 20, insetWidth, insetHeight );
-
-				renderer.setViewport( 20, 20, insetWidth, insetHeight );
-
-				camera2.position.copy( camera.position );
-				camera2.quaternion.copy( camera.quaternion );
-
-				// renderer will set this eventually
-				matLine.resolution.set( insetWidth, insetHeight ); // resolution of the inset viewport
-
-				renderer.render( scene, camera2 );
-
-				renderer.setScissorTest( false );
-
 			}
 
 			//
@@ -363,6 +330,7 @@
 
 					matLine.worldUnits = val;
 					matLine.needsUpdate = true;
+
 					matThresholdLine.worldUnits = val;
 					matThresholdLine.needsUpdate = true;