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.”

Panorama 3D

Posted by Dion Almaer at 8:53 am

3.4 rating from 42 votes


Comments feed TrackBack URI

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.

Comment by Robert Schultz — December 19, 2007

Warning: do not watch the demos with any kind of blood alcohol level, heh

Comment by starkraving — December 19, 2007

wow — who needs flash? :p

Comment by mdmadph — December 19, 2007

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.

Comment by RobRobRob — December 19, 2007

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.

Comment by Schill — December 19, 2007

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).

Comment by ujuxiun — December 19, 2007

Leave a comment

You must be logged in to post a comment.