THREE.JS / FOUNDATIONS 208

Move the owner.

The main thread owns the camera, materials, InstancedMesh buffers, and renderer. A module worker owns the Rapier world and its fixed 60 Hz step loop, then transfers only the transforms needed for rendering.

Initializing Preparing worker

Creating the main-thread scene while the worker loads Rapier...

physics: -
instances: -
messages: -
transport: -
worker ms: -
sync ms: -
dropped: -
fps: -

Ownership controlsbox #1

batch preset instance group

wireframe instances

Select an instance to inspect the main-thread index sent to the worker.

Worker contractexplicit ownership boundary

new Worker(..., { type: 'module' })start an isolated module

new RAPIER.World(gravity)keep physics off the DOM thread

world.timestep = 1 / 60use a fixed simulation step

postMessage(frame, [buffer])transfer, do not clone, transforms

instanceMatrix.needsUpdatepublish worker writeback to WebGL

worker.terminate()close the lifecycle explicitly

A worker can’t touch the DOM or Three.js renderer here. It owns numeric simulation state only; the main thread consumes a transferable matrix snapshot and remains responsible for GPU submission.

Selected instancepending

group-

index-

position-

velocity-

bodies-

The worker is loading Rapier. Once ready, the selected index will address one worker-owned rigid body.

Based on the official Rapier instancing example, Three.js worker guidance, InstancedMesh docs, and Rapier’s JavaScript guide. Measurements are local browser evidence, not a universal performance claim.

THREE.JS FOUNDATIONS LAB