Three.js Interactionpor CloudAI-X

Three.js Interaction Skill.

Conecta un gesto con el objeto 3D deseado usando las coordenadas reales del lienzo y de la cámara.

3D
Three.js

Revisión de la fuente · Three.js InteractionSKILL.md

Tarea 3D Produce • Selección de objetos relativa al lienzo • Una configuración adecuada de control de cámara • Comportamiento de selección, hover, arrastre o transformación Antes de empezar Un proyecto de Three.js y un renderizador que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Three.js Interaction: seleccionar y manipular objetos

Selección basada en rayos, conversión de coordenadas, controles de cámara, selección y manipulación de objetos.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Three.js Interaction cubre el raycasting y los controles. Explica cómo la entrada en pantalla se convierte en un rayo de cámara, cómo las intersecciones identifican objetos o instancias y por qué un lienzo incrustado necesita su propia conversión de coordenadas en lugar de suponer la ventana completa.

La navegación de cámara y la manipulación de objetos son tareas distintas. Los controles orbit, fly, map, drag y transform tienen funciones diferentes. Una escena de tipo editor debe coordinar esos manejadores para que arrastrar un modelo no gire también la cámara.

Entregables esperados

Selección de objetos relativa al lienzo
Una configuración adecuada de control de cámara
Comportamiento de selección, hover, arrastre o transformación

Ver el brief de ejemplo

Del brief a la revisión

01
Definir objetivos
Enumera los objetos seleccionables y decide si las mallas anidadas o las instancias son objetivos independientes.
02
Asignar la entrada
Normaliza las posiciones del puntero respecto al rectángulo del lienzo y lanza el rayo a través de la cámara activa.
03
Coordinar los controles
Gestiona los conflictos de navegación durante la manipulación y restablece la respuesta visual cuando cambia la selección.

02 Cuándo usarlo

Cuándo usarlo

Un proyecto de Three.js y un renderizador que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Un buen caso de uso

Configuradores de productoSelecciona una pieza del producto y resáltala o actúa sobre ese objeto concreto.
Editores de escenasUsa controles de transformación o arrastre para mover, rotar y escalar la geometría seleccionada.

Límites que conviene comprobar

La accesibilidad es un tema aparteLos ejemplos con puntero por sí solos no demuestran acceso con teclado ni con tecnologías de asistencia.
El ciclo de vida requiere revisiónVerifica las API de los controles y limpia los manejadores de eventos en la aplicación real.

Aporta estos datos

Jerarquía de la escenaIdentifica las mallas e instancias seleccionables.
Ubicación del lienzoProporciona la vista incrustada real y la cámara activa.
Comportamiento de la entradaEspecifica la navegación, la manipulación, el uso táctil y los controles alternativos.

03 Decisiones importantes

Decisiones importantes

Normalización precisa
Las coordenadas relativas al lienzo evitan que la selección se desvíe dentro del diseño de la página.
Propiedad de la interacción
Desactivar los controles que compiten da a cada gesto un único propósito claro.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Usa el directorio threejs-skills correspondiente como guía para el agente. No es el entorno de ejecución de Three.js ni instala recursos de escena.

Archivo fuente original

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

Un proyecto de Three.js y un renderizador que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa threejs-interaction para añadir selección a este visor de producto incrustado. Lanza rayos solo contra las piezas indicadas usando coordenadas relativas al lienzo. Resalta la pieza seleccionada e impide que los controles orbit compitan con el arrastre de objetos. Describe aparte una alternativa con teclado.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

La selección sigue siendo precisa tras cambios de diseño.
Arrastrar no hace orbitar la cámara.
Los resaltados y listeners antiguos se gestionan de forma explícita.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: CloudAI-X
Repositorio: CloudAI-X/threejs-skills
Archivo del skill: skills/threejs-interaction/SKILL.md
Licencia: No confirmada: revisa los términos originales antes de reutilizarlo.
Instantánea revisada: 2026-10-07 · b1c623076c66

Resumen editorial de la fuente

Selección basada en rayos, conversión de coordenadas, controles de cámara, selección y manipulación de objetos.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puede distinguir instancias?

El resultado de intersección documentado incluye instanceId para InstancedMesh.

¿Por qué pueden fallar los clics en un lienzo incrustado?

Una posible causa es usar las dimensiones de la ventana en lugar del rectángulo del lienzo.

¿Solo cubre la navegación orbit?

No. Trata varios modelos de control de cámara, además del arrastre y las transformaciones de objetos.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño