attraper l'événement click sur un maillage spécifique dans le moteur de rendu

J'ai mis une toile moteur de rendu qui contiennent deux meshs (cubes). Ce dont j'ai besoin pour faire est de catch the click event on each cube à l'appel de la méthode pratique pour elle.

Jusqu'à présent, j'ai pu reprendre l'événement click sur tous les moteur de rendu, signifie que lorsque je clique sur cube1 et cube2, le clic appartiennent à la même cause, il est lié à la renderer 🙂

Ma question est, comment faire pour lier l'événement de clic sur chaque cube?

Mon code est le suivant:

            //dom
var containerPopUp=document.getElementById('popup');
//renderer
var rendererPopUp = new THREE.CanvasRenderer();
rendererPopUp.setSize(420,200);
containerPopUp.appendChild(rendererPopUp.domElement);
//Scene
var scenePopUp = new THREE.Scene();
//Camera
var cameraPopUp = new THREE.PerspectiveCamera(50,60/60,1,1000);
cameraPopUp.position.z = 220;
cameraPopUp.position.y =  20;
//
scenePopUp.add(cameraPopUp);
//Add texture for the cube
//Use image as texture
var img2D = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
map:THREE.ImageUtils.loadTexture('img/2d.png') 
});
img2D.map.needsUpdate = true; //ADDED
//Add Cube
var cubeFor2D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img2D);
cubeFor2D.position.x =- 60;
cubeFor2D.position.y = 20;
scenePopUp.add(cubeFor2D);
//
var img3D = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
map:THREE.ImageUtils.loadTexture('img/3d.png') 
});
img3D.map.needsUpdate = true;
var cubeFor3D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img3D);
cubeFor3D.position.x = 60;
cubeFor3D.position.y=20;
scenePopUp.add(cubeFor3D);
//
rendererPopUp.render(scenePopUp,cameraPopUp);
//
animate();
rendererPopUp.domElement.addEventListener('click',testCall,false);//Here the click event is bound on the whole renderer, means what ever object in the renderer is clicked, the testCall method is called.

Comme vous pouvez le voir, cubeFor2D et cubeFor3D sont contenues dans le moteur de rendu. J'ai besoin de lier l'événement de clic sur chaque maille. J'ai essayé cela avec la threex.domevent.js:

var meshes  = {};
meshes['mesh1'] = cubeFor2D;
meshes['mesh1'].on('mouseover', function(event){
//response to click...
console.log('you have clicked on cube 2D');
});

Mais ça ne fonctionne pas, dans la console, j'ai eu cette erreur:

TypeError: meshes.mesh1.on is not a function

Bien sûr, j'ai inclus l'API de fichier de code source:

    <script src="threex.domevent.js"></script>
InformationsquelleAutor Malloc | 2012-10-09
  1. 21

    Vous pouvez générer un rappel de ce genre. D'abord définir votre fonction de rappel pour chaque objet:

    mesh.callback = function() { console.log( this.name ); }

    Puis suivre la norme de la cueillette modèle:

    var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects ); 
if ( intersects.length > 0 ) {
intersects[0].object.callback();
}
}

    EDIT: mis à jour three.js r.70

    • Aucun moyen de détecter le côté du cube ai cliqué et à quelle était la x,y de cliquez sur ce côté?
    • Merci de faire un nouveau post si vous avez une question.
    • J'ai une porte qui dispose de plusieurs éléments comme les charnières, vis, chevilles, les pivots etc. donc, cliquez sur je ne vous le précise, il peut être parce qu'elles se chevauchent. ce peut être le moyen de régler ça ? toute aide serait appréciée.
    • Vous avez besoin de faire un nouveau post si vous avez une question.
    InformationsquelleAutor WestLangley
  2. 0

    1. Créer un gestionnaire d'événements click

      window.addEventListener('click', onDocumentMouseDown, false);

    2. Définir la fonction onDocumentMouseDown, notez que raycaster la différence dans la réponse ci-dessus est la position d'index de l'objet cliqué!

      var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
console.log(scene.children);
var intersects = raycaster.intersectObjects( scene.children );
console.log(intersects[1]);
if ( intersects.length > 0 ) {
intersects[1].object.callback();
}}

    3. Définir le Maillage de l'objet

      var mesh_menu_title = new THREE.Mesh(geometry_menu, materials_menu);
mesh_menu_title.name = 'select_lang';
mesh_menu_title.callback = function() { select_language();}
scene.add(mesh_menu_title);

    4. définir la fonction de rappel

      function select_language(){
var selectedObject = scene.getObjectByName("select_lang"); 
scene.remove( selectedObject );
var selectedObject = scene.getObjectByName("start");
scene.remove( selectedObject );
var selectedObject = scene.getObjectByName("menu");
scene.remove( selectedObject );
}

    Donc ce code ci-dessus va gérer spécifique de l'objet cliqué à l'intérieur de ma toile, puis une fonction de rappel, le "mesh".rappel" et de supprimer des scènes d'enfant de la toile.

    Il ne fonctionne pas si vous utilisez coupe[0].objet.callback(); car à l'index 0 de l'objet stocké sont les sommets.

    InformationsquelleAutor Carlos Montiel