概要

Three.jsのReact用ライブラリ react-three-fibar を使用して、簡単な3D表現を実装します。

公式ドキュメント

react-three-fibarは、Three.jsのReact用パッケージで、ほぼ100％の互換性があります。
Three.jsのドキュメントはかなり充実しているので、react-three-fibarのドキュメントに載っていないことがあれば、そちらを参照しましょう。

環境

react － 17.0.2
typescript － 4.4.3
three － 0.132.2
react-three/fiber － 7.0.7
react-three/drei － 7.8.2

インストール

いつものように、プロジェクトフォルダを用意してcreate-react-appでプロジェクトを作成します。

cmd

npx create-react-app . --template typescript --use-npm

必要なパッケージをインストールします。

cmd

npm i three @react-three/fiber @react-three/drei
npm i -D @types/three

react-three/dreiは、react-three-fiberに対して便利なヘルパー関数を提供します。

実装

キャンバスの作成・オブジェクトの配置

.tsx

import React, { VFC } from 'react';
import { DoubleSide } from 'three';
import { OrbitControls } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';

export const ThreeDemo: VFC = () => {
	return (
		<Canvas camera={{ fov: 50, position: [0, 3, 10] }}>
			<Contents />
		</Canvas>
	)
}

const Contents: VFC = () => {
	return (
		<>
			{/* control */}
			<OrbitControls />

			{/* light */}
			<directionalLight position={[5, 5, 5]} />

			{/* box 1 */}
			<mesh position={[0, 2, 0]}>
				<boxGeometry args={[1, 1, 1]} />
				<meshPhongMaterial color="blue" />
			</mesh>

			{/* box 2 */}
			<mesh position={[1, 3, 2]} scale={0.5}>
				<boxGeometry args={[1, 1, 1]} />
				<meshPhongMaterial color="red" />
			</mesh>

			{/* floor */}
			<mesh position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
				<planeGeometry args={[10, 10]} />
				<meshStandardMaterial color="#E5E5E5" side={DoubleSide} />
			</mesh>
		</>
	)
}

Canvas

視野角（fov）やカメラ位置（position）を設定します。ほかに背景色やDPRなどを設定できます。

OrbitControls

このコンポーネントを追加すると、マウスでカメラの回転、移動、ズームを行うことができます。
どれかしらの機能だけを使う/使わないの設定もできます。

directionalLight

ライトです。位置や強さ、色などを設定することができます。

オブジェクト

geometryではオブジェクトの形状を、materialでは色や材質を定義します。
それをmeshタグで囲います。meshでは、オブジェクトの位置や回転を定義します。

.tsx

<mesh position={[0, 2, 0]}>
	<boxGeometry args={[1, 1, 1]} />
	<meshPhongMaterial color="blue" />
</mesh>

実装例では、Contentsコンポーネントを作成してCanvasタグの中で参照しています。
これは意図的にやっていて、Canvas内のコンポーネントでしか使用できないカスタムフックがあるためです。（後ほど紹介しています）

影

オブジェクト間に落ちる影も簡単に実装することができます。

.tsx

import React, { VFC } from 'react';
import { DoubleSide } from 'three';
import { OrbitControls } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';

export const ThreeDemo: VFC = () => {
	return (
		<Canvas camera={{ fov: 50, position: [0, 3, 10] }} shadows>
			<Contents />
		</Canvas>
	)
}

const Contents: VFC = () => {
	return (
		<>
			{/* control */}
			<OrbitControls />

			{/* light */}
			<directionalLight
				position={[5, 5, 5]}
				intensity={1} // 光の強さ
				shadow-mapSize-width={2048} // 描画精度
				shadow-mapSize-height={2048}
				castShadow
			/>

			{/* box 1 */}
			<mesh position={[0, 2, 0]} castShadow receiveShadow>
				<boxGeometry args={[1, 1, 1]} />
				<meshPhongMaterial color="blue" />
			</mesh>

			{/* box 2 */}
			<mesh position={[1, 3, 2]} scale={0.5} castShadow receiveShadow>
				<boxGeometry args={[1, 1, 1]} />
				<meshPhongMaterial color="red" />
			</mesh>

			{/* floor */}
			<mesh position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
				<planeGeometry args={[10, 10]} />
				<meshStandardMaterial color="#E5E5E5" side={DoubleSide} />
			</mesh>
		</>
	)
}

