CODEWITHSUNDEEP
three.js
Gai Kuroda
Gai Kuroda

Reputation: 80

Raycasting vertices of a mesh with three.js

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 );

Upvotes: 1

Views: 3605

Answers (1)

TheJim01
TheJim01

Reputation: 8896

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;
}

Upvotes: 3

Related Questions