Forge Viewer extension - Use iPhone/Android's deviceOrientation to control camera for a panorama scene. See BLOG:
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
.gitignore
LICENSE
README.md
firstPerson.jpg
pano.gif
scanQRcode.jpg

README.md

'DeviceOrientation' Extension

Use Forge Viewer like a panorama viewer - view the inside of a Revit building with your iPhone or iPad.

Introduction

I recently had a customer asking for a quick way to showcase the inside of a building, like a panorama, but with Forge Viewer and a QR-code. The idea was simple...

  1. with my iPhone camera
  2. scan the QR-Code (try the one above)
  3. Now, aim my iPhone up, down and around, to look around the room.

This launches Forge Viewer and loads the Revit room and starts the 'first person' tool

Bonus points - add 3D markers everywhere using the MarkupExt.js.

That's it.  Sounds simple, right?  Well... sort of.

There's some quaternion math that ties the onDeviceOrientation events (in Euler degrees) from the iPhone compass/accelerometer, into the Forge Viewer's position/target camera object.

Anyone who's tried this, knows there's a bunch of ugly edge cases due to the portait/landscape modes and iPhone/Android differences.

Now, I know what you are thinking, "why don't you just use the webVR extension?"

True, but I need full-screen panorama, not the split-screen that webVR offers. Besides, the webvr-polyfill, has been 'somewhat' unreliable trying to support so many devices.

Thankfully, the clever folks at Three.js have already figured out a robust solution already - deviceOrientation.js.

I simply adapted this to the camera/target model, and we are done.

To minimize the code further, I re-use the 'gamepad' interface inside the 'first person' tool. I supply a custom 'gamepad' component with the 'deviceOrientation' event overrides to control where the camera is looking. Here's a ...

DEMO

How to use:

Steps:

  1. Add <script src="deviceOrientationExt.js"></script> to your index.html
  2. Click on the 'first person' tool

  1. That's it !

You can find an example of how to use the extension on GitHub here: https://github.com/wallabyway/deviceOrientationExt

Feel free to add any issues you find to my Github issues repo.

Follow me on Twitter @micbeale