This is the second tutorial that deals with the possibility to apply materials on Shape3D objects. If you are interested in Color Material you can learn it by reading the previous tutorial of this series. In this tutorial we will learn how to apply Bitmap Material on your 3D models.

This tutorial is specifically written for CS3 users, so you will learn how to lead external images with CS3. If you want to apply and use the same Sandy functionality for another AS tools (Flex), you need to use the [Embed(source=”..”)] which is still not supported by CS3.

In order to load an external file we have more than one option in AS. You can load the file or you can point to the resource you have imported in your library. We will use this second option in this tutorial. To load a simple image you just need to choose Import→Import to Library… as shown in the pic marked 1. This action will load the image on your local library as shown in the pic marked 2.

Now you need to link the image to a class (this is quite different from previous version of Flash 8). I recommend writing a custom class before make the link. I have built the simplest calss you can write to load an image and named MyPalm.as

package
{
	import flash.display.BitmapData;
 
	public class MyPalm extends BitmapData
	{
		public function MyPalm()
		{
			super(0,0);
		}
	}
}

The only important thing is that the class extends BitmapData. With this class build now you need to right click on the image on the library and choose linkage… A pop up will show up and you need to fill it as it is show here.

Now you are ready to start the tutorial !

The Document class must be changed to Example009.as The name of the class in the .as file and the name of the constructor now is: Example009. We also need to have a new class that will allow to load the *.jpg file, so we added this class in this archive

example009_v02.rar

package {
  import flash.display.Bitmap;
  import flash.display.Sprite;
  import flash.display.BitmapData;
 
  import flash.events.*;
  import flash.ui.*;
  import sandy.core.Scene3D;
  import sandy.core.data.*;
  import sandy.core.scenegraph.*;
  import sandy.materials.*;
  import sandy.materials.attributes.*;
  import sandy.primitive.*;
 
  public class Example009 extends Sprite {
    private var scene:Scene3D;
    private var camera:Camera3D;
    private var box:Box;
    private var sphere:Sphere;
    private var app01:Appearance;
    private var app02:Appearance;
 
    private var img:MyPalm=new MyPalm();
    private var bitmap:Bitmap=new Bitmap(img);
 
    public function Example009() {
      camera = new Camera3D( 300, 300 );
      camera.z = -400;
 
      var root:Group = createScene();
 
      scene = new Scene3D( "scene", this, camera, root );
 
      addEventListener( Event.ENTER_FRAME, enterFrameHandler );
      stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);      
    }
 
    private function createScene():Group {
      var g:Group = new Group();
 
      box = new Box( "box",80,80,80,"tri");
 
      box.rotateX = 30;
      box.rotateY = 30;
      box.x = -80;
 
      sphere = new Sphere("sphere", 50,10,10);
      sphere.x = 80;
 
      var materialAttr01:MaterialAttributes = new MaterialAttributes( 
                                                      new LightAttributes( true, 0.1)
                                                );
      var material01:Material = new ColorMaterial( 0xFFCC33, 1, materialAttr01 );
      material01.lightingEnable = true;
      app01 = new Appearance( material01 );
 
      var material02:BitmapMaterial = new BitmapMaterial( bitmap.bitmapData );
      material02.lightingEnable = true;
      app02 = new Appearance( material02 );
 
      box.appearance = app02;
      sphere.appearance = app02;
 
      g.addChild( box );
      g.addChild( sphere );
 
      return g;
    }
 
    private function enterFrameHandler( event : Event ) : void {
      box.tilt += 1;
      box.pan += 1;
      sphere.pan += 1
      scene.render();
    }
 
    private function keyPressed(event:KeyboardEvent):void {
      switch(event.keyCode) {
          case Keyboard.UP:
          box.aPolygons[0].appearance = app02;
          box.aPolygons[1].appearance = app02;
          box.aPolygons[2].appearance = app02;
          box.aPolygons[3].appearance = app02;
          break;
        case Keyboard.DOWN:
          box.appearance = app01;
          break;
        case Keyboard.RIGHT:
          box.aPolygons[4].appearance = app02;
          box.aPolygons[5].appearance = app02;
          box.aPolygons[6].appearance = app02;
          box.aPolygons[7].appearance = app02;
          break;
        case Keyboard.LEFT:
          box.aPolygons[8].appearance = app02;
          box.aPolygons[9].appearance = app02;
          box.aPolygons[10].appearance = app02;
          box.aPolygons[11].appearance = app02;
          break;
      }
    }
  }
}

• First of all we are importing some new stuff, finally!

import flash.display.Bitmap;
import flash.display.Sprite;
import flash.display.BitmapData;

This will allow us to work with Bitmap!

• Now here comes the first important thing about this tutorial: loading the image from the library. Do you remember that we have linked to a class named MyPalm.as ? Well here is the code to load the image:

private var img:MyPalm=new MyPalm();
private var bitmap:Bitmap=new Bitmap(img);

We have instantiated the BitmapData first (the MyPalm class), and then we have instantiate the class Bitmap that we need to use in our Material Class.

• Now the rest is pretty easy:

var material02:BitmapMaterial = new BitmapMaterial( bitmap.bitmapData );
material02.lightingEnable = true;
app02 = new Appearance( material02 );

In this example we have only set up the first parameter of the BitmapMaterial class, but if needed we can provide a second argument that can be any Attributes we have learned in the previous tutorial.

• Well all the “hard” stuff is done. To make it more fun I have added in the keyPressed(..) function the possibility to change on the fly the appearance of the sides of the cube, as we did in the previous tutorial, but this time using the BitmapMaterial apprearance.

One last important comment.
With this tutorial you have learn how to place simple image on a 3D model, but what if you have a complex model and need to place a comples image on it (say a dog, a cat or a car). Well in this case you will probably have exported the model from a 3D software, say 3DS MAX, and you have exported also the skin of the object. Just use it as it is, it should work! There is a good posted topic in the forum that deals with this issue.

And now let’s see the result !

Double click on the cube and move the arrow keys to change to appearance of the left cube. You will see that the image will be placed face by face.