From 2c78c867d66e7a06b3cce08670169e3bb6fe327d Mon Sep 17 00:00:00 2001
From: divyap <divyapahuja31@gmail.com>
Date: Wed, 18 Mar 2026 11:55:55 +0530
Subject: [PATCH] feat: add hover interaction

---
 vanilla/main.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/vanilla/main.js b/vanilla/main.js
index b9764db..c2a0b36 100644
--- a/vanilla/main.js
+++ b/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)
 }