【React Three Fiber】Reactで作る３D【#１０useTexture】

【#１０useTexture】

YouTube: https://youtu.be/c66t0IZbos4

https://youtu.be/c66t0IZbos4

今回は「@react-three/drei」の「useTexture」を使用して、
前回作成した３Dオブジェクトにテクスチャを貼り付けていきます。

もし、「月」の画像がダウンロードできない場合は、
こちらのサイトからお好きなテクスチャをダウンロードしても大丈夫です。

https://polyhaven.com/

通常の画像のほかに、「displacement」用の画像が必要になります。

動画内のコードの「dispalcementMap」はスペルミスになります。
正しくは「displacementMap」になります。
こちらは次回の動画で修正しています。

src/components/GeoTexture.tsx

import { Plane, Sphere, useTexture } from '@react-three/drei'
import { DoubleSide } from 'three'

const GeoTexture = () => {
  const moonTexture = useTexture({
    map: '/lroc_color_poles_1k.jpg',
    displacementMap: '/ldem_3_8bit.jpg',
  })

  return (
    <>
      <Sphere position={[0, 0, 2]}>
        <meshStandardMaterial map={moonTexture.map} />
      </Sphere>
      <Plane args={[10, 10, 128, 128]}>
        <meshStandardMaterial side={DoubleSide} {...moonTexture} transparent />
      </Plane>
    </>
  )
}

export default GeoTexture

「useTexture」の引数で設定しているオブジェクトは、
「material」のpropsに渡せる値になります。