Three.js Interactiondi CloudAI-X

Three.js Interaction Skill.

Collega un gesto all'oggetto 3D previsto usando le coordinate effettive del canvas e della camera.

3D
Three.js

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Three.js InteractionSKILL.md

Attività 3D Produce • Picking degli oggetti relativo al canvas • Una configurazione adeguata dei controlli della camera • Comportamento di selezione, hover, trascinamento o trasformazione Prima di iniziare Un progetto Three.js funzionante e un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Three.js Interaction: selezionare e manipolare oggetti

Picking basato su raggi, conversione delle coordinate, controlli della camera, selezione e manipolazione degli oggetti.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Three.js Interaction copre raycasting e controlli. Spiega come l'input sullo schermo diventa un raggio della camera, come le intersezioni identificano oggetti o istanze e perché un canvas incorporato richiede una propria conversione delle coordinate invece di presupporre la finestra intera.

La navigazione della camera e la manipolazione degli oggetti sono compiti separati. I controlli orbit, fly, map, drag e transform hanno ruoli diversi. Una scena di tipo editor deve coordinare questi gestori, così che trascinare un modello non faccia ruotare anche la camera.

Risultati attesi

Picking degli oggetti relativo al canvas
Una configurazione adeguata dei controlli della camera
Comportamento di selezione, hover, trascinamento o trasformazione

Vedi il brief di esempio

Dal brief alla revisione

01
Definire i bersagli
Elenca gli oggetti selezionabili e decidi se mesh annidate o istanze siano bersagli separati.
02
Mappare l'input
Normalizza le posizioni del puntatore rispetto al rettangolo del canvas ed esegui il raycast attraverso la camera attiva.
03
Coordinare i controlli
Gestisci i conflitti di navigazione durante la manipolazione e ripristina il feedback quando cambia la selezione.

02 Quando usarlo

Quando usarla

Un progetto Three.js funzionante e un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

Un buon caso d'uso

Configuratori di prodottoSeleziona una parte del prodotto ed evidenzia quell'oggetto specifico o agisci su di esso.
Editor di sceneUsa i controlli di trasformazione o trascinamento per spostare, ruotare e scalare la geometria selezionata.

Limiti da verificare

L'accessibilità è un tema a parteI soli esempi con il puntatore non dimostrano l'accesso da tastiera o con tecnologie assistive.
Il ciclo di vita va verificatoVerifica le API dei controlli e ripulisci i gestori di eventi nell'applicazione reale.

Cosa portare

Gerarchia della scenaIdentifica mesh e istanze selezionabili.
Posizione del canvasFornisci la vista incorporata reale e la camera attiva.
Comportamento dell'inputSpecifica navigazione, manipolazione, tocco e controlli alternativi.

03 Decisioni importanti

Decisioni che contano

Normalizzazione accurata
Le coordinate relative al canvas evitano che il picking si sposti all'interno del layout della pagina.
Responsabilità dell'interazione
Disattivare i controlli in conflitto dà a ogni gesto un unico scopo chiaro.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Usa la directory threejs-skills pertinente come guida per l'agente. Non è il runtime di Three.js e non installa asset di scena.

File sorgente originale

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

Un progetto Three.js funzionante e un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa threejs-interaction per aggiungere la selezione a questo visualizzatore di prodotto incorporato. Esegui il raycast solo sulle parti elencate usando coordinate relative al canvas. Evidenzia la parte selezionata e impedisci ai controlli orbit di entrare in conflitto con il trascinamento degli oggetti. Descrivi separatamente un'alternativa da tastiera.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

Il picking resta accurato dopo le modifiche al layout.
Il trascinamento non fa ruotare la camera.
Evidenziazioni e listener precedenti sono gestiti in modo esplicito.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di programmazione. Questa scheda non significa che la skill sia inclusa né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata sotto. Comportamento e requisiti upstream possono cambiare.

Titolare della fonte: CloudAI-X
Repository: CloudAI-X/threejs-skills
File della skill: skills/threejs-interaction/SKILL.md
Licenza: Non confermata: verifica i termini upstream prima del riuso.
Snapshot esaminato: 2026-10-07 · b1c623076c66

Sintesi editoriale della fonte

Picking basato su raggi, conversione delle coordinate, controlli della camera, selezione e manipolazione degli oggetti.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le star del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Può distinguere le istanze?

Il risultato di intersezione documentato include instanceId per InstancedMesh.

Perché i clic possono mancare in un canvas incorporato?

Una possibile causa è l'uso delle dimensioni della finestra invece del rettangolo del canvas.

Copre solo la navigazione orbit?

No. Tratta diversi modelli di controllo della camera, oltre al trascinamento e alle trasformazioni degli oggetti.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni insieme brief, materiale di partenza e lavoro di design in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design