Experimento 05

Three.js

Scene · Camera · Renderer · Mesh · Lights · Clock

scroll

Concepto 01 — Setup

Tres objetos para
cualquier escena

Toda escena Three.js necesita lo mismo: un contenedor (Scene), un punto de vista (Camera) y un dibujador (WebGLRenderer). A eso se le añaden objetos (Mesh = Geometry + Material).

setup mínimo

import * as THREE from "three";

// 1. Contenedor de todo
const scene = new THREE.Scene();

// 2. Punto de vista (fov, aspect, near, far)
const camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100);
camera.position.z = 4;

// 3. Dibujador (usa WebGL del canvas)
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(w, h);

// 4. Objeto = Geometry + Material
const mesh = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1, 1),
  new THREE.MeshStandardMaterial({ color: "#A8CC44" })
);
scene.add(mesh);

// 5. Loop
function tick() {
  requestAnimationFrame(tick);
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}
tick();

Concepto 02 — Geometrías

Primitivos incorporados

Three.js incluye geometrías listas para usar. Cada una acepta parámetros (segmentos, radio, altura…) que definen su resolución y forma. Wireframe activo para ver la malla de polígonos.

Cubo

BoxGeometry

Esfera

SphereGeometry

Torus

TorusGeometry

Icosaedro

IcosahedronGeometry

Cilindro

CylinderGeometry

Torus Knot

TorusKnotGeometry

Concepto 03 — Materiales

El material define cómo
reacciona a la luz

La geometría define la forma — el material define la apariencia. MeshBasicMaterial ignora las luces, MeshStandardMaterial usa PBR (físicamente correcto).

MeshBasicMaterial

Sin iluminación. Siempre visible, plano. Útil para wireframe y debug.

color: '#A8CC44'

MeshNormalMaterial

Mapea las normales de la malla a colores RGB. No necesita luces.

— (sin parámetros)

MeshStandardMaterial

PBR físicamente correcto. Necesita luz. Parámetros: roughness, metalness.

roughness: 0.4, metalness: 0.3

Concepto 04 — Luces

Sin luz no hay forma

Los materiales físicos (MeshStandardMaterial) necesitan al menos una luz para ser visibles. La combinación de tipos crea profundidad.

AmbientLight

new THREE.AmbientLight('#fff', 0.3)

Luz omnidireccional sin origen. Ilumina todo por igual. Base para evitar zonas completamente negras.

PointLight

new THREE.PointLight('#A8CC44', 20, 8)

Emana desde un punto en todas direcciones, como una bombilla. Tiene posición, intensidad y distancia.

DirectionalLight

new THREE.DirectionalLight('#fff', 1)

Rayos paralelos desde una dirección, como el sol. Sin atenuación por distancia.

HemisphereLight

new THREE.HemisphereLight('#A8CC44', '#8C3D1E', 0.8)

Color diferente desde arriba y desde abajo. Simula cielo + suelo. Buen fill sin sombras.

completado

5 / 5 experimentos

← Volver al índice