Rastrojero

Simulador off-road en el navegador con un Rastrojero 1971 modelado en Blender. Se maneja con físicas de vehículo reales (suspensión, tracción trasera, frenos) y tiene un modo edición para armar tu propio circuito de pruebas con conos, rampas, carteles, barreras y una zona de carga donde podés subir cajas a la camioneta.

Tecnologías

• Three.js r186 con WebGPURenderer (cae automáticamente a WebGL2 si el navegador no soporta WebGPU)
• TSL (Three.js Shading Language) para los materiales procedurales: grilla del suelo, bordes y zona de carga
• tsl-textures para el patrón del concreto
• Rapier (@dimforge/rapier3d-compat) para las físicas y el controlador de vehículo
• Tweakpane para el panel de edición
• Vite como servidor de desarrollo y bundler

Requisitos

• Node.js 20.19 o superior (o 22.12+)
• Un navegador moderno: Chrome/Edge recomendados (WebGPU). En navegadores sin WebGPU se usa WebGL2.

Instalación y uso

npm install
npm run dev

La app queda en http://localhost:5173 (con --host, también accesible desde otros dispositivos de la red).

Comando	Descripción
npm run dev	Servidor de desarrollo con recarga en caliente
npm run build	Build de producción en dist/
npm run preview	Sirve el build de producción para probarlo

Para ver el rendimiento (FPS y tiempo de CPU/GPU de cada pasada de render) agregá ?inspector a la URL, por ejemplo http://localhost:5173/?inspector.

Controles

Manejo

Tecla	Acción
W / ↑	Acelerar
S / ↓	Marcha atrás
A / ←	Girar a la izquierda
D / →	Girar a la derecha
Espacio	Freno
B	Balizas
L	Luces

Si la camioneta llega a la franja amarilla del borde del terreno, frena sola.

Edición

Tecla	Acción
X	Borrar el asset seleccionado
Rueda del mouse	Rotar el asset mientras lo estás colocando

En local aparece además el botón Grabar, que graba el canvas a un video .webm.

Modo edición

El modo edición se activa con el interruptor EDIT MODE del panel Edit Panel (arriba a la derecha).

Al entrar:

• La cámara pasa a una vista general del terreno y la camioneta vuelve a la posición de salida y se oculta.
• Se habilitan las carpetas Floor, Camera y Assets del panel.
• Se marca en rojo la zona de salida de la camioneta: ahí no se pueden colocar assets.

Mover la cámara: arrastrá con el botón izquierdo o el del medio sobre el terreno. En Camera → Zoom Out Mode podés alejarla para ver todo el mapa.

Colocar assets:

1. En Assets elegí qué colocar: Cone, Barrel, Ramp, Speed Bump, Concrete Barrier, Tire, los carteles de Signs (Ahead, Stop, Warning, Do Not Enter) o Cargo Zone.
2. Aparece una vista previa semitransparente que sigue al mouse sobre el terreno. Con la rueda del mouse la rotás en pasos de 22,5°.
3. Hacé clic para colocarlo. Podés seguir colocando más del mismo tipo; para terminar, volvé a hacer clic en el mismo botón o elegí otro.

No se pueden colocar assets dentro de la zona de salida (salvo la zona de carga) ni dentro de una zona de carga. Solo puede haber una Cargo Zone: mientras exista, su botón queda deshabilitado.

Editar assets colocados: al pasar el mouse por encima de un asset se resalta; con un clic se selecciona y aparece el gizmo:

• Ejes X / Z: mueven el asset sobre ese eje.
• Cuadrado central: lo mueve libremente sobre el suelo.
• Anillo: lo rota sobre su eje vertical.

Si soltás un asset dentro de la zona de carga, vuelve a su posición anterior. Con X se borra el asset seleccionado; si es la zona de carga, se borran también sus cajas.

Suelo: en Floor → Grid cambiás el estilo de la grilla (Dark, Contrast, Default, Blueprint, Retro, Neon, Funky) y su opacidad. En Floor → Limits ajustás el ancho y la separación del borde del área de manejo y el tamaño de las franjas.

Guardar:

• La configuración del suelo se guarda sola en el navegador cada vez que la cambiás.
• Los assets se guardan con el botón Assets → Save Assets y se vuelven a cargar al abrir la página. Se guardan en el localStorage del navegador, así que son locales de cada navegador.

Al salir del modo edición la camioneta vuelve a aparecer en la salida y la cámara la sigue de nuevo.

Zona de carga

La zona de carga tiene una plataforma con 16 cajas. Entrá con la caja de la camioneta hacia la plataforma: cuando la caja de carga queda dentro de la zona, la luz pasa de roja a verde. Con la luz en verde podés arrastrar las cajas con el mouse y soltarlas en la caja de la camioneta.

Estructura del proyecto

src/
├── core/        Game (singleton), Viewport, Resources (carga de modelos), Events
├── engine/      Render (WebGPURenderer, post-processing, resolución adaptativa),
│                cámara, físicas (Rapier) e inputs
├── gameplay/    Mundo: suelo, entorno/luces, vehículo, assets, zonas y sistemas
├── editor/      Panel de Tweakpane, colocación de assets, selección y gizmos
├── graphics/    Materiales (TSL y estándar) y funciones TSL
└── utils/       Grabación de video y utilidades de geometría
public/models/   Modelos .glb (camioneta, ruedas y assets)

Log

• Ahora la cargo zone se puede configurar con assets
• Agregué una zona de carga/descarga
• Actualicé el collider de la camioneta
• Estuve ajustando los colliders de varios assets
• Rehice varias partes del modo edición
• Ahora se puede guardar la configuración de los assets
• Esta semana incorporé algunos assets nuevos
• Después de estar un buen rato con un bug en el spawn, por fin quedó resuelto
• El panel de edición ya está preparado para diferentes assets
• Agregué el panel de edición
• Le agregué los primeros objetos
• Al material del suelo le sumé la grilla
• Después de ajustar el steering, ya está listo lo básico
• Exporté el Ambient Occlusion desde blender y me gusta mas
• Frenos traseros, aplican fuerza diferente según la dirección
• El sistema de luces OK: frontales, freno, balizas y reversa
• Los materiales del modelo se ven bien por ahora
• Hice una retopología
• Three.js
• Rastrojero 1971