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.

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)