Question

根据caniuse.com，适用于iOS版本8.1至8.4的Safari和Chrome浏览器支持webgl。

从iPad（运行iOS 8.4的移动版本）看来，许多official Three.js webgl demos运行正常。例如，在draggable cubes demo上，轨迹球通过（手指）触摸＆amp;拖动。但是我不能让它对手指敲击做出反应，或者手指触摸/保持/释放作为鼠标点击（公平地说，这也不适用于我的Android 4.1设备）。这个interactive voxel painter在iPad上根本不运行（但在我的Android 4.1设备上运行正常）。

令人惊讶的是this three.js mouseclick demo by Lee Stemkoski在手指点击方面确实有效 - ＆gt; （解释为） - ＆gt; mouseclick，但不幸的是它使用了旧的（不支持的）Three.js版本（2013年的r60）。

所以我的问题：“有没有办法使用最新版本的Three.js对应用程序进行编码，以便将移动iOS（8.4）设备上的手指点击视为鼠标点击？

修改

稍微狩猎后，我在processing touch events找到了有用的信息来源。

Answer 1

这个解决方案只是一种解决方法，但它可以帮我完成工作。它拦截并处理Android 4.1和iPad / iOS 8中的touchstart事件。

“官方”方式似乎是捕获触摸事件然后创建鼠标单击事件并发送它。然后，我们的Click事件侦听器将拾取合成的单击事件，并将其传递给所选的单击处理函数。但我无法让它工作，以便点击处理程序接收触摸的客户端x，y坐标。

所以我只是简单地处理触摸捕捉器功能中的触摸事件（在我的情况下，'touchstart'是我感兴趣的所有内容），并提取触摸客户端x，y坐标并处理它们，并将结果传递给触摸位置处理程序（鼠标单击处理程序将传递给的位置）。

  //... You need to put this line, or similar, in F_Init:-

 document.addEventListener( 'touchstart', F_event_Touch_onDocument_handle, false ); 

//===========================================================================================

function  F_event_Touch_onDocument_handle( evt ) 
{

  evt.preventDefault();  //... this prevents window from sliding about.

  //------------------------------------------------------------------------------------

  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
    //... if more than 1 touch detected then ignore.
    return;

    //------------------------------------------------------------------------------------

  var reaction_type = null;
  var touch = null;

  //... see here for event types  http://www.w3schools.com/jsref/dom_obj_event.asp  

  switch (evt.type) 
  {
    case "touchstart": 
      touch = evt.changedTouches[0]; //... specify which touch for later extraction of XY position values.
      reaction_type = "onclick"; 
      break;
    case "touchmove": // I don't use this
      reaction_type = "mousemove";
      touch = evt.changedTouches[0];
      break;
    case "touchend":  // I don't use this     
      reaction_type = "mouseup";
      touch = evt.changedTouches[0];
      break;
  }

  if (reaction_type == "onclick")
  {
        //----------------------------------------------------------------

        // METHOD A (WORKAROUND)  //
        // Works OK
        // instead of dispatching a click event and letting our mouseClick event handler catch it
        //  we determine the touch x and y coordinates
        //  then pass them to the next function in the chain after the mouseClick event handler.

        thisTouch.x =   ( touch.clientX / window.innerWidth ) * 2 - 1;
        thisTouch.y = - ( touch.clientY / window.innerHeight ) * 2 + 1;

        xxx = F_see_if_Click_was_on_a_ThreeJS_Object( thisTouch.x, thisTouch.y );

        //----------------------------------------------------------------

        // METHOD B (OLD MOZILLA) //
        //  copied from "Handling Clicks" tutorial: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events#Example
        // * does not work, our Click event handler does not pickup touch.clientX and touch.clientY as numbers.
        // * initMouseEvent is deprecated... see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent 
        if {1 == 2)
        {
            var newEvt = document.createEvent("MouseEvents");

            newEvt.initMouseEvent( reaction_type, true, true, evt.originalTarget.ownerDocument.defaultView, 0, touch.screenX, touch.screenY, touch.clientX, touch.clientY, evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);

            evt.originalTarget.dispatchEvent(newEvt);
        }

      //----------------------------------------------------------------

    } // if (reaction_type == "onclick").
}
//... EOF F_event_Touch_onDocument_handle().

//=================================================================

Three.js Mobile iOS v8.4如何将touchEvents视为mouseEvents？

1 个答案: