Away 3D 之 交互和渐变----Interactivity and Tweening

在这个教程中，你将学会如何创建一个地板对象，本教程中的地板是可交互的并且能够移动小方块到鼠标的点击的地方。

1. 设置场景：

你正在创建的场景包含了一个平面，地板和一个看起来像一个饰品的方块，还有一个对着整个场景的相机。首先你应该创建一个View3D对象并且设置如下的相机属性。

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());

现在场景设置好了，你可以增加对象了，小方块的边长是100 并且有一个 1x1x1 的分段。这样在每个面看起来都包括两个三角形，CubeGeometry构造函数中的最后一个变量 tile6决定了随后的纹理参数如何映射到多维数据集。这个例子中，false 意味着一个图像将在小方块的每个面重复出现。

//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);

注意：小方块的Y属性被设置为50.这个立方体的中心复位垂直50单位(一半是高度),给人的印象立方体是躺在地板上。下一步，你要增加地板面，这个和之前的   基本视图教程 是一样的。

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

2. 使它能够交互

你的场景已经设置好了，现在是时候让他动起来了。首先你需要给地板对象增加一些额外的属性。以便当你用鼠标点击对象的时候能够抓取相应的信息。

第一步，你需要定义使用哪个鼠标动作（左键，右键等），

第二步，你需要启用鼠标动作对这个对象操作，默认是不可用的。这是为了减少系统开销。（自己想的）。鼠标采集系统允许你选择快/慢的精确度或者更慢/更快的精确度根据你自己的需要。

最后，你需要增加一个鼠标事件的监听器。当放开鼠标按钮的时候，调用一个方法。使用MouseEvent3D.MOUSE_UP事件。

_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);

想要了解全部的鼠标点击系统，请参考之前的教程（我自己还没翻译。。。。）

3. 给方块加上动画。----渐变

你的对象已经放上去了，地板现在也能响应鼠标点击了，但是目前却不能做别的。现在你可以增加剩余的功能----根据鼠标的点击来移动小方块。当监听程序接收到MouseEvent3D.MOUSE_UP的事件，关于3d鼠标的信息就被存储到了event 的变量中。

在这个样例中，你需要知道鼠标点击地板的坐标。然后才能移动小方块到这个地方。幸运的是，Away3D在鼠标事件中存储了这些信息，你只需要取出即可。

假定你已经有了鼠标点击的位置的坐标，现在我们想要慢慢的移动小方块到那个地方。这需要一个库文件。该例子使用了Tweener 这个类。

你的方块将通过一个曲线运动从当前的位置移动到新的位置。Y坐标并不需要改变，这次你只关心X 和 Z 坐标。你需要首先初始化你要使用的曲线对象。用下面的方法即可。这个只需要初始化一次即可。因此在类的构造函数中调用。

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

MouseEvent.MOUSE_UP 事件监听函数创建了一个新的Tweener对象来移动方块。方块对象是第一个变量，第二个变量是一个对象包含如下“To”位置的属性值。有许多特殊的属性能够影响tween 函数。例如：“Time”改变了整体的持续时间。“_bezier” 属性定义了 贝塞尔曲线 的控制点来控制对象移动的路线。

/**
 * 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} });
}

这个样例也包含一个Event.ENTER_FRAME 处理函数和一个响应Event.RESIZE函数的舞台对象。Event.ENTER_FRAME这个函数只是调用了一下 _view.render()方法来确保场景被重新描绘。同时，RESIZE处理函数确保3D场景占用全屏。

当你点击地板的时候，你将看到小方块通过贝塞尔曲线移动到你鼠标点击的那个位置。

总结：

在这个教程中。你在一次看到了如何构造一个简单的包含一定数量对象的场景。同时，你也了解了如何通过鼠标来实现和场景中对象的交互，以及实现对相对于鼠标事件的响应。