ADN Open CIS
Сообщество программистов Autodesk в СНГ

30/04/2018

Панорама iPhone с помощью Forge Viewer

 > Отсканируйте этот QRCode с помощью iPhone-камеры, чтобы попробовать сейчас <

Введение:

Недавно клиент спросил: «Как создать панораму iPhone с помощью Forge Viewer?».  Идея проста (см. Видео) ...

1. открыть iPhone-камеру 2. сканировать QR-код 3. направить свой iPhone вверх, вниз, чтобы осмотреться
 

 

Бонусные очки - добавьте 3D-маркеры везде, используя MarkupExt.js.

 

Как это работает?

Существует некая кватернионная математика, которая связывает onDeviceOrientation события (в градусах Эйлера) с компасом/акселерометром iPhone, с положением позицией/целью камеры Forge Viewer.

Любой, кто пробовал это, знает, что есть куча уродливых случаев из-за режимов portait/landscape и различий iPhone/Android.

Теперь я знаю, о чем вы думаете: «Почему бы вам просто не использовать webVR расширение

Правда, но мне нужна полноэкранная панорама, а не разделенный экран что предлагает webVR *. 

* И webvr-polyfill, был «несколько» ненадежным между версиями.

К счастью, умные люди из Three.js уже разработали надежное решение уже - deviceOrientation.js

Я просто адаптировал этот код к камере/целевой модели Three.R71, и «он просто работает» (С)

Чтобы еще больше уменьшить код, я повторно использую интерфейс «геймпад» внутри инструмента «вид от первого лица». Я создаю пользовательский компонент «геймпад» и переопределяю направление камеры с событиями из события «deviceOrientation». 

ДЕМО

 

Как использовать:

Шаги:

  1. Добавьте <script src = "deviceOrientationExt.js"></ script> в ваш index.html
  2. Активировать инструмент «вид от первого лица» программно, например ...

viewer.toolController.activateTool('firstperson')

 

Вот и все.  

 

Генерация QR-кода:

Откройте свою страницу index.html через свой iPhone - или еще лучше, разместить свою веб-страницу публично, тогда генерировать QR-код и отсканируйте его с помощью вашего iPhone/Android.

Вы можете найти пример использования расширения на GitHub здесь: https://github.com/wallabyway/deviceOrientationExt

Не стесняйтесь задавать любые вопросы, которые вы найдете по поводу моего репозитория Github.

Подписывайтесь на @micbeale

 

Исходный код:

Код - JavaScript: [Выделить]
  1. (function() {
  2. AutodeskNamespace('Autodesk.Viewing.Extensions.GamepadModule');
  3.  
  4. Autodesk.Viewing.Extensions.GamepadModule = function(viewer) {
  5.  
  6.     window.addEventListener('deviceorientation', e => this.deviceOrientation = e );
  7.  
  8.     this.update = function(camera) {
  9.         if (!this.deviceOrientation) return camera;
  10.  
  11.         doe = this.deviceOrientation;
  12.         euler.set(deg(doe.beta), deg(doe.alpha), -deg(doe.gamma), 'YXZ');  // «ZXY» для устройства, но «YXZ» для нас
  13.          qe.setFromEuler(euler); // сориентировать устройство
  14.  
  15.          quaternion.set(Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // PI/2 вокруг оси x
  16.         quaternion.multiply(qe); // ориентировать устройство
  17.         quaternion.multiply(q1); // камера смотрит на заднюю панель устройства, а не сверху
  18.         quaternion.multiply(q0.setFromAxisAngle(zee, -this.orient)); // настройка ориентации экрана
  19.         m1.makeRotationFromQuaternion(quaternion);
  20.         camera.setRotationFromMatrix(m1);
  21.  
  22.         // настройка цели камеры
  23.         var lookAtDir = new THREE.Vector3(0, 0, -1);
  24.         lookAtDir.applyQuaternion(camera.quaternion);
  25.         camera.target = camera.position.clone().add(lookAtDir.clone().multiplyScalar(10));
  26.  
  27.         viewer.impl.invalidate(true, true, true);
  28.         return camera;
  29.     }
  30.  
  31.     const zee = new THREE.Vector3(0, 0, 1);
  32.     const deg = THREE.Math.degToRad;
  33.     let doe = null;
  34.     let qe = new THREE.Quaternion();
  35.     let q0 = new THREE.Quaternion();
  36.     let q1 = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // -  PI / 2 вокруг оси x
  37.     let quaternion = new THREE.Quaternion();
  38.     let euler = new THREE.Euler();
  39.     var m1 = new THREE.Matrix4();
  40.     this.orient = 0;
  41.     window.addEventListener('orientationchange', e => this.orient = deg(window.orientation), false);
  42.  
  43.     this.activate = function(toolName) {};
  44.  
  45.     this.deactivate = function() {};
  46. };
  47. })();

Источник: https://forge.autodesk.com/blog/iphone-panorama-forge-viewer

Автор перевода: Дмитрий Емельянов

Обсуждение: http://adn-cis.org/forum/index.php?topic=

Опубликовано 30.04.2018
Отредактировано 30.04.2018 в 20:59:31