Ищите способ в рамке вращать и масштабировать модель с помощью касания при визуализации над маркером - PullRequest
Новая
       10

Ищите способ в рамке вращать и масштабировать модель с помощью касания при визуализации над маркером

0 голосов
/ 06 мая 2018

Я загружаю эту модель Collada (DAE) с рамкой 0.8.2 и использую 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>

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

Я хотел бы знать, как добавить элементы управления для поворота его по оси Y (относительно маркера) с помощью жестов смахивания в браузере мобильного телефона и динамического масштабирования модели при выполнении жестов сжимания. В идеале было бы неплохо, если бы он также работал с мышью / сенсорной панелью, когда я тестирую на своем ноутбуке, но достаточно прикоснуться к телефону.

Может ли универсальный контроль справиться с этим? Любой пример, который я могу видеть? Это должно работать во время динамического рендеринга модели относительно маркера (отслеживание AR).

Любая помощь приветствуется, спасибо!

1 Ответ

0 голосов
/ 06 мая 2018

Я бы не использовал "родные" элементы управления, основанные на raycastters. Большинство курсоров не работают должным образом в ar.js (по крайней мере, по моему опыту).

Я бы использовал любую библиотеку обнаружения жестов js. В этом примере я использовал hammer.js .

hammer.js регистрирует объект, который генерирует события при обнаружении жестов pan, 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);
    });
  }
});

Рабочий глюк здесь . В моем примере я также проверяю, видим ли маркер, подумал, что это может быть удобно.

...