Apps WebApp

007-Web Box｜Grasshopper, Three.js, React Three Fiberでモデルをブラウザに展開する手順

Step1：GrasshopperでPython3を使ってBoxを作成する

以下のコードでBoxをモデリングします。

import Rhino.Geometry as rg

# 入力値を使ってボックスのサイズを決定
x_size = float(X)
y_size = float(Y)
z_size = float(Z)

# 原点からのボックスを作成
corner1 = rg.Point3d(-50, -50, -50)
corner2 = rg.Point3d(x_size, y_size, z_size)

box = rg.Box(rg.BoundingBox(corner1, corner2))

# 出力
Box = box

詳しくは以下の記事を参考にしてください。

Step2：Node.jsのインストール

Node.js のバージョン 18 以上をインストールします。以下の手順に従ってください。

  1. Node.js 公式ウェブサイトへアクセス
    Node.js 公式ウェブサイトにアクセスします。
  2. LTS バージョンをダウンロード
    LTS（Long Term Support）バージョンを選択し、インストーラをダウンロードします。Node.js 18 以上が推奨されています。
  3. インストールを実行
    ダウンロードしたインストーラを実行して、インストールを完了させます。

インストールが完了したら、CMD（コマンドプロンプト）で以下のコマンドを実行して、インストールされた Node.js のバージョンを確認できます。

node -v

また、npm（Node Package Manager）のバージョンも確認できます。

npm -v

以下はVolta を使って npm をアップグレードまたは再インストールする方法です。

すでにNode.jsをインストールしており、18系に切り替えたい場合の一助としてください。

Step3：Reactアプリケーション作成

React アプリケーションを作成します。

VSCode でターミナルを開き、以下のコマンドを実行してください。

npx create-react-app webbox
cd myapp
npm start

これでローカルサーバーが立ち上がり、http://localhost:3000 にアクセスすると、React のアイコンが表示されます。

サーバーを停止するには、Ctrl+Cを押します。

Step4：Three.js と React Three Fiber のインストール

次に、Three.js と React Three Fiber をインストールします。

npm install three @react-three/fiber

実行結果：

PS C:\Users\yumat\sekkeiya\0-1_Project\01_Top Secret Project\16_Web Box\webbox\webbox> npm install three @react-three/fiber　＃React Three Fiber をインストール

up to date, audited 1376 packages in 3s

266 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Step5：App.js の更新

App.js を以下のように編集して、基本的な 3D シーンを表示します。

import "./App.css";
import { Canvas } from "@react-three/fiber";

function App() {
  return (
    <>
      <Canvas style={{ width: "100vw", height: "100vh" }}>
        <mesh>
          <sphereGeometry />
          <meshNormalMaterial />
        </mesh>
      </Canvas>
    </>
  );
}

export default App;

以下のコマンドでサーバーを起動します。

npm start

これでブラウザに球体が表示されるはずです。

Step6：モデルを表示（React Three Fiber）

サーバーを停止（Ctrl+C）し、または新しいターミナルを開いて、以下のコマンドで必要なパッケージをインストールします。

npm install @react-three/drei

次に、public ディレクトリに model フォルダを作成し、その中に webbox.glb データを格納します。

App.js を以下のように変更します。

import "./App.css";
import { Canvas } from "@react-three/fiber";
import { useGLTF } from "@react-three/drei";

function App() {
  const model = useGLTF("/model/webbox.glb");

  return (
    <>
      <Canvas style={{ width: "100vw", height: "100vh" }}>
        <primitive object={model.scene} />
      </Canvas>
    </>
  );
}

export default App;

再度サーバーを起動するには、以下を実行します。

npm start

ブラウザにモデルが表示されますが、かなり遠い位置に表示されているため、カメラを調整してモデルが見える位置に変更します。

Step7：カメラ設定と調整

かなり遠い位置に表示されているので、Cameraを設定して調整します。

import "./App.css";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";

function App() {
  const model = useGLTF("/model/webbox.glb");

  return (
    <>
      <Canvas
        style={{ width: "100vw", height: "100vh", background: "#333" }}
        camera={{
          fov: 10,
          near: 0.1,
          far: 50,
          position: [0, 5, 10],
        }}
      >
        <directionalLight position={[5, 10, 0]} intensity={1.0} />
        <mesh castShadow>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="red" />
        </mesh>
        <OrbitControls makeDefault />
        <primitive object={model.scene} />
      </Canvas>
    </>
  );
}

