Papervision3D features a set of classes that allow for drawing vector graphics such as simple shapes and text. The method names that are used for drawing shapes are similar to those of the Flash drawing API such as lineTo() and curveTo(). Creating 3D text is also fairly simple because of a couple of easy-to-use classes.

In this two-part article by Jeff Winder and Paul Tondeur, we will discuss the following:

• Creating 3D vector text
• Creating font files for use in Papervision3D
• Drawing 3D vector shapes and lines
• Adding interactivity to 3D vector text and shapes

The main part of this article is dedicated to a library called VectorVision that was incorporated into Papervision3D. After discussing the classes of this library, we will take a look at the Lines3D class in the next part that also enables you to draw 3D lines. This class was already a part of Papervision3D before VectorVision was incorporated.

VectorVision: 3D vector text and drawing

VectorVision is a library written in ActionScript that allows you to render vector graphics in Papervision3D and add a 3D perspective to them. The project started as a separate library that you could download and use as an add-on. However, it was fully integrated in Papervision3D in June 2008.

Being able to use vector shapes and text theoretically means that you could draw any kind of vector graphic and give it a 3D perspective. This article will focus on the features that are implemented in Papervision3D:

• Creating 3D vector text
• Drawing 3D vector shapes such as lines, circles, and rectangles

Keep in mind that 3D letters can be seen as vector shapes too, just like lines, circles, and rectangles. The above distinction is made based on how VectorVision is implemented in Papervision3D. Some classes specifically deal with creating 3D text, whereas others enable you to create vector shapes.

Creating a template class for the 3D text examples

Because the 3D text examples we are about to see have a lot in common, we will use a template class that looks as follows:

package
{
 import flash.events.Event;
 import org.papervision3d.materials.special.Letter3DMaterial;
 import org.papervision3d.typography.Font3D;
 import org.papervision3d.typography.Text3D;
 import org.papervision3d.typography.fonts.HelveticaBold;
 import org.papervision3d.view.BasicView;
 public class Text3DTemplate extends BasicView
 {
 private var material:Letter3DMaterial;
 private var font3D:Font3D;
 private var text3D:Text3D;
 private var easeOut:Number = 0.6;
 private var reachX:Number = 0.5
 private var reachY:Number = 0.5
 private var reachZ:Number = 0.5;
 public function Text3DTemplate()
 {
 stage.frameRate = 40;
 init();
 startRendering();
 }
 private function init():void
 {
 //code to be added
 }
 override protected function onRenderTick(event:Event = null):void
 {
 var xDist:Number = mouseX - stage.stageWidth * 0.5;
 var yDist:Number = mouseY - stage.stageHeight * 0.5;
 camera.x += (xDist - camera.x * reachX) * easeOut;
 camera.y += (yDist - camera.y * reachY) * easeOut;
 camera.z += (-mouseY * 2 - camera.z ) * reachZ;
 super.onRenderTick();
 }
 }
}

We added some class properties that are used in the render method, where we added code to move the camera when the mouse moves. Also, we imported four classes and added three class properties that will enable us to create 3D text.

How to create and add 3D text

Let's see how we can create 3D vector text that looks crisp and clear. The general process of creating and displaying 3D text looks as follows:

1. Create material with Letter3DMaterial.
2. Create a Font3D instance.
3. Create a Text3D instance, passing the text, font, and material to it, and add it to the scene or to another do3D.

We will create an example that demonstrates several features of Text3D:

• Multiline
• Alignment
• Outlines

All the following code should be added inside the init() method. Before we instantiate the classes that we need in order to display 3D text, we assign a text string to a local variable.

var text:String = "Multiline 3D textnwith letter spacing,nline spacing,nand alignment ;-)";

Now, let's create a text material, font, and text. First we instantiate Letter3DMaterial, which resides in the org.papervision3d.materials.special package:

material = new Letter3DMaterial(0x000000);

The constructor of this class takes two optional parameters: