Clase 4 · 15 min
Los cuadros de video dan la película; Three.js da una escena dibujada en código, que cambia de ángulo según el scroll. El riesgo es que la escena dibuje sin parar, incluso quieta o fuera de la pantalla, y caliente el celular. Aquí mides, en un Chromium sin pantalla, cuántas veces dibuja la escena en cada situación, y ves fallar el error común.
Comenzar la clase
Objetivo: medir una escena Three.js que solo dibuja cuando el scroll cambia, se detiene fuera de la pantalla y respeta reducir movimiento.
Dibujo bajo demanda: cada pregunta es un motivo para NO dibujar. Haz clic en cada etapa.
El error común es el bucle del tutorial: requestAnimationFrame llamando a render() 60 veces por segundo, para siempre.
Página kit/site-three/index.html: cuatro anillos a distintas profundidades; la cámara avanza con el scroll. Three.js 0.186.1 (npm, 19/10/2026), copiado en vendor/.
// Bajo demanda: solo dibuja cuando el scroll cambió el progreso y la escena está en pantalla.
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); } };El three-medir.mjs hace scroll en la página en un Chromium sin pantalla y lee window.__renders en cada situación.
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
Quieta y fuera de la pantalla: cero. Con reducir movimiento: un cuadro solo. Las dos últimas líneas son el peso: 2,12 MB en bruto (sin minificar), 0,42 MB con gzip -9. Los servidores suelen comprimir JS; el JPEG casi no se comprime. Mide lo que va a viajar por la red antes de compararlo con la película.
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
Con ?sempre=1 la página activa el bucle del tutorial. Los números varían en cada ejecución; lo que no varía es la falla.
Los dos caben en la misma página; cada uno hace bien una cosa.
Foto real, material, luz difícil: lo que un generador o una cámara hacen mejor que el código.
El peso crece con la duración de la película.
Formas, diagramas, partículas, piezas que reaccionan al mouse o cambian de color: todo dibujado al instante.
El peso es la biblioteca (2,12 MB en bruto, 0,42 MB con gzip aquí) y el trabajo de la GPU en cada dibujo.
Película de cuadros en la apertura y una pieza Three.js en una sección más abajo. Cada uno con su regla: cuadros en la ventana de bitmaps, escena bajo demanda.
La biblioteca adecuada para cada pieza de motion está en el curso 3 (clase 6).
Medir, romper y arreglar.
Ejecuta el bloque "medir la escena y el peso".
Listo cuando: La línea comienza con OK: parado 0 · rolando (el número de dibujos al hacer scroll varía según la máquina), termina con fora da tela 0 · reduzir 1 · DPR 1,5, y viene saída: 0.
Ejecuta el mismo medidor con ?sempre=1 al final de la URL (bloque "error común: dibujar siempre").
Listo cuando: Tres líneas FALHA: desenhou … y saída: 1.
Copia kit/site-three a una carpeta tuya y cambia los anillos por otra forma (TorusKnotGeometry, por ejemplo) y el color del material. Mantén la función talvez y el techo de densidad. Sirve la carpeta y mide.
Listo cuando: El three-medir.mjs en tu carpeta responde OK: parado 0 … reduzir 1 con saída: 0.
La explicación aparece después de tu respuesta.
Pregunta 1 de 4
La página está quieta, con la escena de Three.js en pantalla. ¿Cuántas veces por segundo debe dibujar?
Pregunta 2 de 4
En un celular con devicePixelRatio 3, el kit dibuja con densidad 1,5. ¿Por qué?
Pregunta 3 de 4
El medidor muestra "fora da tela 85". ¿Qué le falta a la página?
Pregunta 4 de 4
¿Qué hace la página del kit con "reducir movimiento" activado?
Elige una alternativa. La explicación aparece después de tu intento.