I've seen some really good Papervision 3D walkthroughs that deal with various material creation and interaction. I haven't, however, come across many that deal specifically with using .flv format files as your MovieMaterial. For some background, check out some of these links to view the walkthroughs and some background: Mad Vertices,
Adobe Flex Working With Video Livedocs.
Now, in all fairness, this tutorial is rather basic in that I actually have something entirely different in mind as the end result of the papervision 3d project. But while I'm taking a slight break, I wanted to throw together a quick tutorial on how to use .flv video files with pv3d. So we start in FlexBuilder creating a new project and setting up all the build paths to point to your papervision3d .swc or src folder:
Next some code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
applicationComplete="{appComplete()}" backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#CCCCCC, #FFFFFF]">
<mx:Script>
<![CDATA[
import org.papervision3d.materials.MovieAssetMaterial;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.core.proto.LightObject3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.view.Viewport3D;
private var view:Viewport3D;
private var camera:Camera3D;
private var scene:Scene3D;
private var render:BasicRenderEngine;
private var primitive:DisplayObject3D;
private var material:MaterialObject3D;
private var light:LightObject3D;
private var objWidth:Number = 640;
private var objHeight:Number = 480;
private var segW:Number = 1;
private var segH:Number = 1;
private var vid:Video;
private var ns:NetStream;
private var nc:NetConnection;
private function appComplete():void
{
view = new Viewport3D();
view.autoScaleToStage = true;
view.interactive = true;
// Add the viewport3D to the mxml panel
// In Flex, addChild can only be used to add display objects to the stage
wrapper.rawChildren.addChild(view);
camera = new Camera3D();
scene = new Scene3D();
scene.addChild(initObject());
render = new BasicRenderEngine();
// Event listeners
addEventListener(Event.ENTER_FRAME, onEnterFrame);
addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
}
private function initObject():DisplayObject3D
{
primitive = new Plane(createMaterial(), objWidth, objHeight, segW, segH);
return primitive;
}
private function createMaterial():MaterialObject3D
{
nc = new NetConnection();
nc.connect(null);
ns = new NetStream(nc);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asynchErrorHandler);
ns.play("video.flv");
vid = new Video();
vid.attachNetStream(ns);
vid.visible = false;
material = new MovieMaterial(vid, false, true);
material.doubleSided = true;
material.interactive = true;
return material;
}
private function createLight():LightObject3D
{
light = new PointLight3D();
return light;
}
private function onEnterFrame(event:Event):void
{
primitive.rotationY += 1;
render.renderScene(scene, camera, view);
}
private function pauseHandler(event:MouseEvent):void
{
ns.pause();
}
private function playHandler(event:MouseEvent):void
{
ns.resume();
}
private function stopHandler(event:MouseEvent):void
{
// Pause the stream and move the playhead back to
// the beginning of the stream.
ns.pause();
ns.seek(0);
}
private function togglePauseHandler(event:MouseEvent):void
{
ns.togglePause();
}
private function onMouseWheel(event:MouseEvent):void
{
camera.z += event.delta*3;
}
private function asynchErrorHandler(event:AsyncErrorEvent):void
{
// ignore
}
]]>
</mx:Script>
<mx:Canvas id="wrapper" width="100%" height="100%"/>
</mx:Application>
Most of the magic in this Papervision3D app occurs in the createMaterial() function. You might be wondering where the video.flv is coming from. Well, I took a cool parkour video from YouTube, processed it into an .flv format using the Adobe Media Encoder and copied the .flv into my local Flex directory. Let's look at the createMaterial() function a little closer:
private function createMaterial():MaterialObject3D
{
nc = new NetConnection();
nc.connect(null);
//We need a NetConnection and a NetStream in order to attach our Video object
ns = new NetStream(nc);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asynchErrorHandler);
ns.play("video.flv");
//Create the video object that is going to be used by the Papervision3D MovieMaterial
vid = new Video();
vid.attachNetStream(ns);
vid.visible = false;
//Ok, this is the magic line, but I noticed that you need to specify the two parameters along with the video object. The first parameter sets the transparency, the second sets its animation property to true. **Side note: I tried to avoid setting this property and was unable to get video to play (although the sound quality was great)
material = new MovieMaterial(vid, false, true);
material.doubleSided = true;
material.interactive = true;
return material;
}
And that's it. In this example, you get a nifty double-sided Papervision3D plane that rotates around its Y-axis while playing your favorite parkour video. You are not restricted to using a plane, in fact, almost any PV3D primitive makes for an interesting effect and allows you to using a packaged file OR a streaming server. You can view my project here or here with source.