ThreeJs Scene — Lab — Carter Ogunsola

A vanilla Three.js scene, pared to the basis: a renderer on a canvas, a camera, a loaded glTF model, orbit controls, a render loop. One model shown three ways — the shaded surface, the mesh, the vertices.

Dependencies

three.js r0.185 — renderer, GLTFLoader, OrbitControls

A model in a room you can turn

Drag anywhere and the model swings around; let go and it keeps drifting on its own. It’s floating in a plain monochrome studio with no visible lights, just a model catching a soft key from the upper left. Nothing here is doing much. That’s the point: this is the smallest honest Three.js scene, the one you’d start any project from, with a little interaction bolted on so it isn’t a still life.

The parts every scene needs

Strip a Three.js scene to its frame and it’s always the same short list, and this experiment is just those parts wired together:

a renderer that owns a <canvas> (here transparent, so the stage shows through), pixel ratio capped at 2 so retina screens don’t render 4× the pixels;
a scene to hold things and a camera to look through;
a light — or in our case a matcap standing in for one (more below);
a loader that pulls a .glb off a CDN and drops it in;
controls so you can orbit;
a loop that reads the controls and re-renders each frame.

The load does one extra courtesy: it measures the model’s bounding box, scales the longest side to a fixed size, and recenters it on the origin, so any model you point it at arrives framed instead of tiny or off in a corner.

The same geometry, three ways

The Shaded / Wire / Points switch isn’t three models. It’s one geometry rendered three different ways, which is the quickest way to see what a loaded model actually is:

Shaded is the surface, lit by the matcap.
Wire is a MeshBasicMaterial with wireframe: true, so you see the triangles the surface is built from.
Points is a THREE.Points cloud sampled evenly across that surface (via MeshSurfaceSampler), so it stays dense even on the big flat faces where the raw vertices are miles apart.

One model, three ways of drawing it. Toggling between them is the whole lesson in what “a mesh” actually is.

Monochrome on purpose

The model ships with full PBR materials, and we throw them away. Every mesh gets its material replaced with a MeshMatcapMaterial reading a small greyscale sphere drawn on a 2D canvas, so the whole thing renders in soft monochrome with no light rig at all and stays on brand no matter what the source textures were. It’s also the cheapest possible shading. Want the real thing back? Delete the override and give the meshes a MeshStandardMaterial under an environment map, and the model’s own materials return.

Make it yours

MODEL — the glTF URL. Any single-file .glb on a CORS-friendly host drops straight in; the fit-to-box handles the rest.
--three-accent — defaults to --ink. The wire and points carry it, so this is the one knob to bring color back into an otherwise monochrome scene.
The matcap — swap the canvas gradient for a photo of a shiny sphere and the whole model reskins in one line.

Reduced-motion callers get the scene without the drift: no auto-rotate, no idle loop, just a frame rendered on load and again whenever you orbit it yourself.

Credits

Lantern — CC0 (Khronos glTF samples)

Setup

<!-- Three.js via import map (ES modules) -->
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.185.1/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.185.1/examples/jsm/"
  }
}
</script>

<!-- Site tokens the styles use — swap freely -->
<style>
  :root {
    --font-sans: "Geist", system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --fs-mono-meta: 0.75rem;
    --ink: #1e1e1e;
    --ink-muted: rgba(30, 30, 30, 0.6);
    --surface: #fdfcfb;
    --fill: rgba(30, 30, 30, 0.08);
    --line: rgba(30, 30, 30, 0.06);
    --r-sm: 4px;
    --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  }
</style>

<!-- Sized stage — the script fills it -->
<div class="stage" style="position: relative; height: 100vh;"></div>

Style

.tj {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  --three-accent: var(--ink);
  cursor: grab;
  touch-action: none;
}

.tj:active {
  cursor: grabbing;
}

