Displaying your Photospheres on your website

View the example page View the Source on Github Download the Library

To simplify adding a photosphere to your website, I created the “Photosphere” library found in the above github repository.
Start by linking the required libraries in the following order

<script type="text/javascript" src="lib/three.min.js"></script>
<script type="text/javascript" src="lib/Detector.js"></script>
<script type="text/javascript" src="lib/OrbitControls.js"></script>
<script type="text/javascript" src="lib/Photosphere.js"></script>

Next you’ll need to style the element containing the photosphere, it will have the ID #canvas-photosphere.

<style type="text/css">
#canvas-photosphere {
  position: fixed;
  top: 0;
  left: 0;
}
</style>

Setup the detector to alert users with incompatable browsers.

<script type="text/javascript">
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
}
</script>

After the close of the if statement, you’ll add the photosphere initalizer.

<script type="text/javascript">
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
}
Photosphere.init("My_Photosphere.jpg");
</script>

A quick tip to improve your results, rescale the photosphere into a square where the width and height are a power of two using Photoshop. I recommend 4096×4096. This isn’t required at all, as the software will automatically rescale, but it will improve loading speed and gives you have control over the rescaling method.