three.js - 如何在 webXR(AR) 中获取屏幕触摸的 2d 位置

Question

在使用 Three.js 运行 webXR 应用程序时，我正在尝试获取 Android 设备屏幕上的触摸位置。

我正在使用https://threejs.org/examples/jsm/webxr/ARButton.js来检测用户触摸屏幕并且它可以工作。

以下是相关的代码行：

document.body.appendChild(ARButton.createButton(this.renderer));
this.controller = this.renderer.xr.getController(0);
this.controller.addEventListener('select', (event) => this.onSelect(event));
this.scene.add(this.controller);

onSelect(event) {
  //how to get the 2d touch position on screen area?
}

如何获得onSelect()函数中的 2d 触摸位置？

Answer 1

touches 属性返回一个 Touch 对象数组。因此，您可以通过访问第一个数组对象来访问触摸坐标。

renderer.domElement.addEventListener('touchstart', function(e){
    e.preventDefault();
    touchDown=true;
    touchX = e.touches[0].pageX;
    touchY = e.touches[0].pageY;
    console.log(touchX, touchY);
}, false);