← Todos los Skills · 3D · Three.js Scene Builder

Three.js Scene Builder — resultado final
Runs inClaude Code Codex Cursor Muse Dot Grok Bot Cue OpenClaw Hermes
Install guidesClaude Code Codex Cursor Muse
Necesitas:Un brief de escena (brief.txt: [objects] id: shape | size … | pos … | material …; [lights]; [camera]; [scene]) y un navegador con WebGL para ver la escena.

Similar Skills

Blender Scene Assistant previewFree

Blender Scene Assistant

  1. Escribe el brief de escena en texto plano
  2. Ejecuta el generador sobre el brief
  3. Lee el informe antes de confiar en la escena
  4. Renderiza en Blender, sin interfaz o en el viewport
  5. Corrige los errores y vuelve a ejecutar

View all skills →

Qué obtienes

  • Un scene.html independiente: import map, renderizador con sombras, cada objeto con su material estándar
  • OrbitControls y animación de plataforma giratoria, más un manejador de redimensionado
  • Un informe de escena: tablas de objetos y luces, más todos los errores y advertencias
  • Un script de módulo verificado con node --check en cada ejecución

Ideal para

  • Plataformas giratorias de producto y escenas web 3D para compartir por enlace
  • Prototipar una escena 3D antes de integrarla en un sitio
  • Mantener la escena honesta: solo se construye lo enumerado

No es para

  • Modelos cargados complejos (GLTF/FBX) — solo primitivas
  • Inventar objetos, luces o un fondo que falten para completar una escena
  • Probar que una escena se ve bien — un informe limpio significa que coincide con el brief, no con la realidad

Resultado de ejemplo

Un ejemplo de lo que produce este Skill. Contenido de muestra, mostrado a modo de ilustración.

Three.js Scene Builder report — sample

Scene report: Yellow Mug Turntable

Objects: 3 valid | Lights: 2 | Camera: custom | Background: #262627 | Turntable: on

Objects: pedestal (cylinder 2.0, 0.15); mug (cylinder 0.9, 1.1); backdrop (plane 12, 12).

Errors: none. Warnings: none. Module node --check: OK.

Messy draft check: 2 valid objects, 3 errors (unknown capsule shape; duplicate mug id; negative-size badbox), 1 warning (missing camera — default added).

Acerca de este Skill

You say
Hazme una plataforma giratoria de producto en Three.js: una taza amarilla sobre un pedestal oscuro, fondo claro, controles de órbita.

Cómo instalarlo

  1. Copia el prompt de instalación en tu agente: Read https://skillu.dev/install/agent.md, then install the Three.js Scene Builder skill (threejs-scene-builder).
  2. O descarga el paquete del Skill desde esta página tras el lanzamiento y coloca su carpeta en el directorio de skills de tu agente.
  3. Llámalo con un comando de barra, p. ej. /threejs-scene-builder, y describe lo que quieres con palabras sencillas.

Preguntas frecuentes

¿Qué pasa si mi brief tiene un error?

La escena se genera igualmente desde las partes válidas, y el informe enumera todos los errores y advertencias: las formas desconocidas se descartan, los ids duplicados conservan su primera definición, los tamaños incorrectos se señalan y una cámara ausente se sustituye por el valor por defecto declarado. Corrige el brief y vuelve a ejecutar.

¿Construye algo que no enumeré?

No. Solo aparecen los objetos, luces y ajustes de tu brief. Un fondo o una segunda luz que falten son un hueco del brief que debes corregir, no algo que la skill rellene.

¿La escena necesita un servidor?

Cualquier hosting estático o un servidor local de una línea basta (python3 -m http.server). La página carga three.js 0.160.0 desde el CDN de unpkg; para usarla totalmente sin conexión, descarga el módulo y el addon OrbitControls en local y apunta el import map hacia ellos.

Obtener Premium Explorar más Skills