【React Three Fiber】Reactで作る３D【#９ThreeJs Materials】

【#９ThreeJs Materials】

YouTube: https://youtu.be/i0KIrRzA1nU

https://youtu.be/i0KIrRzA1nU

今回は公式のドキュメントの「Material」の解説と、
次回使用する３Dオブジェクトの準備をします。

https://threejs.org/

マテリアルを一通り確認しましたら、

https://svs.gsfc.nasa.gov/4720

こちらから月の画像を2枚ダウンロードして、
アプリ内の「public」フォルダに移動します。

ダウンロードする画像は「Color」と表示されている画像と、
「Displacement」と表示されている画像になります。

もし画像がダウンロードできない場合は、

https://polyhaven.com/

こちらのサイトからお好きなテクスチャをダウンロードする形でも大丈夫です。

ここまでできましたら、

「src」->「components」フォルダに「GeoTexture.tsx」を作成します。

そして球体と平面の３Dオブジェクトを用意します。

src/components/GeoTexture.tsx

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

const GeoTexture = () => {
  return (
    <>
      <Sphere position={[0, 0, 2]}>
        <meshStandardMaterial />
      </Sphere>
      <Plane args={[10, 10, 128, 128]}>
        <meshStandardMaterial side={DoubleSide} />
      </Plane>
    </>
  )
}

export default GeoTexture

こちらのファイルが作成できましたら、
「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'

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

export default App