Un puente es una estructura que salva un obstáculo (río, valle, carretera) transmitiendo las cargas al terreno mediante dos tipos de esfuerzo:
Tensión 🔴
La barra se estira. Los cables solo aguantan tensión. En el simulador aparece en rojo.
Compresión 🔵
La barra se comprime. Los arcos trabajan casi todo en compresión. En el simulador aparece en azul.
Triangulación 🔺
El triángulo es la figura indeformable. Dividir cuadriláteros en triángulos es la clave de toda cercha.
Apoyos 🪨
Sin apoyos fijos el puente se hunde. En el simulador los nodos azules están anclados al terreno.
Factor de seguridad: Los puentes reales se diseñan para aguantar entre 3 y 10 veces la carga máxima esperada. En este simulador el camión pesa el equivalente a varios coches.
🌉VEHÍCULO
Simulador de Puentes
Diseña · Construye · Prueba
VANO
50m
50m
💰 COSTE
$11410
🔄 ITER.
1
BARRAS
15/35
🌉 Simulador de Puentes — NativosIA¿Cómo recrearlo? →
🤖 Crea tu propio simulador
Seis pasos para replicar este recurso con Claude en tu propio proyecto.
📄 Prompt técnico completo
Crea un simulador de puentes educativo en React (Next.js App Router, 'use client') inspirado en Bridge Designer 2014. Un único archivo page.js con todos los componentes.
CANVAS EDITOR 2D (Canvas HTML5, 740x420 px):
- Corrige el offset de click: const r=ref.current.getBoundingClientRect(); x=(e.clientX-r.left)*(CW/r.width)
- Cuadricula de puntos snap a 20px, nodos como circulos, barras como rectangulos rellenos
- Nodos ax:true = anclados al suelo (azules), nodos libres = blancos
- Paredes del canon con bloques de piedra y hatching diagonal (estilo BD2014)
- Agua animada con ondas senoidales en el fondo del canon
- Gorge de ancho variable: LEFT_X y RIGHT_X como estado derivado, botones VANO
3 MATERIALES:
Acero {max:0.028, tOnly:false, cost:700}
Madera {max:0.013, tOnly:false, cost:280}
Cable {max:0.08, tOnly:true, cost:450}
FISICA — Position-Based Dynamics + Verlet:
GRAV=720, TRUCK_F=3200, SUBSTEPS=6, ITERS=16, DAMP=0.9985
Coloreo de estres: blue (compression) -> gray -> red (tension)
Colapso: camion cae >38px bajo ROAD_Y, o >55% de barras rotas
VISTA 3D — Three.js:
import('three') dinamico en useEffect (evita SSR / hydration errors)
Puente dual truss: front z=+1.1, back z=-1.1
Ruedas: rotation.x=PI/2, giran con rotation.z
NUNCA Object.assign para position — usar mesh.position.set(x,y,z)Next.js 14 App RouterThree.js WebGLPBD Verlet PhysicsCanvas 2D5 VehículosPavimento/DeckResponsive
Creado con Claude de Anthropic · Física PBD Verlet · Inspirado en Bridge Designer 2014 (WBDG) · Recurso educativo de NativosIA.es