React Three Fiberとは？

React Three Fiberを使用すると、Reactのコンポーネントを利用してThree.jsの3Dシーンを簡単に作成できます。ここでは、React Three Fiberを使用して、シンプルな立方体（キューブ）を表示するシーンを作成する手順を説明します。

1. プロジェクトのセットアップ

まず、Reactプロジェクトを作成し、React Three FiberとThree.jsをインストールします。以下のコマンドを実行して、プロジェクトをセットアップします。

npx create-react-app my-three-fiber-app
cd my-three-fiber-app
npm install @react-three/fiber three

2. 基本的なシーンの作成

App.jsファイルを編集して、React Three Fiberを使用した基本的なシーンを作成します。ここでは、シンプルな立方体を表示するシーンを作成します。

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

function Box() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

function App() {
  return (
    <Canvas style={{ height: '100vh', backgroundColor: '#282c34' }}>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
      <pointLight position={[-10, -10, -10]} />
      <Box />
      <OrbitControls />
    </Canvas>
  );
}

export default App;

3. コードの解説

Canvas: React Three FiberでThree.jsのレンダリングを行うコンテナコンポーネントです。このコンポーネントの中に3Dシーンの要素を配置します。
Box: 立方体（キューブ）を表現するためのカスタムコンポーネントです。mesh要素を使ってジオメトリとマテリアルを定義しています。
- boxGeometry: 立方体の形状を定義するジオメトリです。argsプロパティで幅・高さ・奥行きを指定します。
- meshStandardMaterial: 立方体に適用するマテリアルを定義しています。ここでは色をオレンジに設定しています。
ambientLightとspotLight: シーン全体を照らすライトを追加しています。ambientLightは全体的な光、spotLightは特定の方向からの光を提供します。
OrbitControls: マウスでシーン内のカメラを操作できるようにするためのコンポーネントです。これにより、立方体を自由に回転させたりズームしたりできます。