【React】react-three-fibarで3D表現をする（Blenderで作成したモデルの読み込み）

概要

Three.jsのReact用ライブラリ react-three-fibar を使用して、Blenderで作成した3Dモデルをブラウザ上で表示する方法をまとめました。

商品購入サイトでのプレビューとかに使えそうです。

• 本記事は、以下の記事をより丁寧に解説したものです。

• 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
• Blender － 2.93

以下のパッケージは、コントローラーを追加するために導入しています。（本題とはあまり関係ないです）

• material-ui/core － 4.12.3
• react-colorful － 5.4.0
• csx － 10.0.2
• valtio － 1.2.2

インストール

プロジェクトの作成
任意のプロジェクトフォルダを作成して、以下を実行します。

cmd

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

パッケージのインストール

cmd

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

Materialコントローラー用のパッケージのインストール（任意）

cmd

npm i @material-ui/core react-colorful csx valtio

Blenderモデルのコンバーター
Blenderモデルファイル(.glb)を、react-three-fiberで読み込むためのコンポーネントファイル(.tsx)を自動生成するツールです。

cmd

npm i -g gltfjsx

Blenderモデル

作成

今回はスプーンの3Dモデルを作成しました。

こちらの動画を元に作成しました。

モデルファイル（.glb）のエクスポート

エクスポートをする前に、
動画では、カメラやライト、床パネルなどスプーン以外の要素もあるので、コレクションを分けてスプーン以外を非表示にします。

以下の手順でモデルをエクスポートします。

エクスポート設定を以下のようにします。

Blenderモデルの読み込みコンポーネントの作成

gltfjsxを使って、Blenderモデルファイル（.glb）を読み込むためのコンポーネントファイルを生成します。

Blenderモデルファイル（model.glb）を保存したフォルダで、以下を実行します。

cmd

npx gltfjsx model.glb --types --shadows

--types：TypeScript対応にする（.tsx）
--shadows：読み込むモデルに影を適応する

実行すると、Model.tsxが作成されます。

このファイルは、あくまでBlenderモデルファイルを読み込むためのものです。
プロジェクトにはBlenderモデルファイル（.glb）も含める必要があります。

実装

ファイルが揃ったので実装していきます。

まず、Blenderモデルファイル（model.glb）をpublicフォルダ以下に置きます。

public/assets/model.glb

---

Spoon.tsx

Spoon.tsxでは、Threeのキャンバスを作成してモデルを読み込んでいます。

src/Spoon.tsx

import React, { Suspense, VFC } from 'react';
import { Environment, OrbitControls } from '@react-three/drei';
import { TCanvas } from '../TCanvas';
import { Model } from './Model';

export const Spoon: VFC = () => {
	return (
		<TCanvas>
			<OrbitControls enablePan={false} />

			<Suspense fallback={null}>
				<Model />
				<Environment preset="sunset" background />
			</Suspense>
		</TCanvas>
	)
}

• TCanvasは、Canvasをラップしたものです。実装についてはこちらを参照してください。

• OrbitControlsを追加すると、カメラの視点操作ができるようになります。enablePan={false}とすることで、平行移動はできないように制限しています。

• Modelコンポーネントの読み込みは、Suspenseタグ内で行います。

• Environmentを追加すると、背景を追加することができます。

---

Model.tsx

gltfjsxで作成したコンポーネントを配置します。

src/Model.tsx

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef, VFC } from 'react';
import * as THREE from 'three';
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
import { useGLTF } from '@react-three/drei';

const ModelPath = '/assets/model.glb'

type GLTFResult = GLTF & {
	nodes: {
		Sphere: THREE.Mesh
	}
	materials: {
		['Material.001']: THREE.MeshStandardMaterial
	}
}

export const Model: VFC<JSX.IntrinsicElements['group']> = props => {
	const group = useRef<THREE.Group>()
	const { nodes, materials } = useGLTF(ModelPath) as GLTFResult

	return (
		<group ref={group} {...props} dispose={null}>
			<mesh
				castShadow
				receiveShadow
				geometry={nodes.Sphere.geometry}
				material={materials['Material.001']}
				position={[-2, 2, 0]}
				rotation={[0, 0, -0.38]}
				scale={[1.39, 1, 1]}
			/>
		</group>
	)
}

