使用three.js对网格顶点进行光线投射

使用threejs，我可以像那样对一些网格进行光线投射

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

//创建三角形几何体

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;

//获取鼠标位置

function onDocumentMouseMove( event ) {

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

//渲染函数

function animate() {

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

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

    renderer.render( scene, camera );
}

//跑

这一行代码对我很有效。但我想对这个三角形的索引进行光线投射，而不是对所有网格进行光线投射。我该怎么办

我试过了但没用？为什么?

raycaster.insertObject( object1.geometry.vertices );

相交

应提供相交的

面

，以及相交的

点

。您可以根据最小阈值（或仅是距离

点

最近的顶点）检查点到面顶点的距离，并在顶点通过时返回顶点

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

var-iFace=intersects[0]。面；
var iPoint=与[0]相交。点；
var ab=iFace.a.距离（iFace.b）；
var ac=iFace.a.距离（iFace.c）；
var bc=iFace.b.距离（iFace.c）；
var lambda=数学最小值（ab、ac、bc）-0.1；
if（iFace.a.distanceTo（iPoint）我正在搜索更基本的东西，比如--raycaster.insetObject（object1.geometry.vertices）---@GaiKuroda顶点是空间中的一个点。基于用户输入的光线与该点相交的几率非常低。
3。点
支持光线投射，但它使用边界球体进行相交检测。您可以对顶点执行类似操作，但需要检查每个顶点，或者使用初始光线投射中的
面
信息来细化要检查的顶点。确切地说，点有一个大问题。我认为顶点上有一些小的圆几何，但结果是我不能为圆设置中心点，它总是必须自动为0,0,0。用三个点完成。js@GaiKuroda没有一个“积分有个大问题。"这就是它们的工作原理。如果希望顶点能够进行光线投射，则需要扩展
Vector3
类，以包含类似
third.Points.raycast
的
method方法，并添加
third.Raycaster.intersectVector3s
函数以接受顶点列表。您可以创建
third.Points
和raycast反对他们。看看如何设置点。嗨@WestLangley我这样做了，但是当我的鼠标在点附近时会发生交互。我的意思是它不会等待我的鼠标悬停在点上。可能会有什么问题？也许。如果你做不到，请不要制作API。geeez
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;
}