Full Menu:

Blog Summary

  1. Flash XML loops and accessing data Joel Reinke 13-Mar-2013
  2. The Latest: Apps & PHP customization Joel Reinke 20-Jun-2012
  3. Photoshop Tree Tutorial Joel Reinke 07-Nov-2011
  4. Developer Resource - Papervision3D joel reinke 27-Sep-2011
  5. Photoshop Landscape Painting Expanded Joel Reinke 09-Sep-2011

Web Design Mountain : developers : Papervision3D Flash - Mixing 3D and 2D

Mix 2D and 3D in Papervision3D

Here is an important bit of info on how to mix or stack the 3D Scene from Papervision3D with some flat 2D Display Objects.  Here is an example of when you'd want to do that: You create a 2D Background that you want to have displayed behind the 3D objects that go in front of it.

This seems obvious but the answer is buried in the BasicView setup (if you use this) that's a template for most general Papervision3D Projects.  You may think that using addChild on the 2D Display object before adding objects to the 3D scene will stack that at the bottom of the "DisplayObject Arrangement", but it wont because the Papervision BasicView template gets run first and the Viewport it creates is layered first.  So all you have to do is:


...in the appropriate stacking order in your code to put the 2D on bottom and stack the 3D on top.

Here's a full actionscript code version of a sample program that outlines everything you need to do (and a refresher on how to load in 2D objects):

package {
 import flash.events.Event;
 import org.papervision3d.cameras.CameraType;
 import org.papervision3d.events.FileLoadEvent;
 import org.papervision3d.materials.BitmapFileMaterial;
 import org.papervision3d.objects.primitives.CylinderPlus;//my better Cylinder
 import org.papervision3d.view.BasicView;
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.view.layer.ViewportLayer;
 import flash.net.*;
 import flash.display.Sprite;
 import flash.display.Loader;

 public class stack2D3D extends BasicView {

  private var logoFull:CylinderPlus;
  private var container:Sprite = new Sprite();

  public function stack2D3D() {
  private function init():void {

   var material3:BitmapFileMaterial = new BitmapFileMaterial("assets/logoSmallShaded.png");
   var white:BitmapFileMaterial = new BitmapFileMaterial("assets/white.png");
   var header:Loader = new Loader();
   var pictURLReq:URLRequest = new URLRequest("example2Dgraphic.jpg");
   header.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
   function imgLoaded(event:Event):void {
   material3.smooth = true;

   logoFull = new CylinderPlus(material3, white, 360, 20, 32, 1);

   logoFull.localRotationX = 90;

   addChild(viewport); // that's the money-code! you need to use this to restack
  private function loadComplete(e:FileLoadEvent):void {
  override protected function onRenderTick(e:Event=null):void {

   logoFull.localRotationZ += 1.2;

So aside from the main tip here, you also have a nice template for working with 3D mixed with 2D.  Plus, anything that doesn't need to be 3D to look right in your Flash App should be 2D to make it easier to process.  Now you could also try using the Particle system in Papervision3D, but if you don't need the functionality that comes with it, you can save on executable file size if you don't add that library to the list and use this method I've just talked about.

Happy Coding!