useGLTF.preload(ModelPath)

• ModelPathは、Blenderモデルファイル（model.glb）のパスに直します。

• position、rotation、scaleは都度調整しましょう。

gltfjsxでコンポーネントを作成したときに影の設定を有効にしたので、castShadow、receiveShadowが追加されています。

ここまでで、以下のような表示になります。

コントローラーの実装

このままだと、作成した3Dモデルをただ表示するだけで味気ないので、色や質感を自由に変更できるようにします。
変更するのは、スプーンのMaterial（色、透明度、粗さ、光沢）とします。

---

使用するパッケージ

• 色と透明度の選択には、React Colorfulを使用します。

• 粗さ、光沢の選択には、Material UIのスライダーを使用します。

• 状態管理には、Valtioを使用します。

• 色の変換ユーティリティとして、csxを使用します。

---

状態管理

まず、スプーンのMaterialを保持するために、store.tsを作成します。

src/store.ts

import { color } from 'csx';
import { proxy } from 'valtio';
import { derive } from 'valtio/utils';

type MaterialState = {
	hexColor: string
	alpha: number
	roughness: number
	metalness: number
}

export const materialState = proxy<MaterialState>({
	hexColor: '#fff',
	alpha: 1,
	roughness: 0,
	metalness: 1
})

export const derivedMaterialState = derive({
	rgba: get => {
		const convertedColor = color(get(materialState).hexColor).fade(get(materialState).alpha)
		return {
			r: convertedColor.red(),
			g: convertedColor.green(),
			b: convertedColor.blue(),
			a: convertedColor.alpha()
		}
	}
})

• 初期値は、以下のように設定しています。

名前	値	説明
hexColor	#fff	白
alpha	1	不透明
roughness	0	粗さ無し
metalness	1	光沢最大

• derivedMaterialStateでは、hexColorとalphaを使ってrgbaオブジェクトを生成します。これは、React Colorfulに対応した値にするためです。

---

コントローラー

コントローラー部分を実装します。

src/Controller.tsx

import { rgb } from 'csx';
import React, { VFC } from 'react';
import { RgbaColor, RgbaColorPicker } from 'react-colorful';
import { useSnapshot } from 'valtio/';
import { css } from '@emotion/css';
import { makeStyles, Slider, Typography } from '@material-ui/core';
import { derivedMaterialState, materialState } from './store';

export const Controller: VFC = () => {
	return (
		<div className={styles.container}>
			<ColorPicker />

			<div className={styles.sliderContainer}>
				<Typography className={styles.text}>Roughness</Typography>
				<CustomSlider name="roughness" />
			</div>

			<div className={styles.sliderContainer}>
				<Typography className={styles.text}>Metalness</Typography>
				<CustomSlider name="metalness" />
			</div>
		</div>
	)
}

// ==============================================
const ColorPicker: VFC = () => {
	const derivedMaterialSnap = useSnapshot(derivedMaterialState)

	const changeHandler = (newColor: RgbaColor) => {
		materialState.hexColor = rgb(newColor.r, newColor.g, newColor.b).toHexString()
		materialState.alpha = newColor.a
	}

	return <RgbaColorPicker color={derivedMaterialSnap.rgba} onChange={changeHandler} />
}

// ==============================================
type CustomSliderProps = {
	name: 'roughness' | 'metalness'
}

const CustomSlider: VFC<CustomSliderProps> = ({ name }) => {
	const classes = useStyles()
	const materialSnap = useSnapshot(materialState)

	const valueChangeHandler = (e: React.ChangeEvent<{}>, value: number | number[]) => {
		if (name === 'roughness') {
			materialState.roughness = value as number
		} else if (name === 'metalness') {
			materialState.metalness = value as number
		}
	}

	return (
		<Slider
			className={classes.slider}
			aria-label={name}
			defaultValue={name === 'roughness' ? materialSnap.roughness : materialSnap.metalness}
			valueLabelDisplay="auto"
			step={0.1}
			marks
			min={0}
			max={1}
			onChange={valueChangeHandler}
		/>
	)
}

