Wednesday, December 19th, 2007
3D Panorama in JavaScript
Category: JavaScript
, Library
John Dyer has created his own 3D panorama trick in JavaScript.
His code takes a large panorama, and “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.”
3.5 rating from 29 votes
Well, first impressions are, ‘nifty’ :)
Might make sense on a webpage that needs panoramics (even if they are slightly lower quality) but wants to remain very lightweight.
It’s sad that the page linked ONLY works in Firefox.
It does not work in IE7, nor Opera, nor Safari (win32) nor Konqueror.
I understand it’s just a demo/prototype, but it would still be nice if people were to code such things to be as crossplatform as possible. Perhaps they are using Firefox-specific features, or perhaps not.
Warning: do not watch the demos with any kind of blood alcohol level, heh
wow — who needs flash? :p
It’s a nice proof-of-concept but it wouldn’t make sense to use over a Quicktime VR. It’s just a QTVR panorama with a lot less functionality. However, it is nice it can be used if you don’t have any plug-ins installed.
I was toying with a similar approach (many copies of an image shown at once) in attempting to make a “genie effect” similar to Apple’s window zooming feature in OS X, but it turned out to be quite CPU-intensive of course, and oddly enough was slowest in IE; Firefox, Safari and Opera handled working with many images at the same time.
nice work, I prefer the flat 360 over the stepped tiles–which makes for a smoother animation too. About the only major benefit plugins give you with this is better performance but when you go flat the overhead is negligible (fewer tiles to animate). In fact in my previous attempts the flat javascript versions matched flash for overall experience. I’ve been wondering when someone would try to do the full vertical and horizontal 360 like quicktime but the effect isn’t as good a value as simple 360’s (at least for giving you a quick and cheap sense of being-there).