JeremyHeleine / Photo-Sphere-Viewer

A JavaScript library to display Photo Sphere panoramas.
855 stars 955 forks source link

Device Orientation Controls for mobile #21

Open dczaretsky opened 8 years ago

dczaretsky commented 8 years ago

Thanks for building this!

But I'm stuck on how to integrate the orientation controls for mobile devices (specifically iOS). Basically, I want to control the panning with the mobile device's gyros and accellerometers. I see that threejs has the capability in DeviceOrientationControls.js, but I can't figure out how to attach that to the camera object in your Photo Sphere Viewer.

Can you provide some assistance?

JeremyHeleine commented 8 years ago

Photo Sphere Viewer provides a button in the navigation bar to let the user navigate through the panorama using their device's orientation. However, this button is shown only if the used API is supported so, if you can't see it, maybe you use a browser which is not compatible (I think Apple's browser is not).

sem4phor commented 5 years ago

You basically have to import the three/examples/js/controls/DeviceOrientationControls.js file (which itself requires THREE itself). To provide THREE to the example file in webpack you have to do following config:

module: {
      rules: [{
        test: /three\/examples\/js/,
        use: 'imports-loader?THREE=three'
      }]
    }

(Which uses the package webpack imports-loader)