// ==============================================
const styles = {
	container: css`
		position: absolute;
		top: 20px;
		left: 20px;
		padding: 20px;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		display: flex;
		flex-direction: column;
	`,
	sliderContainer: css`
		margin-top: 30px;
		display: grid;
		grid-template-rows: auto auto;
		row-gap: 10px;
	`,
	text: css`
		color: white;
	`
}

const useStyles = makeStyles({
	slider: {
		color: 'orange'
	}
})

• ColorPickerでは、RgbaColorPickerを使用して透明度も設定できるようにします。値の受け渡しはrgbaのオブジェクト（RgbaColor）なので、適宜変換します。

---

モデルへ反映

設定した値をモデルへ反映させます。

src/Model.tsx

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef, VFC } from 'react';
import * as THREE from 'three';
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
import { useSnapshot } from 'valtio';
import { useGLTF } from '@react-three/drei';
import { materialState } from './store';

const ModelPath = '/assets/model.glb'

type GLTFResult = GLTF & {
	nodes: {
		Sphere: THREE.Mesh
	}
	materials: {
		['Material.001']: THREE.MeshStandardMaterial
	}
}

export const Model: VFC<JSX.IntrinsicElements['group']> = props => {
	const materialSnap = useSnapshot(materialState)

	const group = useRef<THREE.Group>()
	const { nodes, materials } = useGLTF(ModelPath) as GLTFResult

	const material = new THREE.MeshStandardMaterial({
		color: materialSnap.hexColor,
		roughness: materialSnap.roughness,
		metalness: materialSnap.metalness,
		opacity: materialSnap.alpha,
		transparent: true
	})

	return (
		<group ref={group} {...props} dispose={null}>
			<mesh
				castShadow
				receiveShadow
				geometry={nodes.Sphere.geometry}
				// material={materials['Material.001']}
				material={material}
				position={[-2, 2, 0]}
				rotation={[0, 0, -0.38]}
				scale={[1.39, 1, 1]}
			/>
		</group>
	)
}

useGLTF.preload(ModelPath)

• importしたmaterialは使用せずに、状態管理している値からmaterialを生成してそれをmeshに割り当てています。

---

コントローラーの有効化

コンポーネントを追加してコントローラーを使えるようにします。

src/Spoon.tsx

import React, { Suspense, VFC } from 'react';
import { css } from '@emotion/css';
import { Environment, OrbitControls } from '@react-three/drei';
import { TCanvas } from '../TCanvas';
import { Controller } from './Controller';
import { Model } from './Model';

export const Spoon: VFC = () => {
	return (
		<div className={styles.container}>
			<TCanvas>
				<OrbitControls enablePan={false} />

				<Suspense fallback={null}>
					<Model />
					<Environment preset="sunset" background />
				</Suspense>
			</TCanvas>

			<Controller /> {/* コントローラーを追加 */}
		</div>
	)
}

const styles = {
	container: css`
		position: relative;
		width: 100%;
		height: 100%;
	`
}

まとめ

基本形状（立方体とか球体など）を動かすだけじゃやっぱり単調なので、Blenderで作成したモデルで色々表現できると楽しいです。

おまけ

環境ファイルの設定

Spoon.tsxに追加したEnvironmentタグでは、プリセットの他に自分で用意したファイルを使うこともできます。

src/Spoon.tsx

export const Spoon: VFC = () => {
	return (
		<div className={styles.container}>
			<TCanvas>
				<OrbitControls enablePan={false} />

				<Suspense fallback={null}>
					<Model />
					{/* <Environment preset="sunset" background /> */}
					<Environment files="/assets/comfy_cafe_2k.hdr" background />
				</Suspense>
			</TCanvas>

			<Controller />
		</div>
	)
}

環境ファイル（.hdr）は、以下からダウンロードできます。