Examples: Clean up webgl_instancing_raycast.html (#23000)

* Clean up

* Updated screenshot

Author: WestLangley

examples/screenshots/webgl_instancing_raycast.jpg

@@ -15,7 +15,7 @@
 			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from "./jsm/controls/OrbitControls.js";
 
-			let camera, scene, renderer, stats;
+			let camera, scene, renderer, controls, stats;
 
 			let mesh;
 			const amount = parseInt( window.location.search.substr( 1 ) ) || 10;
@@ -25,6 +25,7 @@
 			const mouse = new THREE.Vector2( 1, 1 );
 
 			const color = new THREE.Color();
+			const white = new THREE.Color().setHex( 0xffffff );
 
 			init();
 			animate();
@@ -37,16 +38,12 @@
 
 				scene = new THREE.Scene();
 
-				const light1 = new THREE.HemisphereLight( 0xffffff, 0x000088 );
-				light1.position.set( - 1, 1.5, 1 );
-				scene.add( light1 );
-
-				const light2 = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 );
-				light2.position.set( - 1, - 1.5, - 1 );
-				scene.add( light2 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0x888888 );
+				light.position.set( 0, 1, 0 );
+				scene.add( light );
 
 				const geometry = new THREE.IcosahedronGeometry( 0.5, 3 );
-				const material = new THREE.MeshPhongMaterial();
+				const material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
 
 				mesh = new THREE.InstancedMesh( geometry, material, count );
 
@@ -86,7 +83,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				new OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.enableDamping = true;
+				controls.enableZoom = false;
+				controls.enablePan = false;
 
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
@@ -118,11 +118,7 @@
 
 				requestAnimationFrame( animate );
 
-				render();
-
-			}
-
-			function render() {
+				controls.update();
 
 				raycaster.setFromCamera( mouse, camera );
 
@@ -132,17 +128,30 @@
 
 					const instanceId = intersection[ 0 ].instanceId;
 
-					mesh.setColorAt( instanceId, color.setHex( Math.random() * 0xffffff ) );
-					mesh.instanceColor.needsUpdate = true;
+					mesh.getColorAt( instanceId, color );
+
+					if ( color.equals( white ) ) {
+
+						mesh.setColorAt( instanceId, color.setHex( Math.random() * 0xffffff ) );
+
+						mesh.instanceColor.needsUpdate = true;
+
+					}
 
 				}
 
-				renderer.render( scene, camera );
+				render();
 
 				stats.update();
 
 			}
 
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
 		</script>
 	</body>
 </html>