102.3K+Télécharger
Aller au guide d’utilisation
Three.js Interactionpar CloudAI-X

Three.js Interaction Skill.

Relie un geste à l'objet 3D visé en utilisant les coordonnées réelles du canvas et de la caméra.

  • 3D
  • Three.js
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · Three.js InteractionSKILL.md
Tâche 3D Produit • Sélection d'objets relative au canvas • Une configuration adaptée des contrôles de caméra • Comportement de sélection, de survol, de glisser-déposer ou de transformation Avant de commencer Un projet Three.js fonctionnel et un renderer ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Three.js Interaction : sélectionner et manipuler des objets

Sélection par rayon, conversion de coordonnées, contrôles de caméra, sélection et manipulation d'objets.

Flux de travail issu de la sourcePas un benchmark d'exécution

La méthode de travail

Three.js Interaction couvre le raycasting et les contrôles. Il explique comment l'entrée écran devient un rayon de caméra, comment les intersections identifient des objets ou des instances, et pourquoi un canvas intégré nécessite sa propre conversion de coordonnées plutôt que des hypothèses valables pour la fenêtre entière.

La navigation de la caméra et la manipulation des objets sont deux tâches distinctes. Les contrôles orbit, fly, map, drag et transform ont des rôles différents. Une scène de type éditeur doit coordonner ces gestionnaires pour que le déplacement d'un modèle ne fasse pas aussi tourner la caméra.

Livrables attendus

  • Sélection d'objets relative au canvas
  • Une configuration adaptée des contrôles de caméra
  • Comportement de sélection, de survol, de glisser-déposer ou de transformation
Voir le brief d'exemple

Du brief à la revue

  1. 01
    Définir les cibles

    Listez les objets sélectionnables et décidez si les maillages imbriqués ou les instances sont des cibles distinctes.

  2. 02
    Associer les entrées

    Normalisez les positions du pointeur par rapport au rectangle du canvas et lancez le raycast via la caméra active.

  3. 03
    Coordonner les contrôles

    Gérez les conflits de navigation pendant la manipulation et rétablissez le retour visuel quand la sélection change.

02 Cas d’usage

Quand l'utiliser

Un projet Three.js fonctionnel et un renderer ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.

Un bon choix

  • Configurateurs de produitsSélectionnez une partie d'un produit et mettez en évidence cet objet précis ou agissez dessus.
  • Éditeurs de scèneUtilisez les contrôles de transformation ou de glisser pour déplacer, faire pivoter et mettre à l'échelle la géométrie sélectionnée.

Limites à vérifier

  • L'accessibilité est un sujet à partLes exemples de pointeur seuls n'établissent pas l'accès au clavier ni aux technologies d'assistance.
  • Le cycle de vie doit être vérifiéVérifiez les API des contrôles et nettoyez les gestionnaires d'événements dans l'application réelle.

Éléments à fournir

  • Hiérarchie de la scèneIdentifiez les maillages et instances sélectionnables.
  • Emplacement du canvasFournissez la vue intégrée réelle et la caméra active.
  • Comportement des entréesPrécisez la navigation, la manipulation, le tactile et les contrôles alternatifs.

03 Décisions importantes

Décisions importantes

  1. Normalisation précise

    Les coordonnées relatives au canvas empêchent la sélection de dériver dans la mise en page d'une page.

  2. Attribution des interactions

    Désactiver les contrôles concurrents donne un seul objectif clair à chaque geste.

04 Exemple de brief

Essayer un brief ciblé

Le brief d'exemple ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez le répertoire threejs-skills pertinent comme guide pour l'agent. Ce n'est pas le runtime Three.js et il n'installe pas les ressources de la scène.

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

Un projet Three.js fonctionnel et un renderer ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.

Commencer par un seul livrable

Adaptez le périmètre, le matériel source et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple
Utilisez threejs-interaction pour ajouter la sélection à ce visualiseur de produit intégré. Ne lancez le raycast que sur les parties listées, en coordonnées relatives au canvas. Mettez en évidence la partie sélectionnée et empêchez les contrôles orbit d'entrer en conflit avec le glisser des objets. Décrivez séparément une alternative au clavier.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • La sélection reste précise après les changements de mise en page.
  • Le glisser ne fait pas tourner la caméra.
  • Les anciennes mises en évidence et les écouteurs sont gérés explicitement.

OpenDesign fournit un espace de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, identifiants et dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision de source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
CloudAI-X
Dépôt
CloudAI-X/threejs-skills
Fichier du skill
skills/threejs-interaction/SKILL.md
Licence
Non confirmée — consultez les conditions en amont avant toute réutilisation.
Instantané examiné
2026-10-07 · b1c623076c66
Résumé éditorial de la source
Sélection par rayon, conversion de coordonnées, contrôles de caméra, sélection et manipulation d'objets.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Peut-il distinguer les instances ?

Le résultat d'intersection documenté inclut instanceId pour InstancedMesh.

Pourquoi des clics peuvent-ils rater un canvas intégré ?

Une cause possible est l'utilisation des dimensions de la fenêtre au lieu du rectangle du canvas.

Couvre-t-il uniquement la navigation orbit ?

Non. Il aborde plusieurs modèles de contrôle de caméra, ainsi que le glisser d'objets et les transformations.

OpenDesign

Faites de la place pour la prochaine itération de conception.

Gardez votre brief, votre matériel source et votre travail de conception ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de conception
Fichier source amont
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md