How to decide if you need 3D, and which tool

Start from the lightest option that does the job, then set up a scene that stays smooth.

TL;DR

Most "make it 3D" briefs need depth, not a scene. Try CSS perspective first.
Use real 3D when the object is the story. React sites use three.js with React Three Fiber.
Cap DPR, compress models, pause off screen, and give reduced motion a still.

Goal: 3D only where it earns its weight, and a scene that runs well when it does.

You need

A clear answer to "what is the 3D for?".
For a scene: three, @react-three/fiber and @react-three/drei.

What does the brief actually need?

if it needs depth or tilt

→ CSS perspective

if it needs a moving texture

→ a shader

if one designed 3D moment

→ Spline

if a custom, interactive scene

→ three.js + R3F

Each step down costs more to build and more for visitors to download.

Steps

1. Try CSS depth first

[member] 2026

Depth without a scene

Move your pointer over the card. CSS perspective and two rotations, no WebGL. Start here before reaching for three.js.

<div style={{ perspective: 900 }}>
  <div style={{ transform: `rotateX(${x}deg) rotateY(${y}deg)`, transformStyle: 'preserve-3d' }}>
    <p style={{ transform: 'translateZ(60px)' }}>Depth without a scene</p>
  </div>
</div>

2. Pick the tool

Brief	Reach for
React site, custom scene	three.js + React Three Fiber + drei
SvelteKit site	Threlte
A designed moment, fast	Spline
Game-like, edited by a team	PlayCanvas
Ready 3D UI pieces	ThreeUI (`npx @designcodeio/threeui-cli add <name>`, Pro)
An object from a photo	img2threejs skill
A scroll-driven 3D world	scroll-world skill

All of them are on the tools page with install commands.

3. Set up a minimal scene

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

export function Scene({ active }: { active: boolean }) {
  return (
    <Canvas dpr={[1, 1.75]} camera={{ position: [0, 0, 4], fov: 40 }} frameloop={active ? 'always' : 'never'}>
      <Float speed={1.4} rotationIntensity={0.6}>
        <mesh>
          <torusKnotGeometry args={[0.8, 0.28, 220, 32]} />
          <meshPhysicalMaterial color="#f5f5f5" roughness={0.25} clearcoat={1} />
        </mesh>
      </Float>
      <Environment preset="studio" />
    </Canvas>
  );
}

4. Follow the performance rules

Cap device pixel ratio with dpr={[1, 1.75]}. 3× draws 2.25 times the pixels of 2× for almost no gain.
Compress models with Draco or Meshopt, and textures with KTX2. BR95's retro computer ships at 1.0 MB.
Pause when off screen and when the tab is hidden.
Instance repeated meshes. See instanced blocks.
Show a poster while the scene loads, and a still under reduced motion.

5. Skip heavy 3D on deep links

People who land on an inner page came for the content. BR95 boots its 3D computer only on /.

Why it works

3D feels real because light, material and parallax say "this is physical". That same weight makes it expensive, so spend it only where it carries the story.