Javascript Girl
  1. Javascript Girl
  3. Traitement d'événements pour les géométries dans Three.js?
Intereting Posts
Désactiver les espaces dans l'entrée, et permettre la flèche arrière? Dans Angularjs, comment puis-je utiliser ng-repeat, ng-model et ng-click pour modifier dynamiquement le contenu? Comment appliquer des opérations par bit à la représentation réelle IEEE 754 de JS Numbers? Ember: composants imbriqués événements bouillonnants JS – Obtenez la largeur et la hauteur de l'image à partir du code base64 Problèmes avec le cache de page dans iOS 5 Safari lors de la navigation / déchargement d'un événement non déclenché TypeError appliquant des modèles de guidons précompilés avec un contexte Phantomjs n'exécute pas la fonction dans la fonction page.evaluate Comment savoir si une balise <script> n'a pas pu être chargée Highchart: ajoutez des images au sommet du tableau sur chaque colonne JavaScript. Que signifie cette expression: "var a = b === c && d; " IPhone – Phonegap UI Controls – Tab Bar Faire un élément remplit toute la hauteur de la fenêtre de navigation via jQuery Ouverture d'une boîte de dialogue de sauvegarde de fichier via JavaScript en utilisant Flash Le géocodage Javascript de l'adresse aux nombres de latitude et de longitude ne fonctionnent pas

Traitement d'événements pour les géométries dans Three.js?

Je cherche une sorte de gestion d'événements pour les géométries / caméras / lumières (choses que nous ajoutons à la scène) dans trois.js?

J'ai googlé mais je n'ai pas trouvé de pertinence. J'ai fait un simple rendu de Sphère et j'ai essayé de voir le contenu de DIV dans Firebug, mais il n'y a qu'une seule toile, et ajouter un "onclick" à la toile fait l'événement pour tout le canevas, c'est-à-dire non seulement pour la sphère ou la lumière .

Aucune suggestion ?

Vous avez besoin d'un couple de choses pour obtenir l'interactivité en 3D:

  1. Obtenir un vecteur pour la position de la souris
  2. Désélectionner le vecteur de souris basé sur la caméra
  3. A tiré un rayon de la position de la caméra, vers le vecteur de souris non projeté
  4. Vérifiez quel (s) objet (s) intéressent avec ce rayon et mettez-vous à jour en conséquence.

Cela pourrait sembler compliqué, mais le code est déjà là: 

function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectObjects( objects ); if ( intersects.length > 0 ) { intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff ); var particle = new THREE.Particle( particleMaterial ); particle.position = intersects[ 0 ].point; particle.scale.x = particle.scale.y = 8; scene.add( particle ); } /* // Parse all the faces for ( var i in intersects ) { intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 ); } */ }

Ce code ci-dessus à partir de l'exemple toile_interactive_cubes qui vient avec la bibliothèque. En cas de doute, il est toujours bon de vérifier s'il existe un exemple qui résout le problème déjà.

Aperçu de l'échantillon de canvas_interactive_cubes