Three.js - Raycaster在Ipad上无法正常工作

i had some issues with Raycaster when i tested my code on mobile device. I realised the same problem appears on the official examples on threejs.org when you activate tactile touch( ex: https://threejs.org/examples/?q=inter#webgl_interactive_cubes ). Is there an alternative to Raycaster to interact with objects in threejs ?

当我在移动设备上测试我的代码时，我遇到了Raycaster的一些问题。当你激活触觉触摸时，我意识到同样的问题出现在threejs.org上的官方例子中（例如：https：//threejs.org/examples/？q = inter #webgl_interactive_cubes）。有没有替代Raycaster与threejs中的对象进行交互？

I am using Firefox 58.0.2 (64 bits) to test my three.js project and to simulate tactile touch.

我使用Firefox 58.0.2（64位）来测试我的three.js项目并模拟触觉触摸。

Thanks in advance

提前致谢

2 个解决方案

#1

Is there an alternative to Raycaster to interact with objects in threejs ?

有没有替代Raycaster与threejs中的对象进行交互？

Raycaster does not add event listeners, that's application level code.

Raycaster不会添加事件侦听器，即应用程序级代码。

Many three.js examples only support mouse interaction. If you want to support touch devices, implement event listeners like touchstart and use the event information in order to perform a raycast.

许多three.js示例仅支持鼠标交互。如果要支持触摸设备，请实现触摸启动等事件监听器，并使用事件信息执行光线投射。

#2

Thanks for the response,

谢谢你的回复，

In my example, i had to drag a panorama and interact with objects inside the panorama. Here is the event listeners that works perfectly for me, if it can help others

在我的例子中，我不得不拖动全景图并与全景图内的对象进行交互。如果它可以帮助其他人，这里的事件监听器对我来说是完美的

function onDocumentTouchStart( event ) {
    console.log("TouchStart")

    event.preventDefault();

    event.clientX = event.touches[0].pageX;
    event.clientY = event.touches[0].pageY;

    onDocumentMouseDown( event );
}

function onDocumentTouchMove( event ) {
    console.log("TouchMove")

    if ( event.touches.length == 1 ) {
      event.preventDefault();
      lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
      lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
    }
}

function onDocumentMouseMove( event ) {

    if ( isUserInteracting === true ) {
      lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
      lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
    }
}

function onDocumentMouseDown( event ) {

  event.preventDefault();

  mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

  raycaster.setFromCamera( mouse, camera );
  var intersects = raycaster.intersectObjects( scene.children );

  if ( intersects.length > 0 && intersects[0].object.name.includes("sphere")) {
    INTERSECTED = intersects[0].object;

   //some code

  isUserInteracting = true

  onPointerDownPointerX = event.clientX;
  onPointerDownPointerY = event.clientY;

  onPointerDownLon = lon;
  onPointerDownLat = lat;
}

#1