Three.js and WebGL: a complete overview of 3D on websites

import * as THREE from 'three';

// a scene, a camera and a renderer: the three things every 3D page starts with
const canvas = document.querySelector<HTMLCanvasElement>('#scene')!;
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // above 2x the eye sees no difference, the GPU does

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 1.2, 4);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0xe4ff4e, roughness: 0.4 }),
);
scene.add(cube, new THREE.HemisphereLight(0xffffff, 0x222222, 2.5));

function resize() {
  const { clientWidth: w, clientHeight: h } = canvas;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}
window.addEventListener('resize', resize);
resize();

renderer.setAnimationLoop((time) => {
  cube.rotation.y = time / 1000;
  renderer.render(scene, camera);
});

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// a product viewer: a compressed glTF model that the visitor can turn and zoom
export async function showProduct(canvas: HTMLCanvasElement, url: string) {
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);

  const scene = new THREE.Scene();
  scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 3));
  const camera = new THREE.PerspectiveCamera(35, canvas.clientWidth / canvas.clientHeight, 0.1, 50);
  camera.position.set(0, 0.6, 2.4);

  const draco = new DRACOLoader().setDecoderPath('/draco/'); // the model is compressed several times over
  const gltf = await new GLTFLoader().setDRACOLoader(draco).loadAsync(url);
  scene.add(gltf.scene);

  const controls = new OrbitControls(camera, canvas);
  controls.enableDamping = true;
  controls.minDistance = 1;
  controls.maxDistance = 4;

  renderer.setAnimationLoop(() => {
    controls.update();
    renderer.render(scene, camera);
  });
  return renderer;
}

import type { WebGLRenderer } from 'three';

// a 3D scene should not drain the battery: draw only while it is visible
export function renderOnlyWhenVisible(
  renderer: WebGLRenderer,
  canvas: HTMLCanvasElement,
  draw: (time: number) => void,
) {
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduced) {
    draw(0); // motion is switched off in the system: one still frame
    return;
  }
  new IntersectionObserver(([entry]) => {
    renderer.setAnimationLoop(entry?.isIntersecting ? draw : null);
  }).observe(canvas);
}