102.3K+Baixar
Ir para o guia de uso
Three.js Interactionpor CloudAI-X

Three.js Interaction Skill.

Conecte um gesto ao objeto 3D pretendido usando as coordenadas reais do canvas e da câmera.

  • 3D
  • Three.js
Baixar OpenDesignVer guia de uso
Revisão da fonte · Three.js InteractionSKILL.md
Tarefa 3D Produz • Seleção de objetos relativa ao canvas • Uma configuração adequada de controle de câmera • Comportamento de seleção, hover, arrastar ou transformação Antes de começar Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.
Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Three.js Interaction: Selecionar e manipular objetos

Seleção baseada em raios, conversão de coordenadas, controles de câmera, seleção e manipulação de objetos.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Three.js Interaction cobre raycasting e controles. Explica como a entrada na tela vira um raio da câmera, como as interseções identificam objetos ou instâncias e por que um canvas incorporado precisa de conversão de coordenadas própria, em vez de pressupor a janela inteira.

Navegação de câmera e manipulação de objetos são tarefas separadas. Controles de órbita, voo, mapa, arrastar e transformar têm papéis diferentes. Uma cena do tipo editor precisa coordenar esses handlers para que arrastar um modelo não gire a câmera também.

Entregas esperadas

  • Seleção de objetos relativa ao canvas
  • Uma configuração adequada de controle de câmera
  • Comportamento de seleção, hover, arrastar ou transformação
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Definir alvos

    Liste os objetos selecionáveis e decida se malhas aninhadas ou instâncias são alvos separados.

  2. 02
    Mapear a entrada

    Normalize as posições do ponteiro em relação ao retângulo do canvas e faça o raycast pela câmera ativa.

  3. 03
    Coordenar controles

    Gerencie conflitos de navegação durante a manipulação e restaure o feedback quando a seleção mudar.

02 Quando usar

Quando usar

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

Boa opção

  • Configuradores de produtoSelecione uma parte do produto e destaque ou aja sobre esse objeto específico.
  • Editores de cenaUse controles de transformação ou arrastar para mover, girar e escalar a geometria selecionada.

Limites a verificar

  • Acessibilidade é outro assuntoExemplos com ponteiro, por si sós, não comprovam acesso por teclado ou tecnologia assistiva.
  • O ciclo de vida precisa de revisãoVerifique as APIs dos controles e limpe os event handlers na aplicação real.

Traga estas entradas

  • Hierarquia da cenaIdentifique as malhas e instâncias selecionáveis.
  • Posição do canvasForneça a visualização incorporada real e a câmera ativa.
  • Comportamento da entradaEspecifique navegação, manipulação, toque e controles alternativos.

03 Decisões importantes

Decisões que importam

  1. Normalização precisa

    Coordenadas relativas ao canvas evitam que a seleção se desvie dentro do layout da página.

  2. Responsabilidade da interação

    Desativar controles concorrentes dá a cada gesto um único propósito.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use o diretório relevante de threejs-skills como orientação para o agente. Ele não é o runtime do Three.js e não instala assets de cena.

Arquivo-fonte original
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use threejs-interaction para adicionar seleção a este visualizador de produto incorporado. Faça raycast apenas nas partes listadas, usando coordenadas relativas ao canvas. Destaque a parte selecionada e impeça que os controles de órbita briguem com o arrastar de objetos. Descreva separadamente uma alternativa por teclado.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

  • A seleção continua precisa após mudanças de layout.
  • Arrastar não gira a câmera.
  • Destaques e listeners antigos são tratados explicitamente.

OpenDesign oferece um espaço de design local para agentes de código. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão da fonte fixada e vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Proprietário da fonte
CloudAI-X
Repositório
CloudAI-X/threejs-skills
Arquivo da skill
skills/threejs-interaction/SKILL.md
Licença
Não confirmada — revise os termos upstream antes de reutilizar.
Snapshot revisado
2026-10-07 · b1c623076c66
Resumo editorial da fonte
Seleção baseada em raios, conversão de coordenadas, controles de câmera, seleção e manipulação de objetos.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Consegue distinguir instâncias?

O resultado de interseção documentado inclui instanceId para InstancedMesh.

Por que os cliques podem errar em um canvas incorporado?

Uma causa possível é usar as dimensões da janela em vez do retângulo do canvas.

Cobre apenas navegação por órbita?

Não. Discute vários modelos de controle de câmera, além de arrastar objetos e transformações.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha briefing, material de origem e trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md