export default App;

このコードでは、React アプリケーションで 3D モデルを表示し、カメラやオブジェクトを操作できるようにしています。

主に @react-three/fiber と @react-three/drei を使用しています。

マウスで自由に操作し、3D モデルを閲覧できます。

App.jsのコード解説

このコードは、React アプリケーションに 3D モデルを表示するためのものです。

@react-three/fiber を使って 3D シーンを描画し、@react-three/drei のコンポーネントを使って簡単にカメラの操作や GLTF モデルの読み込みを実現しています。

シーンには、GLTF モデル、立方体、ライトが含まれており、ユーザーはマウスでシーンを操作することができます。

インポート部分

import "./App.css";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";
  • ./App.css: アプリケーションのスタイルシートをインポートします。
  • Canvas は、React で 3D シーンを描画するためのコンポーネントです。@react-three/fiber ライブラリからインポートされています。
  • OrbitControls と useGLTF は @react-three/drei ライブラリからインポートされます。OrbitControls はカメラの操作を簡単に実現するためのコンポーネント、useGLTF は GLTF 形式の 3D モデルを読み込むためのカスタムフックです。

App コンポーネント

function App() {
  const model = useGLTF("/model/webbox.glb");
  • useGLTF("/model/webbox.glb"): webbox.glb という名前の GLTF 形式の 3D モデルを読み込みます。モデルのパスが /model/webbox.glb として指定されています。
  return (
    <>
      <Canvas
        style={{ width: "100vw", height: "100vh", background: "#333" }}
        camera={{
          fov: 10,
          near: 0.1,
          far: 50,
          position: [0, 5, 10],
        }}
      >
        <directionalLight position={[5, 10, 0]} intensity={1.0} />
  • <Canvas>: 3D シーンを描画するためのコンポーネントです。この中に 3D オブジェクトを配置します。
    • style={{ width: "100vw", height: "100vh", background: "#333" }}: キャンバスのスタイルを指定。画面全体を表示し、背景色をダークグレーに設定します。
    • camera: カメラの設定です。
      • fov: 視野角（Field of View）。ここでは 10 度に設定されています。
      • near と far: カメラが描画する範囲の近距離と遠距離を指定。
      • position: カメラの位置を [0, 5, 10] に設定しています（Y 軸に 5 の高さ、Z 軸に 10 の距離）。
        <directionalLight position={[5, 10, 0]} intensity={1.0} />
  • <directionalLight>: 方向光源をシーンに追加します。位置は [5, 10, 0] に設定され、強度は 1.0 です。方向光源は影を作るのに使われます。
        <mesh castShadow>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="red" />
        </mesh>
  • <mesh>: 3D メッシュをシーンに追加します。castShadow プロパティを true にすると、このメッシュが影を投げるようになります。
    • <boxGeometry args={[1, 1, 1]} />: 立方体の形状を作成します。引数 [1, 1, 1] は幅、高さ、奥行きが 1 の立方体です。
    • <meshStandardMaterial color="red" />: メッシュに標準的なマテリアルを適用し、色を赤に設定します。
        <OrbitControls makeDefault />
  • <OrbitControls>: このコンポーネントにより、マウス操作でシーンを回転・ズーム・移動できます。makeDefault は、最初に読み込まれたカメラに自動で適用されるオプションです。
        <primitive object={model.scene} />
      </Canvas>
    </>
  );
}
  • <primitive object={model.scene} />: useGLTF フックで読み込んだ 3D モデル（model.scene）をシーンに追加します。これにより、/model/webbox.glb のモデルが描画されます。

エクスポート部分

export default App;
  • App コンポーネントをエクスポートして、アプリケーションのエントリーポイントとして使用できるようにします。

まとめ

React アプリケーション内で 3D モデルを表示し、カメラの操作やモデルの操作が可能になります。

必要に応じて、さらにカスタマイズや拡張を行ってください。

-Apps, WebApp
-, , ,