Three.js用射線獲取到距離鼠標位置最近的圖形,以及該圖形周圍的圖形

1.構造射線,方向垂直屏幕向內,並反向延申必定距離,防止圖形在射線反方向code

let raycaster = new Raycaster();
raycaster.setFromCamera({
    x: (ptVcs.x / view.Width) * 2 - 1,
    y: - (ptVcs.y / view.Height) * 2 + 1
}, view.Camera);
raycaster.ray.origin.sub(raycaster.ray.direction.clone().multiplyScalar(1e3));

2.循環場景中對象和射線求交,若是對象有子元素,要考慮是否深度去和子元素求交,這裏不考慮有子元素求交的狀況對象

let pickObj: Object3D; //選到的對象
let minDis: number; 對象離射線源點最近的距離,用於選取最近的對象
let intersect;//該對象保存了交點,交點處的法向量,法向量要注意矩陣變換
for (let obj of selectObjects)
{
    let intersects = [];
    if (!obj.visible) continue;
    obj.raycast(raycaster, intersects)
    if (intersects.length > 0)
        if (!minDis || minDis > intersects[0].distance)
        {
            pickObj = obj;
            minDis = intersects[0].distance
            intersect = intersects[0];
        }
}
return { pickObj, intersect };

3.要想獲取到該對象周圍的對象,能夠用交點和對應方向的向量構建射線,在於場景中的對象求交便可,intersects中保存的對象會根據距離進行排序,根據項目須要選擇排序

相關文章
相關標籤/搜索