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;

Setup the detector to alert users with incompatable browsers.

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

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

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

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.

My First WebGL application

About a week ago I begun to dig through a few WebGL frameworks. I tried GLGE, CopperLicht, and SceneJS. I went through a few tutorials in each, and then I decided to do something with SceneJS.

I wrote a PHP class that was a recursive backtracer maze generator (will post regarding this later), so what I did was create a second class that transforms the map data from the recursive backtracer and translate it into a 3D Scene.

So far it’s fairly simple, I have a premade set of prims for each wall, ceiling, and floor. Then I just run through the map cell by cell, cloaning the prims and then just adding the row number and column number to the X and Z positions.

The camera view is first person, but you can still walk through walls I haven’t learned how to keep that from happening yet.
I marked the end of the maze with a gold goblet.

Visit the application (Requires a WebGL browser)