Question

我正在使用aframe 0.8.2加载此Collada（DAE）模型并使用aframe-ar将其显示在Hiro标记上：

const {
  cassandraDriver
} = require('./lib')

module.exports = async ({
  username = 'cassandra',
  password = 'cassandra',
  address,
  keyspace,
  replication_factor = 1,
  migration_script_path,
  logger = require('bunyan').createLogger({
    name: 'BuildCassandra'
  }),
  driver = cassandraDriver
} = {}) => {
  try {
    const client = await driver(
      username,
      password,
      address
    })
  } catch (e) {
    logger.error(e)
    throw e
  }
}

Codepen：https://codepen.io/germanviscuso/pen/KRMgwz

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

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

感谢任何帮助，谢谢！

Answer 1

我不会使用＆＃34; native＆＃34;基于光线投射器的控制。大多数游标在ar.js中都不能正常工作（至少根据我的经验）。

我会使用任何js手势检测库。在此示例中，我使用了hammer.js。

hammer.js注册一个对象，该对象在检测到pan，swipe，pinch手势时发出事件。我在一个框架组件中用侦听器创建了对象。

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

工作故障here。在我的例子中，我还检查标记是否可见，认为它可以很方便。

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

1 个答案: