//投影获取点击或鼠标移入的模型
var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2()
function findIntersectedModule(e, arrMesh) {
var intersected;
//将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
if (isMobile) {
if (e.changedTouches) {
var touch = e.changedTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
if (Math.abs(touch.pageX-touchStartX) + Math.abs(touch.pageY-touchStartY) >= 3) {
return undefined;
}
mouse.x = (touch.pageX / window.innerWidth) * 2 - 1;
mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1;
}
if (!isOrientationLandscape()) mouse.rotateAround(new THREE.Vector2(0, 0), 1.57);
} else {
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
}
//新建一个三维单位向量 假设z方向就是0.5
//根据照相机,把这个向量转换到视点坐标系
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
//在视点坐标系中形成射线,射线的起点向量是照相机, 射线的方向向量是照相机到点击的点,这个向量应该归一标准化。
var raycaster = new THREE.Raycaster(
camera.position,
vector.sub(camera.position).normalize()
);
//射线和模型求交,选中一系列直线
var intersects = raycaster.intersectObjects(arrMesh);
if (intersects.length > 0) {
//选中第一个射线相交的物体
intersected = intersects[0].object;
}
return intersected;
}
threejs给模型绑定点击或者鼠标移入事件,兼容mobile和pc
最新推荐文章于 2024-07-31 07:48:45 发布