Lesson 4 · 15 min
Video frames give you the film; Three.js gives you a scene drawn in code that changes angle as you scroll. The risk is the scene drawing nonstop, even when idle or off screen, and heating up the phone. Here you measure, in a headless Chromium, how many times the scene draws in each situation, and you watch the common mistake fail.
Start the lesson
Goal: measure a Three.js scene that only draws when the scroll changes, pauses off screen, and respects reduced motion.
On-demand drawing: each question is a reason NOT to draw. Click each step.
The common mistake is the tutorial loop: requestAnimationFrame calling render() 60 times a second, forever.
Page kit/site-three/index.html: four rings at different depths; the camera moves with the scroll. Three.js 0.186.1 (npm, 10/19/2026), copied into vendor/.
// On demand: only draws when scrolling changed the progress and the scene is on screen.
const talvez = () => {
pedido = false;
if (!visivel) return;
const p = progresso();
if (Math.abs(p - ultimo) < 1e-4) return;
ultimo = p; desenhar(p);
};
const agendar = () => { if (!pedido) { pedido = true; requestAnimationFrame(talvez); } };three-medir.mjs scrolls the page in a headless Chromium and reads window.__renders in each situation.
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a4; rm -rf "$E"; mkdir -p "$E"
node "$K/scripts/servir.mjs" "$K/site-three" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node "$K/scripts/three-medir.mjs" "$U"; echo "saída: $?"
kill $S
python3 "$K/scripts/peso.py" "$K/site-three" | head -1
echo "three.js com gzip -9: $(cat "$K"/site-three/vendor/*.js | gzip -9 | wc -c) bytes"K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a4; mkdir -p "$E"
node "$K/scripts/servir.mjs" "$K/site-three" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node "$K/scripts/three-medir.mjs" "${U}?sempre=1" | grep "^FALHA"; echo "saída: ${PIPESTATUS[0]}"
kill $SChromium 156.0.8078.4 (Playwright 1.64.0) parado 0 · rolando 30 · fora da tela 0 · reduzir 1 · DPR 1,5 (tela com densidade 3) OK: parado 0 · rolando 30 · fora da tela 0 · reduzir 1 · DPR 1,5 saída: 0 PESO: js 2,12 · html/css 0,00 (MB) three.js com gzip -9: 415205 bytes
Idle and offscreen: zero. With reduced motion: one frame only. The last two lines are the weight: 2.12 MB raw (unminified), 0.42 MB with gzip -9. Servers usually compress JS; JPEG barely compresses. Measure what will travel over the wire before comparing with the film.
FALHA: desenhou 103 vezes parado (devia ser 0) FALHA: desenhou 81 vezes fora da tela (devia ser 0) FALHA: com reduzir movimento desenhou 83 vezes (devia ser 1) saída: 1
With ?sempre=1 the page turns on the tutorial loop. The numbers vary on every run; the failure does not.
Both fit on the same page; each does one thing well.
Real photo, material, hard light: what a generator or a camera does better than code.
The weight grows with the length of the film.
Shapes, diagrams, particles, pieces that react to the mouse or change color: everything drawn on the fly.
The weight is the library (2.12 MB raw, 0.42 MB with gzip here) and the GPU's work on each draw.
A frame film in the opening and a Three.js piece in a section below. Each with its own rule: frames in the bitmap window, scene on demand.
The right library for each motion piece is in course 3 (lesson 6).
Measure, break, and fix.
Run the "measure the scene and the weight" block.
Done when: The line starts with OK: parado 0 · rolando (the number of draws while scrolling varies with the machine), ends with fora da tela 0 · reduzir 1 · DPR 1,5, and saída: 0 follows.
Run the same meter with ?sempre=1 at the end of the URL (the "common mistake: always drawing" block).
Done when: Three FALHA: desenhou … lines and saída: 1.
Copy kit/site-three to a folder of your own and swap the rings for another shape (TorusKnotGeometry, for example) and the material color. Keep the maybe function and the density cap. Serve the folder and measure.
Done when: The three-medir.mjs in your folder answers OK: parado 0 … reduzir 1 with saída: 0.
The explanation appears after you answer.
Question 1 of 4
The page is still, with the Three.js scene on screen. How many times per second should it draw?
Question 2 of 4
On a phone with devicePixelRatio 3, the kit draws at density 1.5. Why?
Question 3 of 4
The meter shows "fora da tela 85". What is missing from the page?
Question 4 of 4
What does the kit's page do with "reduced motion" turned on?
Choose an option. The explanation appears after your attempt.