仅在threejs中检测WebGL Canvas上的触摸答案

【问题标题】：Detecting Touch on WebGL Canvas only in threejs仅在threejs中检测WebGL Canvas上的触摸
【发布时间】：2021-04-07 14:24:33
【问题描述】：

我正在开发一个应该从 HTML 按钮 获取输入的threejs 应用程序，并且在threeJS 中也具有Raycast Detection 触摸功能，

我面临的问题是，当用户按下 HTML 按钮时，Raycast 也在发生，这是因为我的 Raycast 代码在事件 'ontouchstart'

上运行

对于我正在尝试做的事情来说，这是不受欢迎的行为。

我已经尝试使用“ontouchend”来检测 Raycast，但这也不能解决问题，我需要某种方式，如果每次按下按钮，Raycast 代码将永远不会运行。

光线投射代码：

componentDidMount(){
    window.addEventListener("touchstart",this._onTouchStart,false);

}

componentWillUnmount(){
    window.addEventListener("touchstart",this._onTouchStart,false);
}

_onTouchStart = (event) =>{
    event.clientX = event.touches[0].pageX;
    event.clientY = event.touches[0].pageY;
    const mouse = {
        x: (event.clientX / this.props.gl.domElement.clientWidth) * 2 - 1,
        y: -(event.clientY / this.props.gl.domElement.clientHeight) * 2 + 1
    }
    this.props.raycaster.setFromCamera(mouse,this.props.camera);


    if(this.objects.current == null) return null;

    const intersects = this.props.raycaster.intersectObjects( this.objects.current.children[1].children );

    /* **  */
}

我正在使用 React Three Fiber 的 ThreeJS 画布

    <Canvas>
      <Component />
      <CameraController />
      <EnvironmentSettings />
    </Canvas>
    <HTMLButtons />

【问题讨论】：

标签： javascript html mobile three.js react-three-fiber

【解决方案1】：

如果您不希望它捕获整个窗口，请不要将事件侦听器添加到 window 元素。更具体地说明您分配听众的内容。也许你应该在画布上添加事件，所以当你点击按钮时，画布不需要知道它：

canvas.addEventListener("touchstart",this._onTouchStart,false);

【讨论】：