"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>

Future Enhancements
In the next phase of "Gorgeous Spheres", I plan to implement audio export functionality, allowing users to download their unique compositions as shareable audio files. This feature will expand the project’s creative potential by providing users with tangible outputs from their interactive musical experience.