影を入れるためには、まずCanvasにshadowsプロパティを追加します。

次に、lightやオブジェクトに、castShadow・receiveShadowを追加します。
castShadowは、それが影を他に落とすかの設定です。receiveShadowは、それが影を受けるかの設定です。
例えば、directionalLightは、影を他に落とすけど自分自身は影を受けないので、castShadowだけ設定します。boxオブジェクトは、影を他に落とすし自分自身も影を受けるので、castShadow・receiveShadowどちらも設定しています。

このため、Box1にはBox2の影が落ちていて、Box1自身も床に影を落としています。

影の解像度が低いときは、lightのshadow-mapSize-width・shadow-mapSize-heightで調整します。

オブジェクトの回転

.tsx

import React, { useRef, VFC } from 'react';
import { DoubleSide } from 'three';
import { OrbitControls } from '@react-three/drei';
import { Canvas, useFrame } from '@react-three/fiber';

export const ThreeDemo: VFC = () => {
	return (
		<Canvas camera={{ fov: 50, position: [0, 3, 10] }} shadows>
			<Contents />
		</Canvas>
	)
}

const Contents: VFC = () => {
	const boxRef = useRef<any>(null)

	useFrame(({ clock }) => {
		const a = clock.getElapsedTime()
		boxRef.current.rotation.x = a * 1
		boxRef.current.rotation.y = a * 1
		boxRef.current.rotation.z = a * 0
	})

	return (
		<>
			{/* control */}
			・・・

			{/* light */}
			・・・

			{/* box 1 */}
			<mesh ref={boxRef} position={[0, 2, 0]} castShadow receiveShadow>
				<boxGeometry args={[1, 1, 1]} />
				<meshPhongMaterial color="blue" />
			</mesh>

			{/* box 2 */}
			<mesh position={[1, 3, 2]} scale={0.5} castShadow receiveShadow>
				<boxGeometry args={[1, 1, 1]} />
				<meshPhongMaterial color="red" />
			</mesh>

			{/* floor */}
			・・・
		</>
	)
}

フレームアニメーションは、useFrameを使うことで実装できます。
Box1のmeshにboxRefを指定することで、Box1が回転します。

useFrameは、Canvas内のコンポーネントでのみ使用できます。

ヘルパーオブジェクト

Three.jsには、グリッドやライトを視覚化するためのヘルパーオブジェクトが用意されています。

.tsx

import React, { useRef, VFC } from 'react';
import { DirectionalLightHelper, DoubleSide } from 'three';
import { OrbitControls, useHelper } from '@react-three/drei';
import { Canvas, useFrame } from '@react-three/fiber';

export const ThreeDemo: VFC = () => {
	return (
		<Canvas camera={{ fov: 50, position: [0, 3, 10] }} shadows>
			<Contents />
		</Canvas>
	)
}

const Contents: VFC = () => {
	const lightRef = useRef()
	useHelper(lightRef, DirectionalLightHelper)

	・・・

	return (
		<>
			{/* control */}
			・・・

			{/* light */}
			<directionalLight
				ref={lightRef}
				position={[5, 5, 5]}
				intensity={1} // 光の強さ
				shadow-mapSize-width={2048} // 描画精度
				shadow-mapSize-height={2048}
				castShadow
			/>

			{/* box 1 */}
			・・・

			{/* box 2 */}
			・・・

			{/* floor */}
			・・・

			{/* grid */}
			<gridHelper position={[0, 0.01, 0]} args={[10, 10, 'red', '#4C4C4C']} />
		</>
	)
}

DirectionalLightHelper

lightRef をdirectionalLightのプロパティに追加することで、ライトを可視化します。
ヘルパーの生成には、useHelperを使用します。

useHelperは、Canvas内のコンポーネントでのみ使用できます。

gridHelper

argsでは、[大きさ, 分割数, 真ん中の線の色, 全体の線の色]を指定しています。

まとめ

react-three-fiberを使うと、簡単に動く3D表現ができてとても楽しいです。
ですが、Three.jsのラッパーパッケージなので、Three.jsでの情報はあってもreact-three-fiberの情報がなかなかないです...

実装例は、CodeSandBoxを参照するといいと思います。