Aframe 在帧中寻找在标记上渲染时通过触摸旋转和缩放模型的方法_Aframe_Ar.js

Aframe 在帧中寻找在标记上渲染时通过触摸旋转和缩放模型的方法

aframe

Aframe 在帧中寻找在标记上渲染时通过触摸旋转和缩放模型的方法,aframe,ar.js,Aframe,Ar.js,我正在使用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"></scri

我正在使用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>



我想知道如何添加控件，通过在手机浏览器上使用滑动手势在Y轴上旋转它（相对于标记），以及在执行挤压手势时动态缩放模型。理想情况下，当我在笔记本电脑上测试时，如果它也能与鼠标/触摸板一起工作，那就太好了，但在手机上触摸就足够了
通用控制能处理这个问题吗？我能看到什么例子吗？这必须在模型相对于标记（AR跟踪）进行动态渲染时起作用
感谢您的帮助，谢谢
 我不会使用基于RayCaster的“本机”控件。相反，我会使用任何js手势检测库。在这个例子中，我使用了
hammer.js注册一个对象，该对象在检测到平移
，滑动
，捏
手势时发出事件。我已经用a-frame组件中的侦听器创建了对象
1） 当检测到pan
时，我只需根据方向旋转模型（2-左、4-右、8-上、16-下）
2） 检测到挤压时，我会根据事件值更改刻度，您可以乘以任何因子。组成部分如下：
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);
    });
  }
});

工作故障。在我的示例中，我还检查了标记是否可见，认为它可能很方便。
您好，您能重新创建从Glitch删除的项目吗？@HamoudaArfaoui感谢您让我知道，我将在周末附近的某个地方尝试更新anwser。您能检查项目吗？看起来现在无法访问是的，很遗憾仍然无法访问