以下是我写的tap方法,用于获取点击到的元素信息
tap(e) {
let that = this;
console.log('canvas', e);
console.log("event.clientX:" + e.touches[0].clientX)
console.log("event.clientY:" + e.touches[0].clientY)
// 声明 raycaster 和 mouse 变量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
mouse.x = (e.touches[0].clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.touches[0].clientY / window.innerHeight) * 2 + 1;
//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
let camera = (that.data.params.orthographicCamera) ? that.data.orthographicCamera : that.data.perspectiveCamera;
raycaster.setFromCamera(mouse, camera);
// 获取与射线相交的对象数组,其中的元素按照距离排序,越近的越靠前
var intersects = raycaster.intersectObjects(that.data.scene.children);
console.log(intersects);
},
当我点击图中蓝色位置
控制台的信息获取为空
当我点击绿圈位置时
却获取到了信息
发现获取信息的位置漂移了,然而同一套逻辑的代码在web上运行不会出现错误(小程序里的就是我根据web上写过得代码改的),请问这是什么原因?有没有遇到相同情况的?
https://blog.csdn.net/u013090676/article/details/77188088
我也遇到这样的问题,都是先将二维坐标转成(-1,-1)到(1,1)之间的坐标,然后利用three.raycaster去做射线法,但是发现,点击返回的貌似真不是我实际点击的名字,不匹配,我是会点击返回。只是不匹配而已,感觉坐标系是不是有点毛病!