🐙

【React Three Fiber】Reactで作る３D【#１1DisplacementScale】

2023/04/02に公開

React

Three.js

React Three Fiber

tech

【#１１DisplacementScale】

YouTube: https://youtu.be/mJqcgwiUTNE

https://youtu.be/mJqcgwiUTNE

今回は「displacementScale」を使用して、
平面の画像に立体感を持たせる処理と
３Dオブジェクトの「影」のつけ方について解説します。

src/components/GeoTexture.tsx

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

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

  const { displacementScale } = useControls({
    displacementScale: {
      value: 0,
      min: -2,
      max: 2,
      step: 0.1,
    },
  })

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

export default GeoTexture

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'

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 />
        <OrbitControls />
      </Canvas>
    </div>
  )
}

export default App

３Dオブジェクトに影をつけるには、

「Canvas」に「shadows」
「directionalLight」に「castShadow」
「Sphere」に「castShadow」
「Plane」に「receiveShadow」

を設定します。

【#１１DisplacementScale】

Discussion