3d-web-experience
Create Immersive 3D Web Experiences
Build stunning 3D websites and web apps using Three.js, React Three Fiber, and Spline. This skill helps you create interactive product configurators, immersive portfolios, and engaging 3D interfaces that work across all devices.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「3d-web-experience」を使用しています。 Create a React Three Fiber scene with a 3D model loader
期待される結果:
A complete code example showing:
- Canvas setup with proper lighting
- Suspense wrapper for async loading
- useGLTF hook for model loading
- Progress indicator during load
- OrbitControls for user interaction
- Error boundary for failed loads
「3d-web-experience」を使用しています。 How do I optimize 3D models for web?
期待される結果:
Step-by-step guide covering:
1. Reduce polygon count in Blender (under 100K)
2. Bake textures into single materials
3. Export as GLB/GLTF format
4. Compress with gltf-transform using draco
5. Target under 5MB file size
6. Use CDN for delivery
セキュリティ監査
安全This skill is a documentation file containing markdown with code examples for 3D web development. All static findings are false positives: (1) The 'external_commands' detections are markdown code block delimiters misidentified as Ruby backticks; (2) The 'weak cryptographic algorithm' detections are false matches on context words; (3) The single URL is a legitimate Spline CDN example. No actual security risks present.
検出されたパターン
品質スコア
作れるもの
E-commerce Product Viewer
Create interactive 3D product configurators that let customers rotate, zoom, and customize products before purchase.
Creative Portfolio Enhancement
Add impressive 3D elements to personal or agency portfolios to stand out from static websites.
Immersive Landing Pages
Build engaging landing pages with scroll-driven 3D animations that create memorable user experiences.
これらのプロンプトを試す
Create a basic 3D scene using Three.js with a rotating cube, ambient lighting, and orbit controls. Explain the key components.
Show me how to integrate a GLB 3D model into a React app using React Three Fiber. Include loading state and error handling.
Build a product configurator that lets users change colors and textures on a 3D model. Include UI controls outside the canvas.
Create a 3D scene where camera movement and model rotation are controlled by scroll position. Use R3F ScrollControls.
ベストプラクティス
- Always include loading states and progress indicators for 3D content
- Test 3D experiences on real mobile devices, not just desktop browsers
- Provide static image fallbacks for users on low-end devices or with reduced motion preferences
回避
- Adding 3D elements purely for visual effect without functional purpose
- Implementing 3D that only works on desktop browsers
- Failing to provide any loading feedback while 3D content loads