3d-web-experience は何をしますか？
Web向け3Dエクスペリエンス構築の専門家 - Three.js、React Three Fiber、Spline、WebGL、インタラクティブな3Dシーン。プロダクトコンフィギュレーター、3Dポートフォリオ、没入型Webサイト、Web体験に奥行きを与えることをカバー。
概要
このスキルは、以下の技術スタックを使用してWeb上の3Dエクスペリエンスを構築するための専門知識を提供します：
- Three.js: 低レベル3Dレンダリングライブラリ
- React Three Fiber: Three.jsのReactレンダラー
- Spline: ビジュアル3Dデザインツール
- WebGL: ブラウザ向けグラフィックスAPI
ユースケース
- プロダクトコンフィギュレーター（カスタマイズ可能な3D製品ビューア）
- 3Dポートフォリオ（没入型プロジェクトギャラリー）
- ランディングページ用インタラクティブ3Dシーン
- データビジュアライゼーションと空間UX
使い方
AIエージェントにこのスキルをロードすると、Three.jsまたはReact Three Fiberを使用して3Dシーンをセットアップ、アニメーション化、最適化するための手順を案内します。スキルは以下に対応します：
npm install threeまたはnpm install @react-three/fiberを用いたプロジェクトの初期化- シーン、カメラ、ライトの設定
- 3Dモデルのロード（GLTF、GLB、FBX形式）
- インタラクションとアニメーションの追加
- パフォーマンスの最適化（フレームレート、メモリ使用量）
例
# 新しいReact Three Fiberプロジェクトを作成
npx create-react-app my-3d-app
cd my-3d-app
npm install @react-three/fiber @react-three/drei
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
function Scene() {
return (
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<mesh>
<boxGeometry />
<meshStandardMaterial color="orange" />
</mesh>
<OrbitControls />
</Canvas>
);
}
export default Scene;