JeremyHeleine / Photo-Sphere-Viewer

A JavaScript library to display Photo Sphere panoramas.
857 stars 961 forks source link

Gyroscope support in Node environment #88

Closed rishisharma08 closed 6 years ago

rishisharma08 commented 6 years ago

Hi im am trying to use the gyroscope, and i understand that Photo Sphere Viewer requires the DeviceOrientationControls.js from Three.js examples.

the way i use PSV is import PhotoSphereViewer from "photo-sphere-viewer"; let attrs = { container: id, panorama: image, default_fov: 179, anim_speed: "0.5rpm", gyroscope: true, navbar: [ "autorotate", "fullscreen", "caption" ] //navbar: false }; let myPsv = new PhotoSphereViewer( attrs );

in this scenario, how can i get DeviceOrientationControls.js working?

in a browser environment, its as easy as `

    <script src="js/renderers/CSS3DRenderer.js"></script>`

but its not the same on a node environment as THREE is not exposed to window. should i do a manual build with DeviceOrientationControls.js being part of the three.js ?

thanks in advance.

rishisharma08 commented 6 years ago

actually.. i may have figured something out

what i did was 1- let THREE = require( "three" ); 2- require( "./resources/three/DeviceOrientationControls" )( THREE ); 3- update DeviceOrientationControls.js to be like: `module.exports = function( THREE ){

}` 4- initialize psv like this `let PSV = require( "photo-sphere-viewer" ), myPsv = new PSV( {...blah...} )` i think that should do it. going to test on a device somewhere and update the issue.
rishisharma08 commented 6 years ago

so now, THREE.DeviceOrientationControls exists (i put some logging in the photo-sphere-viewer.js) but i dont see it actually work on my android device. derp. ill close this issue though.

but please reply if u have a better solution.

Xiaocge commented 4 years ago

Gyroscope not work.

With the help of my