Three.js raycaster intersection
J'ai écrit le code ci-dessous pour obtenir des points d'intersection avec une forme 3d. Il fonctionne bien, mais si il y a deux point d'intersection avec la forme, il me renvoie seulement les plus éloignés de l'intersection alors que j'ai besoin de l'intersection la plus proche, avec la forme. Comment puis-je faire pour obtenir de l'intersection la plus proche?
/*here I create a cube*/
var geometry0 = new THREE.Geometry()
geometry0.vertices = [new THREE.Vector3(0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, -0.5), new THREE.Vector3(0.5, -0.5, -0.5), new THREE.Vector3(0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, -0.5), new THREE.Vector3(0.5, 0.5, -0.5)];
geometry0.faces = [new THREE.Face3(3, 2, 1), new THREE.Face3(3, 1, 0), new THREE.Face3(4, 5, 6), new THREE.Face3(4, 6, 7), new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4), new THREE.Face3(1, 2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6), new THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7)];
geometry0.computeFaceNormals();
geometry0.computeVertexNormals();
var material0 = new THREE.MeshBasicMaterial({color: 0x39d2dbe7fff39d2, transparent: true, opacity: 0});
mesh0 = new THREE.Mesh(geometry0, material0);
egh0 = new THREE.EdgesHelper(mesh0, 0x000);
egh0.material.linewidth = 2;
scene.add(egh0);
objects.push(mesh0);
projector = new THREE.Projector();
console.log(objects);
mouse2D = new THREE.Vector3(0, 10000, 0.5);//controllare i valori
/* here I create the ray */
document.addEventListener('click', onDocumentMouseClick, false);
function onDocumentMouseClick(event) {
event.preventDefault();
mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
var vector = new THREE.Vector3( mouse2D.x, mouse2D.y, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( objects );
if (intersects.length > 0) {
console.log("ok");}
Si je coche coupe[0].point je ne peux que voir les plus éloignés du point face de cube recoupé et non pas le premier (par exemple,si vous regardez un cube en face de vous et de faire un rayon,ce rayon avant de croiser la première face et après se croisent deuxième visage derrière la première.)
L'objectif de ce code est de créer un événement que lorsque vous cliquez sur les sommets.
Donc, après ce que j'ai écrit du code pour calculer la distance euclidienne entre le point de cliquer sur et à tous les sommets
et retour le sommet le plus proche du point de clic.
Si vous avez d'autres idée de mettre le feu à un événement que lorsque vous cliquez sur les sommets est la bienvenue.
OriginalL'auteur Stefano Maglione | 2014-10-14
Vous devez vous connecter pour publier un commentaire.
Oui, l'idée de base de
ray casting
est que nous projet un rayon perpendiculaire au plan que nous trouvons la liste des objets que le rayon a recoupé.De sorte que tous vous avez à faire pour accéder au premier élément est d'ajouter le morceau de code suivant.
Ici est un autre de mes post DONC dans lequel j'ai expliqué des choses un peu plus en détail, vous pouvez vous référer à mieux comprendre comment raycasting fonctions.
Veuillez inclure cette partie de code trop dans la question ... ce que nous pouvons trouver ce qui ne va pas.
J'ai ajouté plus d'informations @Shiva
J'ai essayé de vous la distance comme ce
console.log(intersects[0].distance);
semble bien fonctionner pour moiSi vous regardez les propriétés de point, vous pouvez voir que si vous cliquez sur la première face, retourner les coordonnées de la face derrière le premier. Je pense que je dois éviter cette solution. Pourrais-je vous demander une certaine idée de déclencher un événement uniquement en cliquant sur les sommets?Merci. @Shiva
OriginalL'auteur Shiva
Essayer de le faire par le biais de ce exemple. Regardez les messages dans la console.
OriginalL'auteur Almaz Vildanov