In this tutorial it will be presented how to use the Event architecture created in Sandy 3D.
This is the second of a series of tutorials related to user interaction. In the first one we saw how to use the container attribute of an object 3D, here we will see how to use the proper way to propagate events in Sandy world.

The AS class name must be Example018.as. Not much else is needed this time.

example018_a.rar

New updated version can be found below:

example18_v02.rar

In this section we report the AS code as a reference, and it will be explained in the next paragraph.

package {
  import flash.display.Sprite; 
  import flash.events.*;
  import flash.ui.*;
  import flash.text.*;
  import sandy.core.Scene3D;
  import sandy.core.data.*;
  import sandy.core.scenegraph.*;
  import sandy.materials.*;
  import sandy.materials.attributes.*;
  import sandy.primitive.*;
  import sandy.events.*;

  public class Example018 extends Sprite {
    private var scene:Scene3D;
    private var camera:Camera3D;
    private var myBox:Box;
    private var myText:TextField = new TextField();
    
    public function Example018() {
      camera = new Camera3D( 300, 300 );
      camera.x = 100;
      camera.y = 100;
      camera.z = -300;
      camera.lookAt(0,0,0);
      
      myText.width = 200;
      myText.x = 20;
      myText.y = 20;
      
      var root:Group = createScene();
      
      scene = new Scene3D( "scene", this, camera, root );
      
      addEventListener( Event.ENTER_FRAME, enterFrameHandler );
    }

    private function createScene():Group {
      var g:Group = new Group();
      
      myBox = new Box("theBox", 100, 100, 100, PrimitiveMode.TRI, 2 );
      
      var materialAttr:MaterialAttributes = new MaterialAttributes(
                              new LineAttributes( 0.5, 0x2111BB, 0.4 ),
                              new LightAttributes( true, 0.1)
                            );

      var material:Material = new ColorMaterial( 0xFFCC33, 1, materialAttr );
      material.lightingEnable = true;
      var app:Appearance = new Appearance( material );
      myBox.appearance = app;
      
      myBox.useSingleContainer = false;
      myBox.enableEvents = true;
      myBox.addEventListener( MouseEvent.CLICK, clickHandler );
      
      g.addChild(myBox);
      
      return g;
    }

    private function enterFrameHandler( event : Event ) : void {
      myBox.pan +=1;
      myBox.tilt -=1;
      scene.render();
    }

    private function clickHandler(myEvent:Shape3DEvent):void {
      myText.text = "Polygon id = " + (myEvent.polygon.id);
      this.addChild(myText);
    }

    private function outHandler(event:Event):void {
    }
  }
}

Let’s examine the code.

Assuming you are familiar with the previous tutorial, the important part of the code is this portion:

myBox.useSingleContainer = false;
myBox.enableEvents = true;
myBox.addEventListener( MouseEvent.CLICK, clickHandler );

In these few lines of code we have everything we need:

• We set useSingleContainer to false; otherwise, we will fall into the situation described in the previous tutorial
• We set enableEvents to true for events to work for Sandy elements
• We add a mouse event listener for the cube

Now, just as a simple example, we will write into a text field the “id” of the clicked polygon:

private function clickHandler(myEvent:Shape3DEvent):void {
   myText.text = "Polygon id = " + (myEvent.polygon.id);
   this.addChild(myText);
}

Nothing more simple than this.

Click on the Cube!