Page 1

Project B Concept My concept is to have an interactive video cube that the user can navigate the space by using the mouse. I plan use six photos taken from one equirectangular projection then recombined on the interior space of the cube. I also plan to have the camera placed inside the middle of the cube space so the user can rotate the view on any axis to look around the space. To encourage interactivity I plan to animate the photos and make the basically video files and in the end it will appear to look like the viewer is in the middle of a animation if everything goes as planned.


I ideally want no buttons to be involved just the rotation of the mouse should be enough to operate the camera.

user point of view

Project B R ese ac he d C od e The biggest obstacle for me will be code manly because I am a animator in AE, Maya, C4D, and know nothing about interactivity outside the basics of html. So I have been looking for tutorials and code that I can use in order to complete this project. I know this has been done before in a similar fashion and this is what I have found so far.

Most promising info I have come across has been the use of a program called papervision3d which is used as a loader for the images. has been the site that has had a couple tutorials on how to go about doing this. Here is a bit of code they have put out there:

var f = new BitmapAssetMaterial( "front" );

//camera settings using Camera3D

This is from Joy Galluci from class which I thought was very helpful:

cam.zoom = 1;

var d = new BitmapAssetMaterial( "down" ); b.smooth = true;

cam.focus = 1000;

f.smooth = true;

cam.z = 100;

r.smooth = true;

//setting up materials and the cube var quality :Number = 24; // Materials var b = new BitmapAssetMaterial( "back" );

l.smooth = true;

stop(); startGameBtn.addEventListener(MouseE vent.MOUSE_DOWN, begin); function begin(evt:MouseEvent) { startGameBtn.removeEventListener(Mo useEvent.MOUSE_DOWN, begin); nextFrame(); }

var r = new BitmapAssetMaterial( "right" ); var l = new BitmapAssetMaterial( "left" ); var t = new BitmapAssetMaterial( "top" );

t.smooth = true; d.smooth = true;

Project B Relat ed links

R ese ac he d C od e b.oneSide = true;

back: b,

f.oneSide = true;

right: r,

r.oneSide = true;

left: l,

l.oneSide = true;

top: t,

t.oneSide = true;

bottom: d

d.oneSide = true; // creating materials list with afore-created materials var materials:MaterialsList = new MaterialsList( { front: f,

} ); // Create the cube. cube = new Cube( materials, 5000, 5000, 5000, quality, quality, quality); scene.addChild( cube, "Cube" );

Project B Equirectangular Projection

Project B Equirectangular Projection


Project B


Project B


Project B


Project B

Final The response I got from my friends and peers was expected since most of the coding wasn’t done just yet. One of the biggest problems was getting the audio to sync and I had the bottom movie playing in reverse. These things are expected I guess, and really wasn’t as bad as it could have been seeing as I was headed into new territory. I really couldn’t have got this done with out the help of my friend Brandon Brown ( who helped with coding) and papervision tutorials. In the end I am pleased and I achieved my goal of having something cool on my website.

Project B


Project B


Project B

final project b  

the final pdf for this class