收藏
回答

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

最后一次编辑于  12-02
回答关注问题邀请回答
收藏

1 个回答

  • 唯美的根号三
    唯美的根号三
    12-04

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

    12-04
    赞同
    回复 2
    • 七月夏帆
      七月夏帆
      12-04
      你好,你检查一下看看是不是会获取到比较靠上的坐标,比如你想点(1,1)实际获取到的是(1,2),我是这种情况
      12-04
      回复
    • 唯美的根号三
      唯美的根号三
      12-04回复七月夏帆
      没呢,我吧坐标实时输出到屏幕上了,(-1,-1)到(1,1)都正常
      12-04
      回复
问题标签