概要

Three.jsのReact用ライブラリ react-three-fibar を使用して、文字の表示方法を3パターン実装します。

パッケージのバージョンやインストール方法は、以下を参照してください。

実装

立体感のある文字

厚みのある文字です。Boxオブジェクトなどと同様に影を落としたりできます。

.tsx

import React, { VFC } from 'react';
import { FontLoader, TextGeometry } from 'three';
import threeFontJson from 'three/examples/fonts/helvetiker_bold.typeface.json';
import { OrbitControls } from '@react-three/drei';
import { TDirectionalLight } from './objects/TDirectionalLight';
import { TFloorPlane } from './objects/TFloorPlane';
import { TCanvas } from './TCanvas';

export const Text1: VFC = () => {
	return (
		<TCanvas>
			<OrbitControls />
			<TDirectionalLight position={[-1, 3, 5]} />

			<TextObject text="Hello! Three.js" />

			<TFloorPlane />
		</TCanvas>
	)
}

// ----------------------------------------------
const TextObject: VFC<{ text: string }> = ({ text }) => {
	// 位置の調整
	const textGeo = new TextGeometry(text, {
		font: new FontLoader().parse(threeFontJson),
		size: 1,
		height: 0.1
	})
	textGeo.computeBoundingBox()
	const centerOffset = -(textGeo.boundingBox!.max.x - textGeo.boundingBox!.min.x) / 2

	return (
		<mesh position={[centerOffset, 1, 0]} args={[textGeo]} castShadow receiveShadow>
			{/* <textGeometry args={['Hello! Three.js', config]} /> */}
			<meshPhongMaterial color="royalblue" />
		</mesh>
	)
}

TCanvas、TDirectionalLight、TFloorPlaneは、それぞれreact-three-fiberのCanvas、directionalLight、planeGeometryをラップしたコンポーネントです。
実装の詳細は、おまけ載せています。

テキストの表示位置の調整のために、TextGeometryのインスタンスを作成して、それを使ってオフセットを割り出しています。
[x, y] = [0, 0]の位置がテキストの左・下になっているので、オフセットを使用して中心・下に調整します。
この調整が必要ない場合は、コメントアウトしているtextGeometryが使えます。

元ネタ

平面な文字

厚みのない平面な文字です。

.tsx

import { loremIpsum } from 'lorem-ipsum';
import React, { VFC } from 'react';
import { Text } from '@react-three/drei';
import { useRotate } from './hooks/useRotate';
import { TCanvas } from './TCanvas';

export const Text2: VFC = () => {
	const lorem = loremIpsum({ count: 6 })

	return (
		<TCanvas position={[0, 0, 10]}>
			<TextObject text={lorem} />
		</TCanvas>
	)
}

// ----------------------------------------------
const TextObject: VFC<{ text: string }> = ({ text }) => {
	const textRef = useRotate([0, 0.1, 0])

	return (
		<Text
			ref={textRef}
			color="#24ACF2"
			fontSize={0.5}
			maxWidth={10}
			lineHeight={1}
			letterSpacing={0.02}
			textAlign={'left'}
			font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
			anchorX="center"
			anchorY="middle">
			{text}
		</Text>
	)
}

useRotateは、オブジェクトをフレーム単位で回転させるためのカスタムフックです。
実装の詳細は、おまけ載せています。

元ネタ

オブジェクトに追従する文字

オブジェクトに追従して、常に前面を向いている文字です。
また、カメラとオブジェクトの距離によって文字サイズも変化します。

.tsx

import React, { VFC } from 'react';
import { css } from '@emotion/css';
import { Html, OrbitControls } from '@react-three/drei';
import { useRotate } from './hooks/useRotate';
import { TDirectionalLight } from './objects/TDirectionalLight';
import { TFloorPlane } from './objects/TFloorPlane';
import { TCanvas } from './TCanvas';

