an interactive 3D experience
"Gorgeous Spheres" is an interactive, WebGL-powered music experience built with React Three Fiber. This avant-garde project allows users to generate music dynamically by interacting with 3D spheres. Clicking on a sphere triggers a unique sound while changing its color.
The WebGL functionality is implemented using JavaScript, HTML, React, react-three-fiber, and react-three/drei, while sound integration is handled with the useSound React hook. Each sphere is assigned its own reference and an associated sound, ensuring a distinct response to user interaction.
Here’s a snippet of how a 3D sphere mesh is defined:
<mesh
ref={sphere3}
onClick={(evt) => {
sphereHandler(evt);
play3();
}}
onContextMenu={sphereHandler}
position={[2.2, 1, -5]}
scale={1.2}
onPointerEnter={(e) => (document.body.style.cursor = "pointer")}
onPointerLeave={(e) => (document.body.style.cursor = "auto")}
>
<sphereGeometry />
<meshStandardMaterial color="#FFBFC3" map={randomItem(normalArray)} />
</mesh>