"Gorgeous Spheres" is an interactive project utilizing react-three-fiber. I developed this project as an immersive and avant-garde way to create music with 3D objects. Clicking on the spheres triggers color changes and generates unique sounds, enhancing the visual and auditory experience.

I built the WebGL portion of this project with JavaScript, HTML, React, react-three-fiber, and react-three/drei. Sound functionality was added to the 3D scene with the useSound React hook.

Each 3D sphere mesh has its own ref and noise associated with it. When the user clicks a sphere, the sound is played and a new random color is assigned to the sphere. Here is a code snippet of a 3D sphere mesh:

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

In the upcoming phases of "Gorgeous Spheres", I aim to introduce a feature that will enable users to have the ability to download their audio compositions as audio files to their computer. This enhancement would provide users with a tangible and shareable output from their creative endeavors with this project.