【React Three Fiber】Reactで作る３D【#１０useTexture】で演習した際の覚書き

※3:33あたりまでのコード

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}/>
    </Plane>
    </>
  )
}

export default GeoTexture

tatsuyashinsei

※最終

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

tatsuyashinsei