https://blog.csdn.net/u013090676/article/details/77188088 [图片]
使用threejs写项目时,点击到了画布中的元素,却没有获取到信息怎么回事?以下是我写的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上写过得代码改的),请问这是什么原因?有没有遇到相同情况的?
2020-03-30