【Away3D初级教程】交互性和渐变

驰骋的风 3D打印店铺

    在这一集的Away3D初级教程中，您将学习如何创建一个地平面，它的表面上，有一个立方体，如下图的地板是互动的，通过鼠标点击来实现地板上多维数据集箱子的移动。

这是一个基本的3D交互案例，点击图片进行3D交互动画的效果预览。源代码在附件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());


现在你的场景是准备好了，你现在就可以开始添加的对象。立方体是100x100x100尺寸和具有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);


请注意，“ Ÿ '属性的多维数据集设置为50。这将重新定位立方体中心垂直50个单位（一半的高度）的立方体给人的印象是趴在地上。接下来，您可以添加地板平面的基本视图教程是完全一样的。

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

_view.scene.addChild(_plane);


它互动


你的场景设置，所以它是时间，使其具有互动。要做到这一点，你需要添加一些额外的属性，在地板上的对象，这样就可以从鼠标点击的对象中检索信息。首先，你需要定义鼠标拣货系统是用来在这个例子中，其次，您需要启用鼠标采摘的对象，因为默认情况下它被禁用。这是由于在试图建立什么和在哪里发生鼠标交互，涉及的数学的性能开销。鼠标拣货系统允许您选择快/慢/更准确不准确或根据你的要求。 最后，你需要添加一个鼠标事件侦听器，调用一个方法时，释放鼠标按钮，使用MouseEvent3D.MOUSE_UP事件。

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

_plane.pickingCollider = PickingColliderType.AS3_FIRST_ENCOUNTERED;

_plane.mouseEnabled = ***e;

_view.scene.addChild(_plane);



//add mouse listener

_plane.addEventListener(MouseEvent3D.MOUSE_UP, _onMouseUp);
鼠标上的拣货系统的完整信息，请检查采摘教程本教程。

动画的立方体 - 中间人


你的对象都放在地板反应鼠标的点击，但目前几乎没有什么。现在，您可以添加其余的功能将根据这些鼠标点击周围的立方体。当您收到MouseEvent3D.MOUSE_UP事件处理程序中的方法，的3D鼠标交互的信息存储在事件参数传入， 在这个例子中，你需要知道现场的地板上点击鼠标的位置发生了这样的多维数据集可以被移动到这个位置。幸运的是，Away3D里给你的信息从MouseEvent的传入。


由于现场我们要平稳地移动到该位置的多维数据集对象的鼠标点击的坐标。这是通过使用一个补间库。该示例使用中间人库提供完整的源代码的一部分：http://code.google.com/p/tweener/。 您的多维数据集将顺利地滑入曲线运动从它的当前位置到新的位置。不会改变，所以你只感兴趣补间跨越'x'和'Z'轴的“Y”坐标的多维数据集。基于弯曲的补间将工作之前，它需要被初始化，这是通过调用下面的方法来实现。这只需要做一次，它发生在实例构造函数。


//initialize Tweener curve modifiers

CurveModifiers.init();


MouseEvent.MOUSE_UP事件处理方法移动的多维数据集创建一个新的中间人。_cube对象是第一个参数，第二个参数是一个对象，它包含有'到'相当于_cube属性值的匹配性能。有一些特殊属性中的参数objectthat影响补间动画的功能，如“时间”改变整体之间和_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处理程序方法。ENTER_FRAME处理程序简单的调用的_view.render（）方法，以确保现场重新渲染每一帧，而的RESIZE处理程序的方法，确保了3D场景的Flash Player将占据整个窗口，如果它被调整大小。
当您单击在地板上，你会看到立方体滑动的鼠标点击的位置在弯曲的路径。

结论


在这一集的Away3D初级教程·交互性和渐变中，你所看到的，如何构建一个简单的场景与对象的数量。另外，你已经看到介绍鼠标配货系统，让您与你的场景中使用鼠标和反应的这些行动，由查宁属性的对象使用tweeing库，提供平滑的过渡。

驰骋的风 3D打印店铺

  【Away3D初级教程】总目