Developing a 3d virtual tour using html5/three.js

Question

I was taking a look at this example, http://gardengnomesoftware.com/samples/pano2vr_3/mozart/ and I was really interested in how it was done.

Do you think it would be complicated to develop such a function using one of the webgl engines out there? Is the panorama image just a texture on a cylindrical model? How is the panorama "cut?"

Perhaps it is just a cube with the images as a texture? You can kind of see the faces when it is loading slowly.

Solution

Yes, in this case it is simply a cube that the "camera" is centered in. It's basically the same concept as a skybox in many video games.

How to create a cube-map from photos the way they've done isn't something I have experience with, but the wikipedia article links to some tools that may help, including Hugin

Comments

[gman]

You don't need a box or a sphere. That's left over from fixed function days. All you need is a clipspace plane and a shader. Sorry I don't have a three.js sample but here's a tdl one webglsamples.googlecode.com/hg/modern-skybox/modern-skybox.h‌​tml

[pr3sidentspence]

Good point! I think most people can visualize a box better, though. Nice demo of the technique, BTW!