‚ÄčReports say Apple will team with top credit cards for #iPhone6 payments. http://t.co/ZDjJiCYaJ4

posted 13 mins ago on twitter

close

QTVR Like Panorama with Flash and Papervision3D for NBC and The Office

NBC asked us to build a reusable interactive VR panorama solution to show off their studio sets on their website. With the advent of the Papervision3D API, itís now really easy to import a 3D sphere or cube in Flash and map it with a 360 degree picture. The main challenge here was to add interactivity to the 3D space.

Hereís a technical demo with some basic examples of interactivity. The possibilities are endless. Donít miss the video on the large door in the kitchen!

[kml_flashembed movie="wp-content/071016/demo/main.swf" width="512" bgcolor="#0a1319" height="293" base="wp-content/071016/demo/" /]
Click and drag to rotate the 3D space

Hereís how we did this.

First we created hotspots on the texture map. When clicked, these hotspots can trigger animation in the image, tell the camera to move or zoom to a certain position, launch a sound or video, or call action to navigate to another room. These hotspotsí alpha transparency property are set to†0 so we wonít see them in the 3D space.

360 degree image with hotspots

The NBC panorama images were fitting perfectly on a sphere. With Papervision3D 1.5, it was impossible to click on the hotspots once they were mapped on the sphere. So we had to re-create these hotspots in 3D space inside the sphere.

360 degree image proportions

We know our image is 1600 pixels wide, so that equals to the 360 degrees on the sphere. We also know that the hotspot is located 702 pixels from the top corner. From that, we can get an angle. Same thing for the Y axis. That gives us two angles which weíll use to find the exact point on the 3D sphere for that hotspot.

360 degree image proportions on a 3D sphere

So we created a plane for each hotspot on the texture map. Using a MovieScene3D, we were able to add event listeners to the planesí containers and forward those events to the original hotspots on the texture map.

Planes on sphere

{ 41 comments }

xero / fontvir.us October 17, 2007 at 10:36 am

this looks/works great! one question, what software did you use to stich the photos together to make the pano images? thanx!

Patrick M October 17, 2007 at 11:07 am

NBC already had all these images so i dont know exactly how that part is done. I’ll try to find out with them.

Jim Bachalo October 17, 2007 at 11:29 am

I use PTgui with great success for image stitching.
I’ve done a bit of testing with the PV3D implementation of cubic vrs…I think there is room for improvement in terms of reducing image distortion.
Noticed the wave like ripple effect on straight lines, and , though not noticeable in your demo, there is an issue whereby straight lines ‘bend’ when meeting at the inside edges of the cube…would love to get feedback from other PV3D users… you can contact me at moveup at mac dot com

Patrick M October 17, 2007 at 12:58 pm

The image distortion can be reduced by augmenting the number of polygons on the 3D model. But you get huge drop in performance if you use too much polygons. I tried to get the best compromise between quality / performance and that is how it came out.

Dominic October 17, 2007 at 1:29 pm

Fantastic Work! Really great that NBC and The Office are using cutting edge tech. Can’t wait to see what projects come up with PV3D 2.0

Pete October 18, 2007 at 12:37 am

How are you continuing mouse interaction once i leave the flash area? Thats quite spooky :)

Zdeto October 19, 2007 at 7:24 am

Interesting use of PV3D. I think by now it’s the best use of PV3D for panoramic images.

I was wondering if you knew about Flash Panorama Player – http://flashpanoramas.com/

I think it offers more interactivity.

Diaco November 7, 2007 at 6:08 am

Really nice! Your post helped me a lot on hospot placement…

first, sorry for my english.

I have to make something similar a vr wit hotspots, but i have a problem…
it only display hotspots when they are out of sight. (only on extreme borders i just see a part of it), i think papervision render them only when the hotspot is in the back of the camera and stop to render them when it is in front of the cam.
Any idea?

i use a FreeCamera3D();
i tryed with an ase, a collada (your collada) and i always have the same problem.
i also had to flip the texture on x axis…

ivan November 25, 2007 at 1:10 pm

can you give me the tutorial for this sphere in flash, how to use camera, panoramic picture and so…

Duran January 4, 2008 at 9:36 am

this is really cool.

I have been trying to make something that I guess is like this for a sound visualizer, the problem I am running into though is that the visualizer is a sphere that rotates independently of the music being played and I want to attach planes to certain points on the rotating sphere, but I can’t figure out how to register them to one point on the sphere so that they rotate with it. Could you point me in the right direction. I have been trying to find help everywhere from the papervision mailing list, but i never get any response, any help at ll would be amazing

