North Face Demo Using Papervision3D!
After reading Mike Downey’s post yesterday and checking out the 3D video carousel, I decided that this would be a good example to create to help me learn Papervision3D. The API couldn’t be easier to use and if you use the AS3 version it is lightening fast! Click on the image below to see the example. I embedded the FLV files so that there wouldn’t be buffering issues. It’s around 6 megs so just give it a chance to load. I’m so excited about Papervision3D! The AS3 is also shown below. Flash 9 player required!
[as]import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
var sp:Sprite = new Sprite();
this.addChild(sp);
sp.x = 320;
sp.y = 200;
var radius:int = 800;
var s:Scene3D = new Scene3D(sp);
var cam:Camera3D = new Camera3D();
cam.z = -150;
var center:Plane = new Plane();
s.addChild(center);
center.visible = false;
var bmd:BitmapData = new BitmapData(320, 240);
var bmd2:BitmapData = new BitmapData(320, 240);
var bmd3:BitmapData = new BitmapData(320, 240);
var bmd4:BitmapData = new BitmapData(320, 240);
var mat1:BitmapMaterial = new BitmapMaterial(bmd);
mat1.oneSide = false;
var plane1:Plane = new Plane(mat1,320, 240, 5, 5);
plane1.x = Math.cos(Math.PI*2) * radius;
plane1.z = Math.sin(Math.PI*2) * radius;
plane1.rotationY = 270;
var mat2:BitmapMaterial = new BitmapMaterial(bmd2);
mat2.oneSide = false;
var plane2:Plane = new Plane(mat2,320, 240);
plane2.x = Math.cos(Math.PI/2) * radius;
plane2.z = Math.sin(Math.PI/2) * radius;
plane2.rotationY = 180;
var mat3:BitmapMaterial = new BitmapMaterial(bmd3);
mat3.oneSide = false;
var plane3:Plane = new Plane(mat3,320, 240);
plane3.x = Math.cos(Math.PI) * radius;
plane3.z = Math.sin(Math.PI) * radius;
plane3.rotationY = 90;
var mat4:BitmapMaterial = new BitmapMaterial(bmd4);
mat4.oneSide = false;
var plane4:Plane = new Plane(mat4,320, 240);
plane4.x = Math.cos(Math.PI*1.5) * radius;
plane4.z = Math.sin(Math.PI*1.5) * radius;
plane4.rotationY = 0;
s.addChild(plane1);
s.addChild(plane2);
s.addChild(plane3);
s.addChild(plane4);
this.addEventListener(Event.ENTER_FRAME, render);
var angle:Number = 0;
function render(e:Event)
{
angle += (this.mouseX – 320) * 0.001;
cam.x = Math.cos(angle) * 900;
cam.z = Math.sin(angle) * 900;
cam.target = center;
bmd.draw(vid1.v);
bmd2.draw(vid2.v);
bmd3.draw(vid3.v);
bmd4.draw(vid4.v);
mat1.updateBitmap();
mat2.updateBitmap();
mat3.updateBitmap();
mat4.updateBitmap();
s.renderCamera(cam);
}
vid1.visible = false;
vid2.visible = false;
vid3.visible = false;
vid4.visible = false;[/as]
Lee
Wow, amazingly silky smooth, even on my G4 Powerbook.
[...] Original post by lee and software by Elliott Back [...]
another awesome flash app
but of course just as amazing and wonderfully inventive and cool!
1. Frickin awesome
2. You’re the man dude
3. How can I be down? (Seriously I totally look up to you now)
4. Submit this to PaperVision
5. I’m totally amazed at how fast it is.
this is serious
[...] North Face Demo Using Papervision3D!. [...]
Maybe you can make a video-tut on GTAL?
Really nice. Some Papervision tutorials on GTAL would be great.
When do we get to play with Papervision3D?
I can’t find a download anywhere, on their site it says there are in private beta, but I see a lot of blogs posting things made with Papervision3D…
Maybe I should start a blog.. (nay, don’t have the time for that kind of thing..)
yeah where i can download the classes?
If you are using Subversion, you can get it at http://svn1.cvsdude.com/osflash/papervision3d/.
Wow … we’re gonna need a tutorial on this Lee !
[...] North Face Demo Using Papervision3D! (Lee Brimelow). [...]
Amazing, as always Lee. You could even set the rotation speed a bit slower, cause its almost too responsive on my MacBook
North Face demo done with Flash, Papervision3D…
This Papervision3D stuff is just too cool. After reading my post from last week, Lee Brimelow of Frog Design decided to build a version of the North Face Kiosk Demo (originally done in WPF) in Flash Player 9 using Papervision3D…….
[...] [...]
Wow, this is faster then the ordenary carousel, I guess AS3.0 is much better then 2.0 one…
good job again Lee, you always find the way to amaze us 
how do you install papervision3D?
Will this library work on flash 8. Where can I get it? How much does it cost. Awsome!
I can’t wait to use papervision, but certainly not for a carrousel. I have done a lot, and a lot of other “3d” code, using Kirupa 3d world.
http://www.kirupa.com/developer/actionscript/3dindex.htm
The sandy framework also allow some cool stuff in 3d for Flash 8. Perpervision really good demos are the rhino with reflection, star wars, QTVR look alike and playing cards in the wild. Theses are superb, innovative stuff.
Wow! Really inspiring stuff, lee! I’m in agreement with the others here, we need some papervision tuts up on GTAL! ;D
Really cool! I build a similar example and I ask me why you use mat1.updateBitmap()? It is necessary or can we only use the draw-command to update the video-texture?
Thanks in advance for your response!
Best
Jens
[...] http://theflashblog.com/?p=253 [...]
It’s always nice to look at your stuff… you inspired me to try papervision too… so where is the video tutorial
[...] Original post by lee [...]
[...] A look at Paper-Vision 3D http://www.papervision3d.org/ Cutting Edge Flash 3D - http://www.unitzeroone.com/papervision/paperPlanet/Main.html | Northface Demo http://theflashblog.com/?p=253 | http://leebrimelow.com/loader.html [...]
[...] Have a look at this demo – of the re-kiosk’ed North Face demo. [...]
Good trick! that is not truly 3D. It seems like Doom. But it is a good trick.
[...] The beta of Papervision3D was released a couple of days ago, and it appears to be quite the 3D engine for Flash. In the past I have seen demos of fully 3D games built in Flash using Papervision3D. This game was even altered to use a Nintendo Wii controller as an input device, so you could fly the X-Wing around with the flick of a wrist. There was a fairly impressive example of four rotating panes that played flv’s on them for Northface that was done a number of months ago. [...]
[...] Voici mon premier essai d’utilisation de l’incroyable API Papervision 3D pour Actionscript 2 et 3. Je me suis basé sur le script de Lee Brimelow et la doc fournie avec Papervision 3D pour réaliser un petit caroussel de vidéos en 3D. Un p’tit clin d’oeil aux surfers et bodyboarders brestois au travers de l’extrait de cette terrible vidéo d’un spot local réalisée par Ronan Gladu. [...]
Hello,
I try to do the same work and I want to known if it’s possible to have the full code please ????
Thanks …
[...] This is a rework of the carrousel that Lee did over at flashblog. I’ve added the extra blur effect and a little revamp of the calculations for the plane rotation. [...]
hi
thats very creative.you are always mindblowing and outstanding LEE,but can i have the same effect in flash8.So can u give a tutorials on all of your papervision3D using Flash8.Its a request to from all of us
I’ve done the Carousel with Lee’s instructions and updated it to CS3 ActionScript3, but this Carousel is really great.
The videos on the Carousel look great plus having the videos themselves turn and showing the back side of the video is an awesome technique.
What’s the chances of getting the FLA and ActionScript for it?
Great Job!
-Alex
How do you setup the video within Flash. Please explain this reference to the video file — bmd.draw(vid1.v);.
Any assistance would be appreciated.
Thank you!
I tryed to update your Carousel for the Great White 2.0 release, but it seems that something is wrong with the angle stuff. Can you remake this great Tutorial if possible? Would be really great.
- Mike
is it just me or is there no link to view the demo