View Full Version : How would i go about this?

10-29-2012, 09:51 PM
Hi there. I want to make a site that is basically the interior of a pub / bar. The user can move 360 degrees around the bar to look at the various features, placed in points off interest will be various icons which when clicked will open a small div element and just provide a little text. How would i go about doing this and what would be the best tools to use?

From the limited knowledge I'm guessing i'd want to take lots of photos to compile one large image of the entire place? I'm thinking just doing it all in HTML5 would be my best bet?

Any help or advice would be much appreciated.

I'll try and find an example of what I'm talking about to make it clearer too.


10-29-2012, 09:54 PM
So a bit like this site but rather than just being in one small box I want it full screen..


Ideally if possible I want to be able to give the user to move closer to either end of the bar too.

10-30-2012, 01:54 AM
first of all you'll need 360 degrees panoramic photo for each point of view you want to use.
there are some scripts to view those like this: http://www.cheetah3d.com/download/HTML5pano/index.html
i seriously doubt you'll find something custopmizable enough to put there your little popups and stuff like that.
you know it's not that easy. you need real-time geometry correction for each frame, so for something like that to work smoothly on averge computer it will need to be really well optymized.
you'll either code it yourself or you'll pay quite a bit for it.
also to shoot good panorama (especially if you want to be able to zoom it in, you'll need decent tripod with panoramic head(camera needs to rotate exactly around nodal point to keep perspective). i'm a photographer and i can tell you those aren't cheap.
just to show you basic viewer for those: http://www.openstudio.fr/jquery.spherical.panorama/
it takes forever to load and it's not even close to full screen ;)
here's one good guide how to make that kind oh photos: http://www.lightspacewater.net/Tutorials/PhotoPano2/paper/
it's interesting project tho. i might be even interested in collaborating on that one
PM me ;)

10-30-2012, 02:10 AM
The canvas element can be good for getting really tricky, with a ton of Javascript as well. However, the site you linked simply uses Flash, as does Google site-maps, from what I see. That might be the better option.

One more consideration I would throw in there is usability. The majority of people are turned off by web pages with excessive interactivity, load times, and poor navigation. Personally, I wouldn't frequent a website where I had to drive around with mouse gestures and load massive images, even if I was initially impressed. Likely many people feel the same.

10-30-2012, 07:50 PM
Okay, cheers for the info.

I guess 360 degree wouldn't be needed, as being able to see all the floor and celling space is pretty pointless as there's not much to look at.

So would it be any easier if the images was one long level image (an exceptionally long panorama), as to allow the user to only move in one plane (left and right).

As for the usability issue that Custard7A pointed out. This site is only going to be viewed by a very limited audience and only on a handful (if not one) occasions, so loading times etc.. aren't too much of an issue.


10-31-2012, 01:33 AM
in that case u can just use your panorama as a backgroung for div and animate background-position propertu using jQuery. taht would be prolly easiest aproach