thanks in advance
Duran

Patrick M January 4, 2008 at 11:01 am

Maybe you could constrain your plane’s position to one of the vertex in the sphere’s mesh.
Something like plane.x = sphere.vertices[35];
The problem is to find the right vertex in the array.

And I guess you would also have to set the plane as a child of the sphere.
sphere.addChild(plane);

Duran January 4, 2008 at 12:13 pm

Wow that worked perfectly, thank you so much. I was only missing the sphere.addchild, I didn’t know I could do that.

Thanks again
Duran

frankH January 9, 2008 at 12:48 am

Hi, I’m using Pv3D now to create a similar panorama and was wondering how the mouse-drag control was done? So that you start press the mouse button and drag the mouse along and the camera moves smoothly as long as you keep the mouse pressed. Could somebody point me into the right direction how to write such a control?

Patrick M January 9, 2008 at 11:30 am

addEventListener(Event.ENTER_FRAME, onEnterFrameEvent);
stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownEvent);
stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpEvent);

private function onMouseDownEvent(e:MouseEvent):void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveEvent);
startPoint = new Point(mouseX,mouseY);
rotationYStart = camera.rotationY;
rotationXStart = camera.rotationX;
}

private function onMouseMoveEvent(e:MouseEvent):void{
rotationYTarget = rotationYStart – (startPoint.x – mouseX) / 2;
rotationXTarget = rotationXStart + (startPoint.y – mouseY) / 2;
}

private function onMouseUpEvent(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveEvent);
}

private function onEnterFrameEvent(e:Event):void{
camera.rotationY += (rotationYTarget – camera.rotationY) / 3;
camera.rotationX += (rotationXTarget – camera.rotationX) / 3;
scene.renderCamera(camera);
}

frankH January 15, 2008 at 3:56 am

Patrick thanks a lot for the code! That works very well!

sascha/hdrs January 15, 2008 at 5:09 am

Great tutorial! I’m trying to follow it to get a panorama with hotspots working but I’m running into a problem: The hotspot is not where it should be. I use the same code as above on the screenshot but the radius of my sphere is 25000. I’ve made a screenshot of my scene: http://files.hexagonstar.com/images/misc/panohotspots.jpg … the calculated hotpsot is on the left (note that some of it’s faces seem to go behind the sphere material) and the place where it should be is the half-transparent rectangle on the right. I’ve checked my code for mistakes but it’s all the same like above so the problem must be something else. Also I’m using PV3D v2alpha. It would be great to get a hint what could be wrong!

Patrick M January 15, 2008 at 10:52 am

Hey sascha, if you’re using Papervision 1.5 or later, you can create hotspots right in your material. Just set your material’s and viewport’s interactive property to true. When you mouseover or click on your 3D objects, the events will be dispatched to the hotspots inside the material.

That’d be much simpler than to create hotspots like in this project. This project was made a few months ago and pv3d didn’t support interactive materials at that time so hotspots had to be created manually.

sascha/hdrs January 15, 2008 at 11:28 pm

Thanks a lot Patrick! I figured it out! Wow this is easy now!

Myksa January 16, 2008 at 7:41 am

Hello

I made a cubical panorama from 6 faces, but i was thinking about a sphere, and I don’t know if I can put a spherical image onto a sphere. And if I could, I don’t know how to do it… Can anoyone help??

Thanks in advance
Myksa

Tomi January 18, 2008 at 1:16 pm

