Skip to content

Gullfaxi171/angular-photosphere-directive

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#Photosphere directive for Angular.js

##Getting started :

Import Angular, three.js and photosphere.min.js

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>
<script src="libs/photosphere.min.js"></script>

Add the 'photosphere' module to your app

angular.module('myApp', ['photosphere']);

##Use :

<photosphere src="path/img.jpg"></photosphere>

##Optionnal attributes :

    <photosphere src="path/img.jpg"
                 width="1024"               // Default is 640
                 height="768"               // Default is 480
                 speed="10"                 // Initial rotation speed. Default is 0. Has to be between 0 and 20
                 resolution="40"            // Number of division of the sphere on which is mapped the picture. Default is 30. Has to be between 10 and 80.
                 controls="all">            // Can be 'all', 'wheel', 'pointer' or 'none'. Default is 'all'
    </photosphere>

##Advices

  • You can put multiple photospheres on the same webpage
  • Working on smartphones/tablets
  • Big resolutions values can have effects on the performances.
  • Don't use too heavy pictures (like 10 Mo), people don't like to wait...
  • CORS are enabled, if you need to host your photopsheres on Google Drive you must follow this tutorial : https://support.google.com/drive/answer/2881970?hl=en

##Build

If you want to modify and re-build the project, you will have to convert the ts file (with tsc, atom-typescript, Visual Studio, whatever you want) and then to run :

npm i -g broccoli-cli
npm install
rm -r -f dist && broccoli build dist

##Coming Soon

  • Async load of the pictures
  • Headtracking control (with webcam)
  • LeapMotion control
  • Better reaction to resize
  • Setting the fov of the camera
  • Fisheye view
  • Bower support

##License

MIT License