Introduction

In this tutorial you will learn how to create a floor plane, similar to that in the Basic View tutorial, that has a cube placed on it’s surface. The floor in this tutorial is interactive and reacts to mouse clicks by tweening (moving smoothly) the position of the cube to the location on the floor, you clicked.

Setting the scene

The scene you are creating contains a plane, the floor and a cube that looks a bit like a trinket box, with the camera looking slightly downwards on the whole scene. To begin with you create the View3D and set up the camera properties as follows, very much the same way as you did in the Setting Up Your Scene tutorial.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

//setup the view
_view = new View3D();
addChild(_view);

//setup the camera
_view.camera.z = -600;
_view.camera.y = 500;
_view.camera.lookAt(new Vector3D());

Now your scene is ready, you can now begin to add the objects. The cube is 100x100x100 in size and has 1x1x1 segments, which results in each face containing two triangles. The last parameter, tile6, of the CubeGeometry constructor determines how the subsequent texture parameter maps onto the cube. In this case, having it ‘false’ means the single bitmap is repeated on each side of the cube.

//setup the scene
_cube = new Mesh(new CubeGeometry(100, 100, 100, 1, 1, 1, false), new TextureMaterial(Cast.bitmapTexture(TrinketDiffuse)));
_cube.y = 50;
_view.scene.addChild(_cube);

Notice that the ‘y’ property of the cube is set to 50. This repositions the centre of the cube vertically 50 units (half it’s height) to give the impression the cube is lying on the floor. Next you can add the floor plane and is exactly the same as the Basic View Tutorial.

_plane = new Mesh(new PlaneGeometry(700, 700), new TextureMaterial(Cast.bitmapTexture(FloorDiffuse)));
_view.scene.addChild(_plane);

Make it interactive

Your scene is setup so it is time to make it interactive. To do this, you need to add a few extra properties to the floor object so that you can retrieve information from mouse clicks on the object. Firstly you need to defined which mouse picking system is to be used in this example and secondly, you need to enable the mouse picking for the object as by default it is disabled. This is due to performance overheads of the mathematics involved in trying to establish what and where the mouse interaction happens. The mouse picking system allows you to choose faster/less accurate or slower/more accurate depending on you requirements.

Finally you need to add an mouse event listener, to call a method when the mouse button is released, using the MouseEvent3D.MOUSE_UP event.

_plane = new Mesh(new PlaneGeometry(700, 700), new TextureMaterial(Cast.bitmapTexture(FloorDiffuse)));
_plane.pickingCollider = PickingColliderType.AS3_FIRST_ENCOUNTERED;
_plane.mouseEnabled = true;
_view.scene.addChild(_plane);

//add mouse listener
_plane.addEventListener(MouseEvent3D.MOUSE_UP, _onMouseUp);

For full information on the mouse picking system, please check the tutorial on Picking Tutorial.

Animate the cube - The tweener

Your objects are placed and the floor now reacts to mouse clicks but currently does very little else. Now you can add the remaining functionality to move the cube around based on those mouse clicks. When you receive the MouseEvent3D.MOUSE_UP event in your handler method, information about the 3d mouse interaction is stored in the event parameter, passed in.

In this example, you need to know the scene position where the floor mouse click took place so that the cube can be moved to this location. Fortunately, Away3D gives you that information from the MouseEvent passed in.

Given that you have the scene coordinates of the mouse click we want to smoothly move the cube object to that location. This is achieved by using a tweening library. The example uses the Tweener library available as part of the complete source here : http://code.google.com/p/tweener/.

Your cube will slide smoothly in a curve motion from it’s current location to the new location. The ‘y’ coordinate of the cube doesn’t change so you are only interested in tweening across the ‘x’ and ‘z’ axes. Before the curved based tweening will work, it needs to be initialised, which is achieved by calling the following method. This only needs to be done once, so it occurs in the examples constructor.

//initialize Tweener curve modifiers
CurveModifiers.init();

The MouseEvent.MOUSE_UP event handler method creates a new Tweener to move the cube. The _cube object is the first parameter and the second parameter is an object containing matching properties that hold the ‘to’ value of the equivalent _cube property. There are a number of special properties in the parameter objectthat affect the function of the tween, such as ‘time’ which alters the overall duration of the tween and ‘_bezier’ which defines the control point of the bezier curve path the object will follow.

/**
 * mesh listener for mouse up interaction
 */
private function _onMouseUp(ev:MouseEvent3D) : void
{
Tweener.addTween(_cube, { time:0.5, x:ev.scenePosition.x, z:ev.scenePosition.z, _bezier:{x:_cube.x, z:ev.scenePosition.z} });
}

The example also has an Event.ENTER_FRAME handler method and a stage based Event.RESIZE handler method. The ENTER_FRAME handler simply calls the _view.render() method to ensure the scene is re-rendered each frame, whilst the RESIZE handler method ensures the 3D scene will occupy the full window of the Flash Player if it gets resized.

When you click on the floor, you will see the cube slide in a curved path to the location of the mouse click.

Conclusion

In this tutorial you have seen, again, how to construct a simply scene with a number of objects. Also, you have seen an introduction to the mouse picking system allowing you to interact with your scene using the mouse and reacting to those actions by chaning properties of objects using a tweeing library, giving smooth transitions.