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

The new updated version can be found here:
example018_v3.1.1.zip

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()
      { 
		 // We create the camera
		 camera = new Camera3D( 300, 300 );
		 camera.x = 100;
		 camera.y = 100;
		 camera.z = -300;
		 camera.lookAt(0,0,0);
		 
		 // text position
		 myText.width = 100;
		 myText.x = 20;
	     myText.y = 20;
		 
		 // We create the "group" that is the tree of all the visible objects
         var root:Group = createScene();
		 
		 // We create a Scene and we add the camera and the objects tree 
	     scene = new Scene3D( "scene", this, camera, root );
		 
		 // Listen to the heart beat and render the scene
		 addEventListener( Event.ENTER_FRAME, enterFrameHandler );
      }

      // Create the scene graph based on the root Group of the scene
      private function createScene():Group
      {
         // Create the root Group
         var g:Group = new Group();
		 
         // we now create the two new objects
		 myBox = new Box("theBox", 100, 100, 100, PrimitiveMode.TRI, 2 );
		 
		 // we define a new material
		 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 );
	 
		 // we now add all the object to the root group:
		 g.addChild(myBox);
		  
		 return g;
      }

      // The Event.ENTER_FRAME event handler tells the world to render
      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!