Seamlessly combining 2D and PV3D

We have often been asked to combine some Papervision 3D components or animations into a 2D site. Seamless integration of the two components is very simple once you set the 3D environment up correctly.

The simplest way is to confine your 3D space to the z-plane (z = 0), and to place the camera at a fixed position as below:

  1. var _cameraDistance:Number = 1000;
  2. camera = new Camera3D();
  3. camera.zoom = 2;
  4. camera.focus = _cameraDistance / camera.zoom;

Once you have this camera in place, anything you add to the z-plane should be to scale with your 2D content.

The last thing you have to take into account is the different coordinate systems in the 2D flash and the PV3D space. PV3D obviously is a 3D coordinate system with the zero point in the center and the positive axes being up and right. In contrast, the 2D coordinate system in flash is centered on the top left of the screen, having the positive axes down and right. This is a fairly easy transformation, requiring a mapping from the center of the stage to the center of the 3D space and then reversing the y axis. Just remember to take this into account when placing your clips in 3D.