时间戳

首页 > 解决方案 > 在标记上渲染时，在框架中寻找一种通过触摸旋转和缩放模型的方法

aframe - 在标记上渲染时，在框架中寻找一种通过触摸旋转和缩放模型的方法

问题描述

我正在使用 aframe 0.8.2 加载此 Collada (DAE) 模型，并使用 aframe-ar 在 Hiro 标记上显示它：

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best; debugUIEnabled: false;'>
      <!--a-marker type='pattern' url='https://rawgit.com/germanviscuso/AR.js/master/data/data/patt.gafas'-->
      <a-marker preset='hiro'>
        <a-collada-model src="url(https://aframe.io/aframe/examples/showcase/shopping/man/man.dae)"></a-collada-model>
      </a-marker>
      <a-camera-static/>
    </a-scene>
</body>

代码笔： https ://codepen.io/germanviscuso/pen/KRMgwz

我想知道如何通过在手机浏览器上使用滑动手势来添加控件以在其 Y 轴（相对于标记）上旋转它，并在进行捏合手势时动态缩放模型。理想情况下，如果我在笔记本电脑上测试时它也可以与鼠标/触摸板一起使用，但在手机上触摸就足够了。

通用控件可以处理这个吗？有什么我能看到的例子吗？这必须在模型相对于标记（AR 跟踪）动态渲染时起作用。

任何帮助表示赞赏，谢谢！

标签： aframear.js

解决方案

我不会使用基于光线投射器的“本机”控件。相反，我会使用任何 js 手势检测库。在这个例子中，我使用了hammer.js。

panhammer.js 注册一个对象，该对象在检测到、swipe、pinch手势时发出事件。我已经在 a-frame 组件中创建了带有侦听器的对象。

1）当pan检测到我只是根据方向旋转模型（2 - 左，4 - 右，8 - 上，16 - 下）

2）当pinch检测到我改变比例时，根据事件值，您可以乘以任何因子。组件如下：

AFRAME.registerComponent("foo",{
    init:function() {
      var element = document.querySelector('body');
      this.marker = document.querySelector('a-marker')
      var model = document.querySelector('a-collada-model');
      var hammertime = new Hammer(element);
      var pinch = new Hammer.Pinch(); // Pinch is not by default in the recognisers
      hammertime.add(pinch); // add it to the Manager instance

      hammertime.on('pan', (ev) => {
        let rotation = model.getAttribute("rotation")
        switch(ev.direction) {
          case 2:
            rotation.y = rotation.y + 4
            break;
          case 4:
            rotation.y = rotation.y - 4
            break;
          case 8:
            rotation.x = rotation.x + 4
            break;
          case 16:
            rotation.x = rotation.x - 4
            break;
          default:
            break;
        }
        model.setAttribute("rotation", rotation)
      });

     hammertime.on("pinch", (ev) => {
        let scale = {x:ev.scale, y:ev.scale, z:ev.scale}
        model.setAttribute("scale", scale);
    });
  }
});

这里的工作故障。在我的示例中，我还检查标记是否可见，认为它可能很方便。

推荐阅读