Bug描述:
创建了很多热点有的在初始摄像机视野内有的不在,点击的时候射线检测代码将不在视野范围内的热点也视为检测到。
解决方案(我是使用的其他方法解决,如果你知道更好的解决方案在下面评论):
在点击的时候过滤不在视野范围内的对象只检测在视野范围内的对象。
检测对象是否在视野范围内参考链接: https://blog.csdn.net/u014452812/article/details/89554740
以下是我整理的代码
检测对象是否在摄像机视野范围内代码 - 0
/* 检查对象是否在摄像机视野范围内 true 存在 false 不存在 */
function checkObjectExistIsCamera(object,camera) {
var vector = new THREE.Vector3();
vector.copy(object.position);
let tempV = vector.applyMatrix4(camera.matrixWorldInverse).applyMatrix4(camera.projectionMatrix);
return !((Math.abs(tempV.x) > 1) || (Math.abs(tempV.y) > 1) || (Math.abs(tempV.z) > 1));
}
检测对象是否在摄像机视野范围内代码 - 1
function isOffScreen(object, camera){
var frustum = new THREE.Frustum(); //Frustum用来确定相机的可视区域
var cameraViewProjectionMatrix = new THREE.Matrix4();
cameraViewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); //获取相机的法线
frustum.setFromMatrix(cameraViewProjectionMatrix); //设置frustum沿着相机法线方向
return !frustum.intersectsObject(object);
}
射线检测代码
{
var raycaster = new THREE.Raycaster();
var mouseVector = new THREE.Vector2();
/* ray detection
* x: click screen X
* y: click screen Y
* check: check target
* camera : camera
* */
function getIntersects(x, y , check, camera) {
mouseVector.x = ( x / window.innerWidth ) * 2 - 1;
mouseVector.y = - ( y / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouseVector, camera );
if(Array.isArray(check)){
var intersects = raycaster.intersectObjects( check);
if (intersects.length > 0 ) {
return intersects[0].object;
}
}
else {
return raycaster.intersectObject( check,true);
}
}
}