3D scene environments using @react-three/drei


Moving on after Loading and manipulating a 3D model in react-three-fiber, I wanted to give my submarine an underwater environment. I used drei’s Environment component to start playing around with a few presets to get used to things.

Make the submarine appear in an ocean environment

For this, I bought an underwater HDRI scene, added it to the public directory, and then referenced it in App.js:

  return (
      <Menu handleColorChange={handleColorChange} />
      <Canvas dpr={[1, 2]} camera={{ fov: 75 }}>
        <Suspense fallback={null}>
          <Stage environment={null} intensity={1} contactShadowOpacity={0.1} shadowBias={-0.0015}>
              background={true} // Whether to affect scene.background
            <Submarine currentColor={currentColor} />
        <OrbitControls autoRotate enableZoom={true} enablePan={false} />

I also enabled zoom on the <OrbitControls /> component. Here’s what the scene looks like:

Pretty nice helpers come with drei. Here’s the branch on GitHub.