Three.js サンプル

Three.js を使用したサンプルアプリケーション

概要

• React と TypeScript を使用してUIを構築
• Three.js を使用して3Dグラフィックスを描画

必要条件

• Node.js (バージョン 14 以上)
• npm

セットアップと実行手順

1. リポジトリをクローンします：

   git clone https://github.com/itwuthe3/webgpu-sample.git
   cd webgpu-sample
   

2. 依存関係をインストールします：

   npm install
   

3. アプリケーションをビルドします：

   npm run build
   

4. サーバーを起動します：

   node server.js
   

5. ブラウザで http://localhost:3000 にアクセスして、アプリケーションを表示します。

海のサンプル

Ocean.tsx コンポーネントは、Three.jsを使用して動的な海面をシミュレートします。

主な機能

• リアルタイムで動く波のシミュレーショ��
• 光の反射効果による水面の表現
• 3D空間内でのカメラ操作

使用方法

1. アプリケーションを起動し、"海のサンプル"のリンクをクリックします。
2. マウスを使用して3D空間内のカメラを操作できます：
   • 左クリック＋ドラッグ: カメラの回転
   • 右クリック＋ドラッグ: カメラの平行移動
   • スクロール: ズームイン/アウト
3. 矢印キーを使用して船を操作できます：
   • 上矢印キー: 前進
   • 下矢印キー: 後退
   • 左矢印キー: 左回転
   • 右矢印キー: 右回転

技術的詳細

• Three.jsのShaderMaterialを使用してカスタムシェーダーを実装
• 頂点シェーダーとフラグメントシェーダーを組み合わせて波の動きと光の反射を表現
• React Three Fiberを使用してThree.jsをReactと統合

このサンプルは、WebGLを使用した高度な3Dグラフィックスとシェーダープログラミングの例を示しています。

3Dテキスト入力サンプル

TextInput3D.tsx コンポーネントは、3D���間でインタラクティブなテキスト入力と爆発エフェクトを実現します。

主な機能

• キーボードからの文字入力を3Dテキストとして表示
• Enterキーを押すと文字が爆発するアニメーション
• パーティクルシステムを使用した派手な爆発エフェクト
• 初回アクセス時のユーザーガイダンス表示

使用方法

1. アプリケーションを起動し、"3Dテキスト入力サンプル"のリンクをクリックします。
2. 画面上でキーボードを使って文字を入力します。
3. Enterキーを押すと、入力された文字が爆発します。
4. 爆発後、新しい文字を入力できます。

技術的詳細

• React Three Fiber と Three.js を使用して3D描画を実現
• React Spring を使用してスムーズなアニメーションを実装
• カスタムパーティクルシステムによる爆発エフェクト

このサンプルは、WebGLを使用した3Dグラフィックスとインタラクティブなユーザー入力の組み合わせを示しています。