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