【React Three Fiber】Reactで作る３D【#１２Environment Map】

【#１２Environment Map】

YouTube:https://youtu.be/e_QieBSPkvU

https://youtu.be/e_QieBSPkvU

今回は「HDR」の画像を使用して、
背景にパノラマ風の画像を設定する方法について解説します。

https://polyhaven.com/

こちらのサイトから「HDRIs」のリンクをクリックして
素材の一覧ページから画像をダウンロードをします。

ダウンロードする際には「EXR」ではなく「HDR」の画像を選択してください。

ここまでできましたら、
「src」->「components」フォルダに「GeoEnv.tsx」を作成します。

そして、「@react-three/drei」から「useEnvironment」をインポートして、
こちらにダウンロードした画像のパスを設定します。

さらに、「@react-three/drei」から
「Environment」コンポーネントをインポートして、
こちらのmapに上記で設定した値を渡します。

src/components/GeoEnv.tsx

import { Environment, Sphere, useEnvironment } from '@react-three/drei'

const GeoEnv = () => {
  const envMap = useEnvironment({
    files: '/hdr/limpopo_golf_course_4k.hdr',
  })

  return (
    <>
      <Environment map={envMap} background />
      <Sphere>
        <meshStandardMaterial />
      </Sphere>
    </>
  )
}

export default GeoEnv

ここまでできましたら、
App.tsxで上記のコンポーネントを設定します。

src/App.tsx

import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import GeoBox from './components/GeoBox'
import GeoText from './components/GeoText'
import GeoText3d from './components/GeoText3d'
import GeoTexture from './components/GeoTexture'
import GeoEnv from './components/GeoEnv'

function App() {
  return (
    <div className="w-full h-screen">
      <Canvas shadows>
        <ambientLight intensity={0.1} />
        <directionalLight position={[0, 0, 5]} castShadow />
        {/* <GeoBox /> */}
        {/* <GeoText /> */}
        {/* <GeoText3d /> */}
        {/* <GeoTexture /> */}
        <GeoEnv />
        <OrbitControls />
      </Canvas>
    </div>
  )
}

export default App