WebGLでミラーボールを作るハンズオン(react-three-fiber + drei + TypeScript)

WebGLでミラーボールを作ってみます。ハンズオン的に全ての手順を説明します。
ツールとしてはreact-three-fiber + drei + TypeScript + create-react-appを使います。

本記事の想定読者

Web開発に詳しいが、3Dは詳しくない人向けです。

今回作成するもの

動くデモはこちら

解説

1. ３Dモデル作り

まずBlender(ここではバージョン2.92.0)を起動します。

立方体をクリックしてキーボードの「X(エックス)」を押下し、画面に表示された「削除」を押す。

Command + A (Windowsでは Ctrl + A) を押して「メッシュ」→「UV球」

球ができたら球をクリックし、以下の1→2をクリック

「メタリック」と「粗さ」を図のとおり設定する。

• メタリック: 0.926
• 粗さ: 0.074

モデルを.glb形式に変換する。「ファイル」→「エクスポート」→「glTF 2.0(.glb/.gltf)」と選択

名前を「ball.glb」と設定して、あとは何も変えずに「glTF2.0をエクスポート」を押す。

モデルはこれで完成となります。

2. 実装

ここから実装をしていきます。まずライブラリのインストールをします。

yarn create react-app my-app --template typescript  
yarn add three @react-three/fiber @types/three 
yarn add @react-three/drei

# そして開発サーバーの起動
cd my-app
yarn
yarn start

まず、3Dモデルを配置しておきます。srcディレクトリ直下に、先ほど作ったball.glbを入れます。

それではコードを修正していきます。

src/global.d.tsファイルを作成し、以下を書き込みます。
これにより、先ほど作った.glbファイルがTypeScriptから読み込めるようになります。

declare module "*.glb";

src/index.cssの先頭に以下のコードを追加します。
これはレイアウト調整のためです。

html,
body,
# root,
# root > div {
  height: 100%;
}

src/App.tsxを以下のコードに入れ替えます。
これにより、3Dモデルが読み込まれ、画面に表示されます。

import "./App.css";
import React, { Suspense } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { useGLTF, Environment, OrbitControls } from "@react-three/drei";
import modelPath from "./ball.glb";
import { GLTF } from "three/examples/jsm/loaders/GLTFLoader";

function Model() {
  const gltf = useGLTF(modelPath) as unknown as GLTF;
  useFrame(() => (gltf.scene.rotation.y += 0.002));
  return <primitive object={gltf.scene} />;
}
function App() {
  return (
    <div className="App">
      <Canvas>
        <OrbitControls />
        <color attach="background" args={[0x333353]} />
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Suspense fallback={null}>
          <Environment preset="studio" />
          <Model />
        </Suspense>
      </Canvas>
    </div>
  );
}

export default App;

以上です。

ソースコード

今回作ったものは以下にあります。うまく動かない場合参考にしてください。

確認環境

• Node.js v14.17.1
• Blender 2.92.0
• MacBook Pro (16-inch 2019)
• macOS Monterey 12.0.1