2021-11-08.md

publish_date
2021-11-08

• Well i spent one half the day learning about raycasting in three.js then I got completley side tracked and forked cloud-to-butt and created web3-to-butt 😆

---

( Ok so did end up finishing the threejs journey on raycaster )

• Raycaster is a technique that can be used to pick up mouse clicks in a 3D space. it sort of works by shooting a direct line a.k.a vector.

• set up an raycaster with THREE.Raycaster();

• this little boilerplate let you hover over 3D object and "react' to the event

/**
* Animate
*/
const clock = new THREE.Clock();

const tick = () => {
 const elapsedTime = clock.getElapsedTime();
 raycaster.setFromCamera(mouse, camera);
 const objectsToTest = [object1, object2, object3];
 const intersects = raycaster.intersectObjects(objectsToTest);

 for (const intersect of intersects) {
   intersect.object.material.color.set("#0000ff");
 }

 for (const object of objectsToTest) {
   if (!intersects.find((intersect) => intersect.object === object)) {
     object.material.color.set("#ff0000");
   }
 }

 // Update controls
 controls.update();

 // Render
 renderer.render(scene, camera);

 // Call tick again on the next frame
 window.requestAnimationFrame(tick);
};

tick();

• mouse onclick events can also be intercepted here too but will require setting up another event listener.