export const Text3: VFC = () => {
	return (
		<TCanvas>
			<OrbitControls />
			<TDirectionalLight position={[5, 5, 5]} />

			<CubeWithText text="Hello! Three.js" />

			<TFloorPlane />
		</TCanvas>
	)
}

// ----------------------------------------------

const CubeWithText: VFC<{ text: string }> = ({ text }) => {
	const ref = useRotate()
	const groupRef = useRotate([0, 0.5, 0])

	return (
		<group ref={groupRef}>
			<mesh ref={ref} position={[2, 2, 2]} castShadow>
				<boxGeometry args={[1, 1, 1]} />
				<meshPhongMaterial color="royalblue" />
				<Html className={styles.text} center distanceFactor={10}>
					{text}
				</Html>
			</mesh>
		</group>
	)
}

const styles = {
	text: css`
		white-space: nowrap;
		font-size: 2rem;
		color: red;
		margin-top: 100px;
		user-select: none;
	`
}

meshに回転アニメーションのrefを追加すると、そのオブジェクトが回転（自転）します。
meshをgroupで囲って、そのgroupに回転アニメーションのrefを追加すると、そのオブジェクトが中心軸まわりに回転（公転）します。

元ネタ

まとめ

文字の扱い方についてまとめました。（実装はほぼコピーですが...）
また違う表現方法を見つけたら追加します。

おまけ

TCanvas

Canvasのラッパーコンポーネントです。

.tsx

import React, { VFC } from 'react';
import { css } from '@emotion/css';
import { Canvas } from '@react-three/fiber';

type Props = {
	children: React.ReactNode
	fov?: number
	position?: [number, number, number]
}

export const TCanvas: VFC<Props> = props => {
	const { children, fov = 50, position = [0, 3, 10] } = props
	return (
		<Canvas className={styles.canvas} camera={{ fov, position }} dpr={[1, 2]} shadows>
			{children}
		</Canvas>
	)
}

const styles = {
	canvas: css`
		width: 100%;
		height: 100%;
	`
}

TDirectionalLight

光源です。オプションでHelperを表示することができます。

.tsx

import React, { useRef, VFC } from 'react';
import { DirectionalLightHelper } from 'three';
import { useHelper } from '@react-three/drei';

type Props = {
	position: [number, number, number]
	isHelper?: boolean
}

export const TDirectionalLight: VFC<Props> = props => {
	const { position, isHelper = false } = props

	const lightRef = useRef()
	useHelper(lightRef, DirectionalLightHelper)

	return (
		<>
			{isHelper ? (
				<directionalLight
					ref={lightRef}
					position={position}
					intensity={1} // 光の強さ
					shadow-mapSize-width={2048} // 描画精度
					shadow-mapSize-height={2048}
					castShadow
				/>
			) : (
				<directionalLight
					position={position}
					intensity={1} // 光の強さ
					shadow-mapSize-width={2048} // 描画精度
					shadow-mapSize-height={2048}
					castShadow
				/>
			)}
		</>
	)
}

TFloorPlane

床パネルです。

.tsx

import React, { VFC } from 'react';
import { DoubleSide } from 'three';

type Props = {
	size?: [number, number]
	color?: string
	isGridHelper?: boolean
}

export const TFloorPlane: VFC<Props> = props => {
	const { size = [10, 10], color = 'white', isGridHelper = false } = props

	return (
		<>
			<mesh position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
				<planeGeometry args={size} />
				<meshPhongMaterial color={color} side={DoubleSide} />
			</mesh>

			{isGridHelper && (
				<gridHelper position={[0, 0.01, 0]} args={[size[0], size[0], 'red', 'black']} />
			)}
		</>
	)
}

useRotate

オブジェクトを回転させるためのカスタムフックです。

.tsx

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

export const useRotate = (speed = [1, 1, 1]) => {
	const ref = useRef<any>(null)
	useFrame(({ clock }) => {
		const a = clock.getElapsedTime()
		ref.current.rotation.x = a * speed[0]
		ref.current.rotation.y = a * speed[1]
		ref.current.rotation.z = a * speed[2]
	})
	return ref
}