← Todos os 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
Você precisa de:Um brief de cena (brief.txt: [objects] id: shape | size … | pos … | material …; [lights]; [camera]; [scene]) e um navegador com WebGL para ver a cena.

Similar Skills

Blender Scene Assistant previewFree

Blender Scene Assistant

  1. Escreva o brief de cena em texto simples
  2. Execute o gerador sobre o brief
  3. Leia o relatório antes de confiar na cena
  4. Renderize no Blender, sem interface ou no viewport
  5. Corrija os erros e execute novamente

View all skills →

O que você recebe

  • Um scene.html independente: import map, renderizador com sombras, cada objeto com seu material padrão
  • OrbitControls e animação de plataforma giratória, mais um manipulador de redimensionamento
  • Um relatório de cena: tabelas de objetos e luzes, mais todos os erros e avisos
  • Um script de módulo verificado com node --check a cada execução

Ideal para

  • Plataformas giratórias de produto e cenas 3D da web para compartilhar por link
  • Prototipar uma cena 3D antes de ligá-la a um site
  • Manter a cena honesta: só o que está listado é construído

Não serve para

  • Modelos carregados complexos (GLTF/FBX) — apenas primitivas
  • Inventar objetos, luzes ou um fundo que faltem para completar uma cena
  • Provar que uma cena ficou boa — um relatório limpo significa que ela corresponde ao brief, não à realidade

Resultado de exemplo

Um exemplo do que este Skill produz. Conteúdo de amostra, mostrado para ilustração.

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).

Sobre este Skill

You say
Crie uma plataforma giratória de produto em Three.js: uma caneca amarela sobre um pedestal escuro, fundo claro, controles de órbita.

Como instalar

  1. Copie o prompt de instalação no seu agente: Read https://skillu.dev/install/agent.md, then install the Three.js Scene Builder skill (threejs-scene-builder).
  2. Ou baixe o pacote do Skill nesta página após o lançamento e coloque a pasta dele no diretório de skills do seu agente.
  3. Chame-o com um comando de barra, ex.: /threejs-scene-builder, e descreva o que você quer em palavras simples.

Perguntas frequentes

O que acontece se meu brief tiver um erro?

A cena ainda é gerada a partir das partes válidas, e o relatório lista todos os erros e avisos: formas desconhecidas são descartadas, ids duplicados mantêm a primeira definição, tamanhos incorretos são apontados e uma câmera ausente é substituída pelo padrão declarado. Corrija o brief e execute novamente.

Ele constrói algo que eu não listei?

Não. Só aparecem os objetos, luzes e ajustes do seu brief. Um fundo ou uma segunda luz ausente é uma lacuna do brief a ser corrigida, não algo que a skill preencha.

A cena precisa de um servidor?

Qualquer hospedagem estática ou um servidor local de uma linha basta (python3 -m http.server). A página carrega three.js 0.160.0 do CDN unpkg; para uso totalmente offline, baixe o módulo e o addon OrbitControls localmente e aponte o import map para eles.

Obter o Premium Ver mais Skills