javascript - Three.js raycaster intersection -

javascript - Three.js raycaster intersection -

i wrote code below intersection point 3d shape. works if there 2 intersection point shape, returns me farest intersection while need nearest intersection shape. how can nearest intersection?

/*here create 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 valori /* here create 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, photographic 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");}

if check intersects[0].point can see farest point face of cube intersected , not first (for example,if @ cube in front end of , create ray,this ray before intersect first face , after intersect sec face behind first.) goal of code create event when click on vertices. after wrote code calculate euclidean distance point of click , vertices , homecoming vertice nearest point of click. if have other thought fire event when click on vertices welcome.

yes, basic thought of ray casting project ray perpendicular plane find out list of objects ray has intersected.

so have access first element adding next piece of code.

var intersects = raycaster.intersectobjects(objects); if (intersects.length > 0) { var firstintersectedobject = intersects[0]; // give first intersected object if there multiple. }

here one of other post in have explained things in bit more detailed way, can refer improve understand how raycasting functions.

javascript three.js