🐥

【React Three Fiber】Reactで作る３D【#１３Background Reflect】

2023/04/04に公開

React

Three.js

React Three Fiber

tech

【#１３Background Reflect】

YouTube:https://youtu.be/b3w-_qBMxCk

https://youtu.be/b3w-_qBMxCk

今回は、球体のオブジェクトに背景を反射させる設定について解説します。

現時点で球体は背景を反射している状態なのですが、
マテリアルのデフォルトの設定で反射しているのが
分かりにくい状態となっています。

そこで、球体のマテリアルのpropsに
「metalness={1} roughness={0}」
こちらの値を追加します。

こちらは鉄の質感を与えて、
粗さをゼロにすることで鏡のような質感にすることができます。

そして、球体のオブジェクトに新しく作成したオブジェクトを反射させるためには、
「CubeCamera」を使用します。

src/components/GeoEnv.tsx

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

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

  return (
    <>
      <Environment map={envMap} background />
      <CubeCamera>
        {/*@ts-ignore */}
        {(texture) => (
          <>
            <Environment map={texture} />
            <Sphere>
              <meshStandardMaterial metalness={1} roughness={0} />
            </Sphere>
          </>
        )}
      </CubeCamera>
      <Sphere scale={0.5} position={[1.5, 1.5, 1.5]}>
        <meshNormalMaterial />
      </Sphere>
    </>
  )
}

export default GeoEnv

【#１３Background Reflect】

Discussion