Capacidad C30 · Nivel 3

3D confinado a una caja

El patrón medido en Locomotive: la escena vive en un recuadro de 560×760, no en el fondo de la pantalla. Todo lo demás de esta página es HTML normal.

Escena tridimensional interactiva

Un icosaedro facetado gira lentamente sobre su eje dentro de un recuadro de 560 por 760 píxeles. Está iluminado por una luz principal cálida en tono oro y una luz de relleno en verde profundo, los dos colores de la marca Faro Digital.

La figura responde al movimiento del cursor inclinándose hacia él, dentro de un margen corto. Tres controles permiten ajustar la velocidad de giro, la inclinación que provoca el cursor y la intensidad de la luz.

La escena es decorativa: no contiene texto, datos ni enlaces. Todo el contenido de esta página está en el HTML que la rodea.

iniciando…

Por qué la caja es la capacidad, y no el 3D

  • Está medido, no elegido por gusto: los canvas de las webs alcanzables son pequeños y locales — makemepulse 166×200, Locomotive 550×770. Los fondos 3D a pantalla completa son de otra liga y de otro modelo de negocio.
  • El coste se queda dentro de la caja. Si la escena va lenta, va lenta en 560×760 píxeles, no en toda la pantalla del visitante.
  • El contenido no depende de ella. Esta página se lee entera con la caja vacía — y eso se puede comprobar apagando WebGL.
Cero dependencias. El catálogo asignaba three.js (~150 KB) a esta capacidad. Medido al construirla: ~190 líneas de WebGL para una forma con luz y reacción al puntero.

Es la cuarta de cuatro capacidades N3 que no necesitan la librería que tenían asignada. Pero con un matiz honesto: si hubiera que cargar un modelo 3D de un archivo, con materiales y varias luces, three.js sí se ganaría su sitio.

Lento acompaña. Rápido compite con el texto.

Cuánto se gira la figura hacia donde está el ratón.

Sube el contraste entre caras. Demasiado, y se pierde la forma.


      

    

  






  

    
Qué tienes que mirar

    
Cinco cosas concretas

    
    
      
  1. La figura gira sola y se inclina hacia donde mueves el ratón, sin seguirlo del todo.
    2. 
      
  2. Mueve los tres controles mientras la miras. Los números que elijas son los que se quedan — dímelos.
    3. 
      
  3. Selecciona el texto de la derecha. Es HTML normal: el 3D no se ha comido el contenido.
    4. 
      
  4. Busca con Ctrl+F la palabra icosaedro. La encuentra, aunque no esté escrita en pantalla: está en la reserva semántica que lee un lector de pantalla y Google.
    5. 
      
  5. La caja tiene un tamaño fijo. Ese es el punto: si esto fuera a pantalla completa, sería Nivel 4 y otra conversación.
    6.