How do you know which hotspot you have clicked.
I am trying to do same thing but when I click on hotspot it always returns event.target the last one.
I am creating hotspots with for loop.
private function createHotSpots()
{
for (var i:int; i<hotSpot_arr.length; i++)
{
// Create texture with a bitmap from the library
var material :InteractiveMovieAssetMaterial = new InteractiveMovieAssetMaterial( “hotSpot”,true,true );
material.oneSide = true;
material.smooth = true;
hotSpotPlane_arr[i] = new Plane( material, 91, 91, 8, 8, MovieClip(material.movie) );
//

//
hotSpotPlane_arr[i].x = 600 * Math.sin((hotSpot_arr[i].angle * Math.PI/180));
hotSpotPlane_arr[i].z = 600 * Math.cos((hotSpot_arr[i].angle * Math.PI/180));
hotSpotPlane_arr[i].y = 600 * Math.sin((hotSpot_arr[i].tilt * Math.PI/180));
//
hotSpotPlane_arr[i].rotationY += hotSpot_arr[i].angle;
//hotSpotPlane_arr[i].i=i;
//
var hotSpotSprite_arr:Array=new Array();
hotSpotSprite_arr[i] = MovieClip(material.movie);
//

hotSpotSprite_arr[i].name = “hotSpot” + i;
hotSpotSprite_arr[i].i = i;
//
trace(hotSpotSprite_arr[i].i);
//
hotSpotSprite_arr[i].addEventListener(MouseEvent.CLICK, handleBTNClick);
//
//trace(hotSpotPlane_arr[i].x+”:”+hotSpotPlane_arr[i].y);

scene.addChild( hotSpotPlane_arr[i],”hotSpot” + String( i ) );
}
}

Kevin January 29, 2008 at 3:14 pm

I would really like to do a project like the one featured here. I can do this in Director without much problem, but I am just not understanding the process in Flash. I have the coding listed here, but I am just not making the right connections. Is there a way I can see the fla or a basic tutorial on how to accomplish the above project? I have a basic understanding of Flash and usually can figure things out from an fla, but this is totally elluding me.

If it wasn’t for the fact that the Shockwave plugin has pretty much fallen off the map, I would do my project in Director. I have become a Flash convert but this is driving me crazy!

Some specific questions if I cannot get a working fla…

Are you just creating the hotspots within Flash by making a shape as a movie clip and giving it an instance name?

You made the following statement [...] if youíre using Papervision 1.5 or later, you can create hotspots right in your material. Just set your materialís and viewportís interactive property to true. When you mouseover or click on your 3D objects, the events will be dispatched to the hotspots inside the material. [...] How do you do this? Is this done in Flash or am I missing something from the PV3D download?

That is just a start. If someone is willing to help me out via email, please shoot me one.

Patrick Matte January 29, 2008 at 4:43 pm

Hey Kevin, doing a panorama like this is super easy with pv3d 1.5+.

You need to put the 360 image in a MovieClip.
Create MovieClip hotspots over the image in that same MovieClip.
Add MouseEvents to the hotspots.
Create a MovieMaterial with that MovieClip.
Set the MovieMaterial’s interactive property to true.
Create a scene or viewport depending on which pv3d version you’re using and also set it’s interactive property to true.
Create a doubledSided sphere and apply the movieMaterial to the sphere.
Create a FreeCamera3D, put it inside the sphere.
Publish, rollover, click on the hotspots on the sphere, all events should be dispatched to the hotspots in the 360 images MovieClip.

If you really cant get around it, take a look at http://www.visicam.de/, I think it’s using a very old pv3d version unless it was updated recently…

abdel2388 January 30, 2008 at 4:13 pm

i wannna make a panorama like this but i have not the src so plaese sommeone can give us a tutorial about panorama with 360į picture (i need’nt hotspots)
thanks

Denis February 12, 2008 at 10:12 am

Nice. Although it can be created easier with Flash Panorama Player.
Similar functionality example: http://flashpanoramas.com/blog/2007/05/23/add-some-life-to-panoramas/

jmk February 24, 2008 at 6:54 am

this project looks awsome.

can you explain how you did the opening drawers? are they 3d too?
they seam to show the correct perspective regardless of the position, they are opened.

thanks
Joerg-Mark

Patrick M February 25, 2008 at 12:58 pm

The client had two shots of the same room, one with the drawers closed, and on ewith the drawers opened. We you rollover the drawer, the opened drawer image fades over the closed drawer and the whole MovieMaterial is refreshed. That is a little bit hard on the processor because the texture is so big…

Nicolas May 7, 2008 at 10:17 am

Hi! Nice work! Was wondering if its possible to add 3d object into the sceene that are independant of the image. Like a second phone on the table to be able to change the color and so on.

Robert P May 11, 2008 at 10:08 pm

Hi Guys,

After a lot of struggling and some heavy inspiration I’ve released source for a completely working spherical panoramic QTVR in Flash with pv3d.

http://www.robertjpayne.com/blog/?p=7

Shaun S May 14, 2008 at 10:19 am

Hey Patrick,

I was hoping that you could help me out with regard to your post on the 29th January about how to easily add hotspots to a sphere using Papervision 2.0 (Great White).

