Three.js Sketches

The Site Lab currently keeps two small, self-contained renderers:

Sketch	Representation	Interaction
ASCII Earth	shader-lit land mask passed through AsciiEffect	slow rotation and pointer drag
Rössler attractor	one numerically integrated path with line and sparse point layers	slow rotation and pointer drag

Use the controls to switch sketches or inspect the essential setup code.

How the ASCII Earth works

Three.js draws the sphere, AsciiEffect turns it into terminal characters, and OrbitControls keeps dragging smooth.

AsciiEarth/index.js

import {AsciiEffect} from 'three/examples/jsm/effects/AsciiEffect';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';

const effect = new AsciiEffect(renderer, ' .:-+*=%~@#01o', {
  invert: true,
});
const controls = new OrbitControls(camera, effect.domElement);
controls.enableZoom = false;
controls.enablePan = false;

sphere.rotation.y += delta * 0.18;
controls.update();
effect.render(scene, camera);

The Rössler System

Otto Rössler introduced a compact continuous system that exhibits chaotic behavior:

$$\dot{x}=-y-z,\qquad \dot{y}=x+ay,\qquad \dot{z}=b+z(x-c).$$

The sketch uses the common parameter choice $a=0.2$, $b=0.2$, and $c=5.7$. It applies a fourth-order Runge–Kutta step with $\Delta t=0.01$, discards the initial transient, and draws 14,000 subsequent samples. The changing blue, green, yellow, red, and violet colors encode progress along one trajectory; they are not extra state variables or a scientific color scale.

This is a numerical visualization of one parameterized trajectory—not a proof of chaos, a complete phase-space analysis, or a simulation of a physical object. Integration method, step size, initial state, and floating-point behavior all affect the rendered approximation.

Component Boundaries

1. Each renderer owns its scene. The Earth and attractor allocate and dispose their own geometry, materials, controls, observers, animation frame, and WebGL context.
2. Layout stays outside Three.js. ResizeObserver supplies the actual component dimensions; CSS owns the circular homepage frame and the demo card.
3. Idle work is bounded. IntersectionObserver pauses drawing off-screen, rendering is capped near 30 FPS, and reduced-motion preferences slow automatic rotation.
4. The homepage is a registry. ThreeShowcase randomly chooses one registered sketch after hydration. Both remain explicitly selectable here, so randomness never hides the implementation.
5. Rendering remains local. No hosted renderer or remote simulation service is involved.