Сообщество программистов Autodesk в СНГ :: Панорама iPhone с помощью Forge Viewer

Сообщество программистов Autodesk в СНГ
Forge: Viewer
Панорама iPhone с помощью Forge Viewer

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».

ДЕМО

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

Шаги:

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

viewer.toolController.activateTool('firstperson')

Вот и все.

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

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

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

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

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

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

Код - JavaScript: [Выделить]

(function() {
AutodeskNamespace('Autodesk.Viewing.Extensions.GamepadModule');
 
Autodesk.Viewing.Extensions.GamepadModule = function(viewer) {
 
    window.addEventListener('deviceorientation', e => this.deviceOrientation = e );
 
    this.update = function(camera) {
        if (!this.deviceOrientation) return camera;
 
        doe = this.deviceOrientation;
        euler.set(deg(doe.beta), deg(doe.alpha), -deg(doe.gamma), 'YXZ');  // «ZXY» для устройства, но «YXZ» для нас
         qe.setFromEuler(euler); // сориентировать устройство
 
         quaternion.set(Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // PI/2 вокруг оси x
        quaternion.multiply(qe); // ориентировать устройство
        quaternion.multiply(q1); // камера смотрит на заднюю панель устройства, а не сверху
        quaternion.multiply(q0.setFromAxisAngle(zee, -this.orient)); // настройка ориентации экрана
        m1.makeRotationFromQuaternion(quaternion);
        camera.setRotationFromMatrix(m1);
 
        // настройка цели камеры
        var lookAtDir = new THREE.Vector3(0, 0, -1);
        lookAtDir.applyQuaternion(camera.quaternion);
        camera.target = camera.position.clone().add(lookAtDir.clone().multiplyScalar(10));
 
        viewer.impl.invalidate(true, true, true);
        return camera;
    }
 
    const zee = new THREE.Vector3(0, 0, 1);
    const deg = THREE.Math.degToRad;
    let doe = null;
    let qe = new THREE.Quaternion();
    let q0 = new THREE.Quaternion();
    let q1 = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // -  PI / 2 вокруг оси x
    let quaternion = new THREE.Quaternion();
    let euler = new THREE.Euler();
    var m1 = new THREE.Matrix4();
    this.orient = 0;
    window.addEventListener('orientationchange', e => this.orient = deg(window.orientation), false);
 
    this.activate = function(toolName) {};
 
    this.deactivate = function() {};
};
})();