.tj canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.tj__loading {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta,0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tj[data-ready] .tj__loading {
  opacity: 0;
}

.tj__modes {
  position: absolute;
  inset-block-start: var(--s-16,1rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 2;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: var(--s-2,2px);
  height: var(--s-40,2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md,6px);
  box-shadow: var(--shadow-control,0 1px 3px rgba(30,30,30,0.06));
}

.tj__pill {
  position: absolute;
  inset-block: var(--s-2,2px);
  inset-inline-start: var(--s-2,2px);
  width: calc((100% - var(--s-2,2px) * 2) / 3);
  border-radius: var(--r-sm,4px);
  background: var(--fill);
  box-shadow: var(--shadow-seg,0 1px 2px rgba(30,30,30,0.05));
  transition: transform 0.4s var(--ease-out-expo,cubic-bezier(0.16,1,0.3,1));
}

.tj__seg {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 100%;
  padding-inline: var(--s-12,0.75rem);
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta,0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.3s var(--ease-out-quad,cubic-bezier(0.5,1,0.89,1)),scale 0.15s ease;
}

.tj__seg[aria-pressed="true"] {
  color: var(--ink);
}

.tj__seg:hover {
  color: var(--ink);
}

.tj__seg:active {
  scale: 0.94;
}

.tj__seg:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  border-radius: var(--r-sm,4px);
}

@media (prefers-reduced-motion: reduce) {
  .tj__pill {
    transition: none;
  }
}

Script

<script type="module">
import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { MeshSurfaceSampler } from "three/addons/math/MeshSurfaceSampler.js";
const MODEL = "https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@2bac6f8c57bf471df0d2a1e8a8ec023c7801dddf/Models/Lantern/glTF-Binary/Lantern.glb";
const FIT = 2.4;
const MODES = [
  { id: "shaded", label: "Shaded" },
  { id: "wire", label: "Wire" },
  { id: "points", label: "Points" }
];
const STYLE_ID = "exp-three-style";
const CSS = `
.tj {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  --three-accent: var(--ink);
  cursor: grab;
  touch-action: none;
}

.tj:active {
  cursor: grabbing;
}

.tj canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.tj__loading {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta,0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tj[data-ready] .tj__loading {
  opacity: 0;
}

.tj__modes {
  position: absolute;
  inset-block-start: var(--s-16,1rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 2;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: var(--s-2,2px);
  height: var(--s-40,2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md,6px);
  box-shadow: var(--shadow-control,0 1px 3px rgba(30,30,30,0.06));
}

.tj__pill {
  position: absolute;
  inset-block: var(--s-2,2px);
  inset-inline-start: var(--s-2,2px);
  width: calc((100% - var(--s-2,2px) * 2) / 3);
  border-radius: var(--r-sm,4px);
  background: var(--fill);
  box-shadow: var(--shadow-seg,0 1px 2px rgba(30,30,30,0.05));
  transition: transform 0.4s var(--ease-out-expo,cubic-bezier(0.16,1,0.3,1));
}

.tj__seg {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 100%;
  padding-inline: var(--s-12,0.75rem);
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-meta,0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.3s var(--ease-out-quad,cubic-bezier(0.5,1,0.89,1)),scale 0.15s ease;
}

.tj__seg[aria-pressed="true"] {
  color: var(--ink);
}

.tj__seg:hover {
  color: var(--ink);
}

.tj__seg:active {
  scale: 0.94;
}

.tj__seg:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  border-radius: var(--r-sm,4px);
}

@media (prefers-reduced-motion: reduce) {
  .tj__pill {
    transition: none;
  }
}
`;
function injectStyle() {
  if (document.getElementById(STYLE_ID)) return;
  const el = document.createElement("style");
  el.id = STYLE_ID;
  el.textContent = CSS;
  document.head.appendChild(el);
}
function makeMatcap() {
  const s = 256;
  const cv = document.createElement("canvas");
  cv.width = cv.height = s;
  const g = cv.getContext("2d");
  const key = g.createRadialGradient(s * 0.36, s * 0.3, s * 0.04, s * 0.5, s * 0.5, s * 0.62);
  key.addColorStop(0, "#f4f4f4");
  key.addColorStop(0.45, "#c9c9c9");
  key.addColorStop(0.8, "#8f8f8f");
  key.addColorStop(1, "#565656");
  g.fillStyle = key;
  g.fillRect(0, 0, s, s);
  const rim = g.createRadialGradient(s * 0.72, s * 0.8, 0, s * 0.72, s * 0.8, s * 0.42);
  rim.addColorStop(0, "rgba(255,255,255,0.45)");
  rim.addColorStop(1, "rgba(255,255,255,0)");
  g.fillStyle = rim;
  g.fillRect(0, 0, s, s);
  const tex = new THREE.CanvasTexture(cv);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}
const experiment = {
  mount(root) {
    injectStyle();
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const P = { spin: 0.9, pointSize: 0.02 };
    let accentHex = null;
    const ac = new AbortController();
    const { signal } = ac;
    const wrap = document.createElement("div");
    wrap.className = "tj";
    wrap.innerHTML = `<p class="tj__loading">Loading model</p>
      <div class="tj__modes" role="group" aria-label="Render mode">
        <span class="tj__pill" aria-hidden="true"></span>
        ${MODES.map(
      (m, i) => `<button class="tj__seg" type="button" data-mode="${m.id}" aria-pressed="${i === 0}">${m.label}</button>`
    ).join("")}
      </div>`;
    root.appendChild(wrap);
    const pill = wrap.querySelector(".tj__pill");
    const segs = [...wrap.querySelectorAll(".tj__seg")];
    let ink = 1973790;
    const resolveInk = () => {
      const probe = document.createElement("span");
      probe.style.cssText = "color:var(--ink);position:absolute;visibility:hidden";
      wrap.appendChild(probe);
      const m = getComputedStyle(probe).color.match(/\d+/g);
      probe.remove();
      if (m) ink = Number(m[0]) << 16 | Number(m[1]) << 8 | Number(m[2]);
    };
    resolveInk();
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setClearColor(0, 0);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    wrap.appendChild(renderer.domElement);
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 100);
    camera.position.set(0, 0.15, FIT * 2.4);
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enablePan = false;
    controls.minDistance = FIT * 1.4;
    controls.maxDistance = FIT * 4.5;
    controls.minPolarAngle = 0.15;
    controls.maxPolarAngle = Math.PI * 0.9;
    controls.enableDamping = !reduced;
    controls.dampingFactor = 0.08;
    controls.autoRotate = !reduced;
    controls.autoRotateSpeed = P.spin;
    const matcap = makeMatcap();
    const shadedMat = new THREE.MeshMatcapMaterial({ matcap });
    const wireMat = new THREE.MeshBasicMaterial({
      color: ink,
      wireframe: true,
      transparent: true,
      opacity: 0.55
    });
    const pointsMat = new THREE.PointsMaterial({ color: ink, size: P.pointSize });
    const geoms =  new Set();
    const sampledGeoms =  new Set();
    const reps = { shaded: null, wire: null, points: null };
    let mode = "shaded";
    let raf = 0;
    let disposed = false;
    const render = () => renderer.render(scene, camera);
    const applyMode = (next) => {
      mode = next;
      Object.keys(reps).forEach((k) => {
        if (reps[k]) reps[k].visible = k === next;
      });
      segs.forEach((s) => s.setAttribute("aria-pressed", String(s.dataset.mode === next)));
      pill.style.transform = `translateX(${MODES.findIndex((m) => m.id === next) * 100}%)`;
      if (reduced) render();
    };
    const loader = new GLTFLoader();
    loader.load(
      MODEL,
      (gltf) => {
        if (disposed) return;
        const model = gltf.scene;
        model.traverse((o) => {
          if (o.isMesh) {
            const mesh = o;
            mesh.material = shadedMat;
            geoms.add(mesh.geometry);
          }
        });
        const box = new THREE.Box3().setFromObject(model);
        const size2 = box.getSize(new THREE.Vector3());
        model.scale.multiplyScalar(FIT / Math.max(size2.x, size2.y, size2.z));
        box.setFromObject(model);
        model.position.sub(box.getCenter(new THREE.Vector3()));
        const wire = model.clone();
        wire.traverse((o) => {
          if (o.isMesh) o.material = wireMat;
        });
        const points = model.clone();
        const pMeshes = [];
        points.traverse((o) => {
          if (o.isMesh) pMeshes.push(o);
        });
        const areas = pMeshes.map((m) => {
          m.geometry.computeBoundingBox();
          const s = m.geometry.boundingBox.getSize(new THREE.Vector3());
          return 2 * (s.x * s.y + s.y * s.z + s.z * s.x) || 1;
        });
        const areaSum = areas.reduce((a, b) => a + b, 0) || 1;
        const BUDGET = 2e4;
        const tmp = new THREE.Vector3();
        pMeshes.forEach((mesh, i) => {
          const n = Math.max(400, Math.round(BUDGET * areas[i] / areaSum));
          const sampler = new MeshSurfaceSampler(mesh).build();
          const pos = new Float32Array(n * 3);
          for (let k = 0; k < n; k++) {
            sampler.sample(tmp);
            pos[k * 3] = tmp.x;
            pos[k * 3 + 1] = tmp.y;
            pos[k * 3 + 2] = tmp.z;
          }
          const geo = new THREE.BufferGeometry();
          geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
          sampledGeoms.add(geo);
          const p = new THREE.Points(geo, pointsMat);
          p.position.copy(mesh.position);
          p.quaternion.copy(mesh.quaternion);
          p.scale.copy(mesh.scale);
          mesh.parent?.add(p);
          mesh.parent?.remove(mesh);
        });
        reps.shaded = model;
        reps.wire = wire;
        reps.points = points;
        scene.add(model, wire, points);
        applyMode(mode);
        wrap.dataset.ready = "";
        if (reduced) render();
      },
      void 0,
      (err) => console.error("[lab] threejs-test model failed", err)
    );
    const size = () => {
      const w = wrap.clientWidth;
      const h = wrap.clientHeight;
      if (!w || !h) return;
      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
      renderer.setSize(w, h, false);
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      if (reduced) render();
    };
    const ro = new ResizeObserver(size);
    ro.observe(wrap);
    size();
    const inkColor = () => {
      const c = accentHex ?? ink;
      wireMat.color.set(c);
      pointsMat.color.set(c);
    };
    const themeObs = new MutationObserver(() => {
      resolveInk();
      inkColor();
      if (reduced) render();
    });
    themeObs.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["data-theme", "class"]
    });
    segs.forEach(
      (s) => s.addEventListener("click", () => applyMode(s.dataset.mode), { signal })
    );
    if (reduced) {
      controls.addEventListener("change", render);
    } else {
      const loop = () => {
        raf = requestAnimationFrame(loop);
        controls.update();
        render();
      };
      loop();
    }
    const set = (key, value) => {
      if (key === "spin") {
        P.spin = Number(value);
        controls.autoRotateSpeed = P.spin;
      } else if (key === "pointSize") {
        P.pointSize = Number(value);
        pointsMat.size = P.pointSize;
      } else if (key === "accent") {
        accentHex = String(value).startsWith("var(") ? null : String(value);
        inkColor();
      }
      if (reduced) render();
    };
    const destroy = () => {
      disposed = true;
      ac.abort();
      cancelAnimationFrame(raf);
      ro.disconnect();
      themeObs.disconnect();
      controls.dispose();
      geoms.forEach((g) => g.dispose());
      sampledGeoms.forEach((g) => g.dispose());
      shadedMat.dispose();
      wireMat.dispose();
      pointsMat.dispose();
      matcap.dispose();
      renderer.dispose();
      renderer.forceContextLoss();
      renderer.domElement.remove();
      wrap.remove();
    };
    return { destroy, set };
  }
};
experiment.mount(document.querySelector(".stage"));
</script>

ThreeJs Scene

Experiment coming soon Loading experiment

ThreeJs Scene — Lab experiment