javascript - Intersección del raycaster Three.js

raycasting

Question

Escribí el siguiente código para obtener el punto de intersección con una forma 3d. Funciona bien, pero si hay dos puntos de intersección con forma, me devuelve solo la intersección más cercana mientras que necesito la intersección más cercana con la forma. ¿Cómo puedo hacer para obtener la intersección más cercana?

  /*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 controlo intercepta [0] .point, solo puedo ver la cara puntual más cercana del cubo intersectado y no el primero (por ejemplo, si miras un cubo frente a ti y haces un rayo, este rayo antes de intersecar la primera cara y después de intersectar la segunda cara detrás de la primera.) El objetivo de este código es crear un evento solo cuando haces clic en los vértices. Así que después de esto, escribí el código para calcular la distancia euclidiana desde el punto de clic y todos los vértices y regreso el vértice más cercano al punto de clic. Si tiene otra idea para lanzar un evento solo cuando hace clic en vértices, es bienvenido.

Answer 1

Intenta hacer a través de este ejemplo . Mira los mensajes en la consola.

<script src="js/controls/EventsControls.js"></script>

EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls.draggable = false;

EventsControls.onclick = function() {

       console.log( this.focused.name );
       console.log( ''this.focusedPoint: ('' + this.focusedPoint.x + '', '' +
                     this.focusedPoint.y + '', '' + this.focusedPoint.z + '')'' );
       console.log( ''this.focusedDistance: '' + this.focusedDistance );

}

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh ); 

EventsControls.attach( mesh );

// 

function render() {
       EventsControls.update();
       controls.update();
       renderer.render(scene, camera);
}

Answer 2

Sí, la idea básica de ray casting proyección de ray casting es que proyectamos un rayo perpendicular al plano, descubrimos la lista de objetos que el rayo ha intersecado.

Entonces, todo lo que tiene que hacer para acceder al primer elemento es agregar el siguiente fragmento de código.

var intersects = raycaster.intersectObjects(objects);

if (intersects.length > 0) {
       var firstIntersectedObject  = intersects[0];
       // this will give you the first intersected Object if there are multiple.
    }

Esta es una de mis otras publicaciones de SO en la que he explicado las cosas de una manera un poco más detallada, puede remitirla para comprender mejor cómo funciona el raycasting.