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

Question

我正在开发一个 threejs 应用程序，该应用程序应从 HTML 按钮 获取输入，并具有 Raycast Detection 触摸三个JS也是，

我面临的问题是，当用户按下 HTML 按钮时，Raycast 也会发生，这是因为我的 Raycast 代码在 'ontouchstart'[= 事件上运行28=]

这是我想要做的不受欢迎的行为。

我已经尝试使用 'ontouchend' 来检测 Raycast，但这也没有解决问题，我需要一些方法，如果每次按下按钮，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 );

    /* **  */
}

ThreeJS Canvas 我正在使用 React Three Fiber

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

Answer 1

如果您不希望事件监听器捕获整个 window，请不要将事件监听器添加到 window 元素。更具体地说明您分配给听众的内容。也许您应该改为在 canvas 上添加事件，这样当您单击按钮时，canvas 不需要知道它：

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