3d-graphics

3D Graphics — Syntax Reference

Mechanical patterns for Three.js, React Three Fiber (R3F), and @react-three/drei. For aesthetic direction, performance tiers, responsive/mobile WebGL, degradation, accessibility, and verified recipes, load the 3d-web-experiences skill (reference.md for full scenes and bug catalog).

Verify package APIs against installed versions before asserting prop names.

---

CRITICAL: Container Dimensions

A WebGL canvas without a sized parent renders at zero height or wrong aspect.

// WRONG
<div><Canvas><Scene /></Canvas></div>

// CORRECT — explicit height on the container
<div style={{ height: '500px', width: '100%' }}>
  <Canvas><Scene /></Canvas>
</div>

Vanilla Three.js: size the renderer to the container, not always window — use ResizeObserver or container clientWidth / clientHeight.

---

R3F Canvas Baseline

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

export function Scene() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <Canvas shadows dpr={[1, 2]} camera={{ position: [0, 0, 5], fov: 45 }}>
        <Environment preset="city" />
        <ambientLight intensity={0.4} />
        <directionalLight position={[5, 5, 5]} castShadow />
        <Mesh />
        <OrbitControls enableDamping />
      </Canvas>
    </div>
  );
}

Set tone mapping and output color space on the renderer for PBR that is not flat — see 3d-web-experiences → renderer baseline.

---

Hooks & Imports (common bugs)

import { useRef, useState } from 'react';
import { useFrame } from '@react-three/fiber'; // NOT from 'react'
import type { Mesh } from 'three';

function AnimatedBox() {
  const ref = useRef<Mesh>(null);
  useFrame((_, delta) => {
    if (ref.current) ref.current.rotation.y += delta;
  });
  return (
    <mesh ref={ref}>
      <boxGeometry />
      <meshStandardMaterial />
    </mesh>
  );
}

Mistake	Fix
useFrame from react	Import from @react-three/fiber
<Detail> from three	Use drei <Detailed distances={[0, 10, 20]}> with child meshes
InstancedMesh from fiber	Use JSX <instancedMesh>; Object3D from three