I’m using this version and following your guidelines I’ve managed to get it very close to being fully working.

Here’s what I’ve done:

- put my panoramic into an MC on the stage and added hotspot mc’s inside this ‘pano’ mc
- i’ve added MouseEvents to these hotspots (which all work fine when i test without creating a sphere for the ‘pano’ mc)
- i then created 1 new MovieMaterial using my main ‘pano’ mc (which contains both the panoramic image and my hotspots) and set the interactive property for this to true
- i then created a double sided sphere using the ‘pano’ mc as a reference
- finally i went through the usual process of setting up a Viewport3D, Scene3D, FreeCamera3D and BasicRenderEngine

My movie all works fine with the pano mc mapped onto the sphere and me being able to control movement around the inside of the sphere with the mouse. However, there is no interaction with my hotspots?

If I change the hotspots MouseEvents to be linked to my ‘pano’ mc (and not ‘pano.hotspot1′ for example), my MouseEvents work fine, so it seems to me that everything except the forwarding on to the hotspots in the pano mc is working fine?

Do I need to create a new MovieMaterial for each hotspot and add that material to a plane in the scene to get this working? Or do I maybe need to have the MouseEvents code in my onEnterFrame listener?

If you could let me know it would be very much appreciated as I’ve hit a wall with this.

Many thanks,

Shaun

VirtualVisit June 9, 2008 at 9:17 am

Nice virtual visit. I like the navigation of it, very clear and professional.
Cool interactivity features as well. Nice job in the end!

Christina June 13, 2008 at 3:00 pm

Hey is there any where i can get a tutorial to better explain how to make this on a sphere? Ive made one on a cube but i cant figure out how to with a sphere

Christina Rule July 4, 2008 at 9:03 pm

Hey i have got a question i recently have been playing around with paper vision and as3 now i want to make it interactive but i some how need to tell flash that when i click on a link to stop the paper vision camera and go to a different swf…im not sure how to do this and need help!@!! PLEASE HELP!@ hahah you can check out what i have here http://christinarule.com/test/downstairs2.swf and here is my code http://christinarule.com/test/main.as

Jos van der Vleuten July 16, 2008 at 6:11 am

Hi, your great article inspired me a lot, and i have made a test at
makingartworkforfun.com, somewht slow for the moment but i’m workin on it.

cheers,
Jos van der Vleuten

Mika July 17, 2008 at 2:26 pm

Hi,

I want to know if it’s possible to move the camera into the sphere and create colisions with “walls” to make the illusion that someone walk into the sphere ?

(sorry for my english :) I’m french)

Mika

Andre July 22, 2008 at 12:40 am

Hi Patrick/Anyone,

I am loading a collada file which defines a sphere and its related panorama JPG file.
I want to be able to add hotspots to the surface of the sphere so that I know when an item on the surface has been clicked. I see a lot of hot spot examples but none that use a collada file? I have the collada file working and panning as required, I just need to add hotspots.

Failing that, how do I determine which pixel has been clicked, moused over in the collada image – I know the position of the hotspot areas I need in teh JPG file so if I can determine the actual pixel x,y the mouse is over on the image I can do waht I need to do.

Andre

Andre

Sacen March 25, 2009 at 2:30 am

Hi

Thanks Patrick, those information really helps alot : ). Anyone know of a step by step hotspot tutorial. I hope someone can point me to the right direction, as current education project is to make a site like the NBC one and really needs to get it working. Any help will be greatly appreciated.

Sacen

Anil April 14, 2009 at 10:01 pm

Hi
I want to know how to add hotspot to sphere. can any one give me the reply how to add hotspots to sphere

AAbraissegava October 24, 2009 at 3:10 am

Hello
buy vardenafil

It?s not a secret anymore that there are thousands of people worldwide suffering the problem of ED and the ratio of these people don?t seem to get to an end so sooner.
buy levitra
FDA approved Levitra is no doubt the most effective ED medication ever produced.
http://www.graffixmagic.com/ – vardenafil online
Always choose to take the service of reputed online companies only.

nia December 15, 2009 at 3:51 am

hi there,

I want to know whether this papervision3D has the same function like Maya or 3D max software that able to create 3D objects?

AngloPolish January 28, 2010 at 4:13 am

How this pictures are different from those on our site?
This are generated in some really complicated way. I thin to complicated.

Ronny March 16, 2010 at 12:22 pm

Great looking ;)