使用threejs写项目时,点击到了画布中的元素,却没有获取到信息怎么回事?
发布于 5 年前 作者 fwan 15140 次浏览 来自 问答

以下是我写的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上写过得代码改的),请问这是什么原因?有没有遇到相同情况的?

1 回复

我也遇到这样的问题,都是先将二维坐标转成(-1,-1)到(1,1)之间的坐标,然后利用three.raycaster去做射线法,但是发现,点击返回的貌似真不是我实际点击的名字,不匹配,我是会点击返回。只是不匹配而已,感觉坐标系是不是有点毛病!

回到顶部