threejs——光线投射Raycaster

原创

已于 2022-12-02 17:25:23 修改 · 645 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-11-08 15:46:06 首次发布

本文介绍了在Three.js中实现射线碰撞检测的两种方法：使用Vector2和Vector3进行坐标转换，并设置射线起点及方向，适用于不同场景的需求。

一、两种使用方式

1.Vector2——官网

// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
const vector = new THREE.Vector2((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);

const raycaster = new THREE.Raycaster();
// 通过摄像机和鼠标位置更新射线
raycaster.setFromCamera( pointer, camera );
let intersects = raycaster.intersectObject(VRObject3D, true);

2.Vector3

let vector = new Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
vector = vector.unproject(this.camera); //用摄像机的投影矩阵解压矢量
const raycaster = new Raycaster(this.camera.position, vector.sub(this.camera.position).normalize());
const intersects = raycaster.intersectObjects(this.objects, true);