Raycasting vertices of a mesh with three.js

Question

with threejs i can raycast some meshes that i created like that

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );


var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

//create a triangular geometry

var material = new THREE.MeshBasicMaterial( { color : 0x00cc00 } );

var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -0.5, -0.5, 0 ) );
geometry.vertices.push( new THREE.Vector3(  0.5, -0.5, 0 ) );
geometry.vertices.push( new THREE.Vector3(  0.5,  0.5, 0 ) );

//create a new face using vertices 0, 1, 2
var face = new THREE.Face3( 0, 1, 2 );

//add the face to the geometry's faces array
geometry.faces.push( face );

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

camera.position.z = 10;

//get mouse position

function onDocumentMouseMove( event ) {

    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

//render funciton

function animate() {

    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObject( object1 );

    if ( intersects.length > 0 ) console.log( intersects );

    renderer.render( scene, camera );
}

//run

window.addEventListener( 'mousemove', onDocumentMouseMove, false);
window.addEventListener( 'mousemove', animate, false);
animate();

this line of codes work very well for me. but i want to raycast of indices of this triangular shape instead of all mesh. What should i do?

i tried tihs but it does not work? why?

raycaster.insertObject( object1.geometry.vertices );

You can create `THREE.Points` and raycast against them. See [this three.js example](https://threejs.org/examples/webgl_geometry_convex.html) for how to set the points. — WestLangley, Aug 25 '17 at 16:58
hi @WestLangley i did that but interaction occurs while my mouse is at vicinity of points. i mean it does not wait for my mouse to hover on them. What could be the problem? — Gai Kuroda, Aug 25 '17 at 18:11
Maybe [this](https://stackoverflow.com/questions/27864029/clickable-particles-in-three-js-pointcloud/27866242#27866242). — WestLangley, Aug 25 '17 at 18:31

score 3 · Answer 1 · answered Aug 25 '17 at 15:20

3

Raycaster.intersectObjects documentation

intersects should provide the intersected face, as well as the point of intersection. You can check the distance from the point to a face vertex against a minimum threshold (or simply the closest vertex to point), and return the vertex if it passes.

var iFace = intersects[0].face;
var iPoint = intersects[0].point;
var ab = iFace.a.distanceTo(iFace.b);
var ac = iFace.a.distanceTo(iFace.c);
var bc = iFace.b.distanceTo(iFace.c);
var lambda = Math.min(ab, ac, bc) - 0.1;
if(iFace.a.distanceTo(iPoint) <= lambda){
    return iFace.a;
}
if(iFace.b.distanceTo(iPoint) <= lambda){
    return iFace.b;
}
if(iFace.c.distanceTo(iPoint) <= lambda){
    return iFace.c;
}

answered Aug 25 '17 at 15:20

TheJim01

8,411
1
30
54

i am searching like more basic things like -- raycaster.insetObject( object1.geometry.vertices ) -- – Gai Kuroda Aug 25 '17 at 16:47
@GaiKuroda A vertex is a single point in space. The chances of ray based on user input intersecting that point exactly are very VERY low. `THREE.Points` supports raycasting, but it uses a bounding sphere for intersection detection. You could do something similar with your vertices, but you would need to either check every vertex, or use the `face` information from an initial raycast to refine which vertices to check. – TheJim01 Aug 25 '17 at 16:55
exactly man there is a big problem with points. and i thougt little circleGeometries on vertices but turns out i can not set a central point for a circle it always must be 0,0,0 automaticly. Done with three.js – Gai Kuroda Aug 25 '17 at 18:41
1

@GaiKuroda There is not a "big problem with points." This is how they work. If you want vertices to be raycast-able, you'll need to extend the `Vector3` class to include a `raycast` method similar `THREE.Points.raycast`, and add a `THREE.Raycaster.intersectVector3s` function to accept the list of vertices. – TheJim01 Aug 25 '17 at 21:09

Raycasting vertices of a mesh with three.js

1 Answers1