Question

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

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

提前致谢

Answer 1

感谢您的回复，

在我的例子中，我必须拖动全景图并与全景图内的对象进行交互。如果它可以帮助其他人，那么这些事件监听器对我来说非常有效

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;
}

Answer 2

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

<asp:Repeater ID="Repeater1" runat="server" ... > <ItemTemplate> <div class="col-md-8 col-md-offset-2 product"> <img src="<%# Eval("ImageFile") %>" class="col-xs-12" alt="<%# Eval("Name") %> Product Image"/> <h3><%# Eval("Name") %></h3> <p><%# Eval("ShortDescription") %></p> <cc:QuantityDropDown ID="ItemQuantity" runat="server" Quantity='<%# Eval("Quantity")' /> </div> </ItemTemplate> </asp:Repeater>不会添加事件侦听器，即应用程序级代码。

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

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

2 个答案: