web-3d-graphics-expert

Web 3D Graphics Expert (Three.js & Babylon.js)

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Production-level guidance for developing high-performance 3D graphics in the browser. Covers the raw APIs of Three.js and Babylon.js, as well as framework-specific wrappers like React Three Fiber (R3F) for React and TresJS for Vue. Focuses on rendering performance, efficient memory management, and realistic lighting/material setups.

Trigger Conditions

Activate this skill when the user is:

• Initializing a WebGL/WebGPU 3D scene.
• Using three, @react-three/fiber, @babylonjs/core, or @tresjs/core.
• Loading 3D models (.glb, .gltf, .obj).
• Adding advanced lighting, shadows, or Post-Processing effects (Bloom, Depth of Field).
• Asking about framerate drops, memory leaks, or rendering performance in 3D apps.

---

Core Concepts & Framework Selection

1. React Three Fiber (R3F) vs Vanilla Three.js

When building with React, always use React Three Fiber. It manages the scene graph, object lifecycles, and requestAnimationFrame natively within the React component tree.

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment, useGLTF } from '@react-three/drei'

export default function App() {
  const { scene } = useGLTF('/model.glb')
  return (
    <Canvas camera={{ position: [0, 2, 5] }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} castShadow />
      <primitive object={scene} />
      <Environment preset="city" />
      <OrbitControls />
    </Canvas>
  )
}

Note: Always use @react-three/drei for common helpers (OrbitControls, Text, Environment).

2. Babylon.js vs Three.js

• Three.js: Lighter, more flexible, vast community, excellent for creative coding, landing page animations, and React/Vue integrations.
• Babylon.js: Robust, game-engine-like architecture, built-in physics, excellent for web-based games, AR/VR (WebXR), and complex interactive simulations. Fully written in TypeScript.