feat: add hover interaction

vanilla/main.js

@@ -33,6 +33,15 @@ const cube2 = new THREE.Mesh(geometry, material2)
 cube2.position.x = 1.2
 scene.add(cube2)
 
+const cubes = [cube1, cube2]
+const raycaster = new THREE.Raycaster()
+const mouse = new THREE.Vector2()
+
+window.addEventListener('pointermove', (event) => {
+  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
+  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
+})
+
 function animate() {
   requestAnimationFrame(animate)
 
@@ -42,6 +51,16 @@ function animate() {
   cube2.rotation.x += 0.01
   cube2.rotation.y += 0.01
 
+  raycaster.setFromCamera(mouse, camera)
+  const intersects = raycaster.intersectObjects(cubes)
+
+  cube1.material.color.set('orange')
+  cube2.material.color.set('orange')
+
+  if (intersects.length > 0) {
+    intersects[0].object.material.color.set('hotpink')
+  }
+
   controls.update()
   renderer.render(scene, camera)
 }