🎯 Objetivo del Proyecto
He creado un entorno 3D interactivo que simula un espacio de trabajo
retro con estética cyberpunk/horror. La escena representa mi escritorio virtual con un monitor CRT
antiguo, torre de computadora, teclado, mouse y diversos elementos de oficina.
El proyecto combina Three.js para la renderización 3D con una
interfaz de usuario que permite navegar entre diferentes archivos HTML como si fuera un
sistema operativo Windows XP virtual.
📁 Estructura de Archivos
El proyecto contiene los siguientes archivos HTML que he desarrollado:
📄 Windows.html - Escritorio virtual XP
🔍 Buscador.html - Motor UMBRASEARCH
🎮 game Doom-berserk.html - Juego retro
🎵 Gestor Multimedia Extreme.html
🏠 Index.html - Página principal
🍽️ Restaurante Infernal.html
✝️ Semana-Santa.html - Andalucía
🛒 Tienda.html - E-commerce
🎵 La Reina Mora.mp3 - Audio
Además, tengo organizadas las carpetas: CSS (estilos),
IMG (imágenes), JS (JavaScript)
y Capturas (screenshots).
🖥️ Sistema Windows XP Virtual
Implementé un simulador de Windows XP que incluye:
- WebXP Navigator: Navegador web personalizado que carga los diferentes HTML
- Mi PC: Acceso al sistema de archivos
- Mis Documentos: Carpeta de archivos personales
- Papelera: Sistema de eliminación de archivos
El navegador WebXP permite cargar dinámicamente diferentes páginas mediante un iframe,
simulando la navegación real. Incluí un motor de búsqueda llamado
"UMBRASEARCH" con interfaz oscura y temática cyberpunk.
🎨 Escena 3D - Three.js
La escena principal está construida con Three.js r128 e incluye:
- Iluminación atmosférica: Luz verde tenue del monitor como fuente principal,
con fog volumétrico para crear ambiente de horror
- Materiales PBR: Usé MeshStandardMaterial con diferentes valores de
roughness y metalness para cada objeto
- Sombras en tiempo real: PCFSoftShadowMap para sombras suaves y realistas
- Partículas de niebla: 80 partículas animadas que flotan en la escena
💻 Código Principal - Explicación Técnica
Configuración de la escena:
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0f0e);
scene.fog = new THREE.FogExp2(0x0a0f0e, 0.08);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(3, 3.5, 6);
Sistema de iluminación:
// Luz principal del monitor (verde)
const screenLight = new THREE.PointLight(0xa8d8cc, 2.5, 8);
screenLight.position.set(0, 2.2, 0.5);
// Efecto de flicker en la animación
const flicker = 1 + Math.sin(time * 10) * 0.02;
screenLight.intensity = 2.5 * flicker;
Textura dinámica del monitor:
// Creo un canvas para dibujar la pantalla
const screenCanvas = document.createElement('canvas');
screenCanvas.width = 512;
screenCanvas.height = 384;
const ctx = screenCanvas.getContext('2d');
// Dibujo el contenido tipo terminal
ctx.fillStyle = '#0f1413';
ctx.fillRect(0, 0, 512, 384);
ctx.fillStyle = '#a8d8cc';
ctx.fillText('Henry Heffernan - Terminal', 8, 15);
🎮 Controles Interactivos
Implementé OrbitControls para permitir:
- Arrastrar: Rotar la cámara alrededor de la escena
- Scroll: Zoom in/out con distancia mínima de 2 y máxima de 15
- Click derecho: Pan/mover la cámara lateralmente
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.minDistance = 2;
controls.maxDistance = 15;
Elementos de la Escena
Cada objeto fue modelado proceduralmente con geometrías básicas:
- Monitor CRT: BoxGeometry para el cuerpo, PlaneGeometry para la pantalla
con curvatura simulada mediante vértices desplazados
- Teclado: Múltiples BoxGeometry para cada tecla, organizadas en filas
con staggered layout
- Cables: CatmullRomCurve3 para crear curvas orgánicas entre dispositivos
- Planta: SphereGeometry escalada para crear hojas orgánicas
- Papeles: Pilas de BoxGeometry delgadas con rotaciones aleatorias
🌟 Efectos Especiales
- Vignette: Gradiente radial CSS para oscurecer las esquinas y crear
atmósfera
- Screen Glow: MeshBasicMaterial con color verde brillante en la pantalla
- LED parpadeante: Animación en el loop principal que cambia la
intensidad de la luz
- Loading screen: Spinner animado con CSS que desaparece tras 1.5s
🔧 Optimizaciones Implementadas
- Pixel ratio limitado: Math.min(window.devicePixelRatio, 2) para
evitar sobrecarga en pantallas 4K
- Damping en controles: Movimiento suave con factor 0.08
- Geometrías reutilizables: Mismo material para objetos similares
- Shadow map optimizado: PCFSoftShadowMap en lugar de BasicShadowMap
📝 Reflexiones Personales
Este proyecto me permitió explorar Three.js a fondo, especialmente
la creación de escenas complejas con múltiples objetos, iluminación atmosférica y animaciones.
La parte más desafiante fue lograr el balance entre la estética retro y el rendimiento.
Aprendí a:
- Crear texturas dinámicas con Canvas API
- Implementar sistemas de partículas simples
- Optimizar renderizado 3D en navegador
- Combinar HTML/CSS con WebGL de forma cohesiva
"La combinación de nostalgia (Windows XP, CRT) con tecnología moderna (WebGL, Three.js)
crea una experiencia única que conecta el pasado con el presente del desarrollo web."