A cube drawn by a worker
A classic blob worker with import(), because this page's preview does not run module workers from blobs. The status bar belongs to the page's own context, so its counts stay empty for the worker's renderer.
An OffscreenCanvas lets a Web Worker own the canvas and run three.js there, so heavy JavaScript no longer blocks the page's buttons. What moves into the worker, and what must stay, is the whole design.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the page code that sends the worker a resize message when the container changes, with the size in CSS pixels.
Name two things that stop working when the renderer moves to a worker, and what replaces them.
Explain it without notes
What must stay on the main thread when three.js runs in a worker?
Why can an OffscreenCanvas not make a GPU-bound scene faster?
Console
Nothing logged yet.Expected console output
OffscreenCanvas available: true
page: InvalidStateError: Failed to execute 'getContext' on 'HTMLCanvasElement': Cannot get context from a canvas that has transferred its control to offscreen.
worker: setSize(w, h) failed in a worker: Cannot set properties of undefined (setting 'width')
worker: first frame drawn in the worker: 1 draw call, 12 triangles
worker: drag of 100 px turned the cube by 0.50 rad