Next.jsでReact-Three-Fiberを使用する方法と便利な機能

Next.jsは、サーバーサイドレンダリングや静的サイト生成が可能なReactベースのフレームワークで、パフォーマンスの高いウェブサイトを構築するのに適しています。一方、React-Three-FiberはThree.jsをReactのコンポーネントとして使用できるライブラリで、3Dグラフィックスを簡単に実装できます。

この記事では、Next.jsでReact-Three-Fiberを設定する方法を詳しく説明します。さらに、React-Three-Fiberの便利な機能についても触れます。

セットアップ手順

1. Next.jsプロジェクトを作成

まずはNext.jsのプロジェクトを作成します。

npx create-next-app@latest my-threejs-app
cd my-threejs-app

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

npm install @react-three/fiber @react-three/drei three

2. ページを作成

React-Three-Fiberを使うページを作成します。pages/index.jsを編集します。

// pages/index.js
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Box } from '@react-three/drei';

export default function Home() {
  return (
    <div style={{ height: '100vh' }}>
      <Canvas camera={{ position: [0, 0, 5] }}>
        {/* ライト */}
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        
        {/* 3Dオブジェクト */}
        <Box>
          <meshStandardMaterial attach="material" color="orange" />
        </Box>

        {/* カメラ操作 */}
        <OrbitControls />
      </Canvas>
    </div>
  );
}

上記コードでは、@react-three/dreiの便利な機能を使用し、**カメラの操作（OrbitControls）や立方体の描画（Box）**を行っています。

React-Three-Fiberの便利な機能

React-Three-FiberとNext.jsを組み合わせると、以下のような便利な機能を活用できます。

1. サーバーサイドレンダリング（SSR）との相性

Next.jsの特長であるSSRを活用すれば、SEOに強い3Dサイトが作成可能です。ただし、Three.jsはクライアントサイドでのレンダリングが主なので、以下のようにdynamicを使ってクライアントサイドでのみレンダリングさせます。

import dynamic from 'next/dynamic';

const ThreeCanvas = dynamic(() => import('../components/ThreeCanvas'), { ssr: false });

export default function Home() {
  return <ThreeCanvas />;
}

components/ThreeCanvas.jsにCanvasを分けて記述することで、クライアントサイドで効率的に動作します。

2. インタラクティブな3Dモデル

@react-three/dreiを使えば、GLTF/GLB形式の3Dモデルを簡単に扱えます。

npm install @react-three/drei

以下はモデルを読み込む例です：

import { useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/models/banana.glb');
  return <primitive object={scene} scale={0.5} />;
}

このコードで、Blenderなどで作成した3Dモデルをサイトに表示できます。

3. ライトや影のリアリスティックな表現

Three.jsのライト設定を活用して、シーンにリアリズムを追加できます。

<spotLight position={[10, 10, 10]} angle={0.3} />

ライトの種類や配置を工夫することで、視覚的に魅力的なシーンを構築できます。

4. パーティクルやエフェクト

dreiのパーティクルシステムを使って、煙、星空、炎などの表現が可能です。以下は簡単なパーティクルの例です：

import { Points, PointMaterial } from '@react-three/drei';

function Particles() {
  const points = Array.from({ length: 1000 }).map(() => [
    Math.random() * 10 - 5,
    Math.random() * 10 - 5,
    Math.random() * 10 - 5,
  ]);

  return (
    <Points positions={points}>
      <PointMaterial color="white" size={0.1} />
    </Points>
  );
}