メニュー
ALWAYS use this when the request matches 3d WEB Experience: Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
ALWAYS use this when the request matches 00 Andruia Consultant: Arquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia.
ALWAYS use this when the request matches 007: Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
ALWAYS use this when the user mentions 10 Andruia Skill Smith, asks to build, debug, review, document, automate, test, configure, migrate, or make decisions in this domain, or the task clearly depends on 10 Andruia Skill Smith; scope: Ingeniero de Sistemas de Andru.ia. Apply the bundled workflow, references, scripts, Senior Master standard, and Codex strict review gate before final output.
ALWAYS use this when the request matches 20 Andruia Niche Intelligence: Estratega de Inteligencia de Dominio de Andru.ia.
ALWAYS use this when the user mentions 2d Games, asks to build, debug, review, document, automate, test, configure, migrate, or make decisions in this domain, or the task clearly depends on 2d Games; scope: 2D game development principles. Apply the bundled workflow, references, scripts, Senior Master standard, and Codex strict review gate before final output.
ALWAYS use this when the user mentions 3d Games, asks to build, debug, review, document, automate, test, configure, migrate, or make decisions in this domain, or the task clearly depends on 3d Games; scope: 3D game development principles. Apply the bundled workflow, references, scripts, Senior Master standard, and Codex strict review gate before final output.
| name | 3d-web-experience |
| description | ALWAYS use this when the request matches 3d WEB Experience: Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. |
Start with:
references/senior-master-standard.mdreferences/usage-routing.mdreferences/quality-checklist.mdThen load only the inherited docs, scripts, assets, or examples that match the user's actual task.
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.
Role: 3D Web Experience Architect
You bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability.
Choosing the right 3D approach
When to use: When starting a 3D web project
| Tool | Best For | Learning Curve | Control |
|---|---|---|---|
| Spline | Quick prototypes, designers | Low | Medium |
| React Three Fiber | React apps, complex scenes | Medium | High |
| Three.js vanilla | Max control, non-React | High | Maximum |
| Babylon.js | Games, heavy 3D | High | Maximum |
Need quick 3D element?
└── Yes → Spline
└── No → Continue
Using React?
└── Yes → React Three Fiber
└── No → Continue
Need max performance/control?
└── Yes → Three.js vanilla
└── No → Spline or R3F
import Spline from '@splinetool/react-spline';
export default function Scene() {
return (
<Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
);
}
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
function Model() {
const { scene } = useGLTF('/model.glb');
return <primitive object={scene} />;
}
export default function Scene() {
return (
<Canvas>
<ambientLight />
<Model />
<OrbitControls />
</Canvas>
);
}
Getting models web-ready
When to use: When preparing 3D assets
| Format | Use Case | Size |
|---|---|---|
| GLB/GLTF | Standard web 3D | Smallest |
| FBX | From 3D software | Large |
| OBJ | Simple meshes | Medium |
| USDZ | Apple AR | Medium |
1. Model in Blender/etc
2. Reduce poly count (< 100K for web)
3. Bake textures (combine materials)
4. Export as GLB
5. Compress with gltf-transform
6. Test file size (< 5MB ideal)
# Install gltf-transform
npm install -g @gltf-transform/cli
# Compress model
gltf-transform optimize input.glb output.glb \
--compress draco \
--texture-compress webp
import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';
function Loader() {
const { progress } = useProgress();
return <Html center>{progress.toFixed(0)}%</Html>;
}
export default function Scene() {
return (
<Canvas>
<Suspense fallback={<Loader />}>
<Model />
</Suspense>
</Canvas>
);
}
3D that responds to scroll
When to use: When integrating 3D with scroll
import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
function RotatingModel() {
const scroll = useScroll();
const ref = useRef();
useFrame(() => {
// Rotate based on scroll position
ref.current.rotation.y = scroll.offset * Math.PI * 2;
});
return <mesh ref={ref}>...</mesh>;
}
export default function Scene() {
return (
<Canvas>
<ScrollControls pages={3}>
<RotatingModel />
</ScrollControls>
</Canvas>
);
}
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.to(camera.position, {
scrollTrigger: {
trigger: '.section',
scrub: true,
},
z: 5,
y: 2,
});
Keeping 3D fast
When to use: Always - 3D is expensive
| Device | Target FPS | Max Triangles |
|---|---|---|
| Desktop | 60fps | 500K |
| Mobile | 30-60fps | 100K |
| Low-end | 30fps | 50K |
// 1. Use instances for repeated objects
import { Instances, Instance } from '@react-three/drei';
// 2. Limit lights
<ambientLight intensity={0.5} />
<directionalLight /> // Just one
// 3. Use LOD (Level of Detail)
import { LOD } from 'three';
// 4. Lazy load models
const Model = lazy(() => import('./Model'));
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
<Canvas
dpr={isMobile ? 1 : 2} // Lower resolution on mobile
performance={{ min: 0.5 }} // Allow frame drops
>
function Scene() {
const [webGLSupported, setWebGLSupported] = useState(true);
if (!webGLSupported) {
return <img src="/fallback.png" alt="3D preview" />;
}
return <Canvas onCreated={...} />;
}
Severity: HIGH
Message: No loading indicator for 3D content.
Fix action: Add Suspense with loading fallback or useProgress for loading UI
Severity: MEDIUM
Message: No fallback for devices without WebGL support.
Fix action: Add WebGL detection and static image fallback
Severity: MEDIUM
Message: 3D models may be unoptimized.
Fix action: Compress models with gltf-transform using Draco and texture compression
Severity: MEDIUM
Message: OrbitControls may be capturing scroll events.
Fix action: Add enableZoom={false} or handle scroll/touch events appropriately
Severity: MEDIUM
Message: Canvas DPR may be too high for mobile devices.
Fix action: Limit DPR to 1 on mobile devices for better performance
Skills: 3d-web-experience, frontend, landing-page-design
Workflow:
1. Prepare 3D product model
2. Set up React Three Fiber scene
3. Add interactivity (colors, variants)
4. Integrate with product page
5. Optimize for mobile
6. Add fallback images
Skills: 3d-web-experience, scroll-experience, interactive-portfolio
Workflow:
1. Design 3D scene concept
2. Build scene in Spline or R3F
3. Add scroll-driven animations
4. Integrate with portfolio sections
5. Ensure mobile fallback
6. Optimize performance
Works well with: scroll-experience, interactive-portfolio, frontend, landing-page-design