【React Three Fiber】Reactで作る３D【#８3D Text Geomerty】

【#８3D Text Geomerty】

YouTube: https://youtu.be/CVbI1ar8Wnc

https://youtu.be/CVbI1ar8Wnc

今回は「@react-three/drei」の「Text3D」を使用して、
３Dのテキストオブジェクトを実装します。

こちらの実装にはフォントデータが必要になりますので、

https://fonts.google.com/specimen/Roboto

こちらからフォントデータをダウンロードします。
ダウンロードしたzipフォルダを解凍して、
「Roboto-Bold.ttf」こちらのファイルを使用します。

ただ、こちらのフォントファイルをそのまま読み込むことができませんので、

http://gero3.github.io/facetype.js/

こちらのサイトで「JSON形式」にコンバートします。

そしてコンバートした「Roboto_Bold.json」は
アプリ内の「public」フォルダに移動します。

ここまでできましたら、

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

src/components/GeoBox.tsx

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

const GeoText3d = () => {
  return (
    <Text3D
      position={[-2, 0, 0]}
      font="/Roboto_Bold.json"
      height={1}
      lineHeight={0.6}
      bevelEnabled
      bevelSize={0.05}
      bevelThickness={0.1}
    >
      {`Hello\nWorld`}
      <meshNormalMaterial />
    </Text3D>
  )
}

export default GeoText3d

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

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

export default App