Director 8.5: Learning 3D Basics

May 31, 2001
by Gary Rosenzweig

Everyone got Director 8.5? No? What are you waiting for! Director 8.5 has the most significant addition to Director ever: 3D cast members. And I'm not talking about slow VRML or less-than-cool QuickTime panoramas, either. I'm talking about game-quality 3D. The engineers at both Macromedia and Intel have worked hard to make this impossible feature come true, so let's start using it.

This is the first of a four-part series where I will talk about using primitives. Primitives are 3D objects that you can create in Lingo. Without primitives, we'd all have to create our 3D graphics in an expensive 3D modeling program like 3D Studio Max. These programs are nice if you have the thousands of dollars to dish out, but primitives allow us to start using 3D with no extra investment.

This animated image shows the end result of the 3D project in this article.

In this first example, we'll stick to something easy, something that could not have been done using quads in earlier versions of Director: we'll create a spinning sphere. In the next three columns, we'll create other types of primitives, get those primitives moving, and learn about cameras.

The first thing you need to do is create a 3D cast member. The easiest way is to choose Insert, Media Element, Shockwave 3D. You'll see the new member appear in the cast. Name it "Scene".

This cast member is a little 3D world. Let's create a behavior that will be placed in the frame script. The first thing that this behavior will do is to place a reference to the member in the property pScene. This will make it easy to get to. 3D Lingo often contains really long references to the property of a property of a property of a model of a member. It helps to store references in variables like pScene to make the Lingo lines a bit shorter (and faster).

The next thing you will want to do when creating any 3D scene from scratch is to reset the world using the resetWorld command. This makes it easier for you to author your scene, as you know that each time your run the program it will start from scratch.

Here is the behavior so far. It declares the property pScene, as well as pSphere, which will be a reference to the sphere model that comes later in the handler.

property pScene, pSphere

on beginSprite me
-- get the member
pScene = sprite (me.spriteNum).member

-- reset the world before starting
pScene.resetWorld ()

Before we create the sphere, let's create a backdrop of stars to go behind it. A backdrop is a special property of a 3D member. It is a static image that appears behind all of the models. This will replace the default color of the 3D member. A backdrop is very useful in cases like this where you want to have a planet spinning in space. The backdrop of stars makes it look more convincing.

The image is actually a bitmap member in the cast. The backdrop is created in two steps. First, a new texture is created called "backdrop". The 3D member stores things like textures so that they can be used by one or more models. We need to store this texture first, before applying it as the backdrop.

The next step is to use the insertBackdrop command to place it in the scene. Backdrops are properties of the camera. A camera is the viewpoint through which the scene is viewed. Every 3D member has a default camera, camera 1, which is what we will use here. We will get to more information about cameras in a few weeks.

  -- create backdrop of stars
  pScene.newtexture ("backdrop", #fromCastMember, member ("stars"))
  pScene.camera (1).insertBackdrop (1, pScene.texture ("backdrop"),point (0, 0), 0)

Now we can get to the business of creating a sphere. The first step in creating any model is to create a model resource. This is like a blueprint. Once you have a model resource, you can create one or more models from it. In this case, we want to create a model resource of the type sphere. It will be named "SphereResource" and we will assign the variable sphereResource to it so that we can reference it easily. The name of the resource is one way to refer to it later. However, since we have assigned it to the variable sphereResource, we can use that variable instead.

-- create a sphere resource
sphereResource = pScene.newModelResource ("SphereResource", #sphere)

A model resource has different properties depending on the type of resource it is. A sphere has the radius property. We will set this sphere resource to have a radius of 50.

sphereResource.radius = 50

Next, we will create the actual model. This will place the model on the scene at the exact center of the scene. We'll assign the name "Sphere" to the model, but the variable pSphere will be an even easier way for us to refer to the model in the future.

-- create the model
pSphere = pScene.newModel ("Sphere", sphereResource)

Next, let's assign a texture to the sphere. Otherwise, the sphere will simply appear as a red and white checkerboard texture, which is the default. To assign a texture to a model is a pretty complex procedure. First, you need to create a new texture just like we did with the backdrop. Each texture you create must have a different name. We'll just name this one "texture". We'll get the image from the member "texture".

-- assign a texture to the sphere
pScene.newtexture ("texture",#fromCastMember, member ("texture"))

You can't just assign a texture to a model. Instead, you must create what is called a shader. A shader defines what the side, or face, of a model shows. We'll create a standard shader called "shader". Then, we'll assign the texture to the shader.

pScene.newshader ("shader", #standard)
pScene.shader ("shader").texture = pScene.texture ("texture")

To apply this shader to the model, we'll set the first element of the model's shaderList to the shader we just created. Spheres only have one shader covering the whole surface of the sphere. The result is that the texture is stretched over the entire sphere.

pSphere.shaderList[1] = pScene.shader ("shader")
end

The texture we used was a complete surface image of the planet Mars. It is seamless, meaning that the right edge and left edge match perfectly. If not, we would see the line dividing the right and left edges of the texture in the sphere. As a final touch, lets make the sphere rotate. The exitFrame handler for the behavior will simply reference the pSphere property and use the rotate command to rotate it 1 degree per frame around the y-axis.

on exitFrame me
-- rotate 1 degree per frame
pSphere.rotate (0, 1, 0)
end

Here is the finished movie. You'll need Shockwave 8.5 to see it in your browser. Next week we'll look at some other types of primitives.

A sample Director 8.5 movie is available for download in Mac or Windows format.

Gary Rosenzweig is the author of six books on Macromedia Director and Flash, including his latest, Flash 5 ActionScript for Fun & Games (http://garyrosenzweig.com/books/book6.html). He also publishes an email newsletter for Flash and Director developers called the Developer Dispatch. You can subscribe to this newsletter at http://developerdispatch.com.

Gary Rosenzweig is the Chief Engineer, founder, and owner of CleverMedia, a game and multimedia development company in Denver, Colorado. He is the author of ten books on Macromedia Director and Flash, including his latest, Special Edition Using Director MX.