Update: Please note, this a Firefox-only, totally experimental "fun" project, not meant for real world use 🙂
I'm putting together a tutorial for making 3D panoramas using Papervision3D (example) and I though I would release some pretty pointless JavaScript code I wrote a while back that attempts to make a panorama using just JavaScript. Here's how it works: it creates a series of div columns, and then puts copies of the image in each column. As you move your mouse across the image, it stretches the columns vertically along a sin curve to fake the 3D look. And then it destroys your processor.
Here's part of a photo before the effect is applied:
Here's the photo split into 1px wide columns. Notice how the roof is straightened out.
Unfortunately, its too slow to be usable. So here's the photo split into 5px wide columns, which makes it pretty usable and doesn't look too bad.
Here are links to try it out:
- Panorama 1 – Africa (small and fast)
- Panorama 2 – Oregon mountains (low curvature)
- Panorama 3 – Garden (high curvature)
- Panorama 4 – Campus (fisheye look)
- Lines reference image (to test curvature)
It is a great JS utility. Greetings.
Hey thats very interesting even if LOL, it will run slow . Have you looked at any Java applets code that generate the 360 degree photos effect / panoramas? Maybe there are ways of optimizing it therein? A Javascript version would be great for the Virtual Tours my company provide – even if the Java version we use is generally found as supported as default on most web browsers — I think Javascript would future proof the whole effect.
@Luke, yes I’m aware of Java options, but I personally don’t like Java applets very much. Right now I’m working with Flash (under Papervision3d) to produce 3D panoramas. This is just a "Stupid JavaScript Trick" that probably would never work for real-world use. It’s just for fun to show what JavaScript could theoretically do.
Here’s a sample from the papervision site: http://www.papervision3d.org/demos/panorama/
It might be a great fit for your company.
i think this pure js trick/hack is more funny than stupid.
don’t worry John, OpenGL is arriving to JS hands, then let’s see what looks more stupid 😉
http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/
I’ve been experimenting with some 3D (actually more like 2.5D) JavaScript stuff as well:
http://tlrobinson.net/misc/3d.html
note this is very very alpha and probably only works well in Safari and Firefox, though i dont think the menu work in FF so youll only see the first one. Sorry.
common guys, this is like 2000 when flash 4 came out….
the wheel is invented, gunpowder is plentyful, stop replicating, start innovating…
good
this is like 2000 when flash 4 came out….
Awesome! Useless, but I love the concept!
very nice
I liked so much light