【React Three Fiber】Reactで作る３D【#７Geometries】

【#７Geometries】

YouTube: https://youtu.be/xCb_9ScgZ4E

https://youtu.be/xCb_9ScgZ4E

今回は「Geometry」について公式ページのサンプルを見ていきます。

https://threejs.org/

こちらのサンプルには「テキスト」の３Dのサンプルがありませんので、
実際にコードを書いて実装していきます。

今回の動画では「平面」の「テキスト」を実装しています。

まずは、「src」->「components」フォルダに
「GeoText.tsx」というファイルを作成します。

src/components/GeoBox.tsx

import { Text } from '@react-three/drei'

const GeoText = () => {
  return (
    <Text>
      <meshBasicMaterial color={'red'} />
      Hello
    </Text>
  )
}

export default GeoText

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

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

export default App