1

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

我面临的问题是，当用户按下 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 三 Fiber 的 ThreeJS 画布

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

1 回答 1

3

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

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

于 2020-12-31T08:09:43.247 回答