Away3D - 粒子移动动画(在一个路径轨迹上循环运动)
作者:hangge | 2015-11-26 09:08
最近在做一个电源系统的三维拓扑图,使用LineSegment来绘制设备间的连接线缆。为了让画面更生动些,需要在线路上添加粒子移动效果,来模拟电流的流动。
![](http://hangge.com/blog_uploads/201511/2015111814551366924.png)
![](http://hangge.com/blog_uploads/201511/2015111814552322907.png)
2,使用透明图片来实现
直接使用实色方块可能会觉得有些生硬,那么可以使用半透明的放射发光图片来做粒子,素材图如下:![](http://hangge.com/blog_uploads/201511/2015111909400315997.png)
![](http://hangge.com/blog_uploads/201511/2015111909435135463.png)
1,使用小方块来实现
每隔一定的时间创建一个小方块,其移动轨迹就是在线路上进行循环移动。即从起点开始移动到下一个拐点,再移动到下一个拐点,再移动到下一个拐点....如果移到路径尾部的时候就恢复到开始位置。
效果图如下:
![](http://hangge.com/blog_uploads/201511/2015111814551366924.png)
![](http://hangge.com/blog_uploads/201511/2015111814552322907.png)
--- 方块类 PowerParticles.as ---
package { import flash.events.Event; import flash.geom.Vector3D; import away3d.containers.View3D; import away3d.entities.Mesh; import away3d.materials.ColorMaterial; import away3d.primitives.CubeGeometry; public class PowerParticles { private var _view3D:View3D; private var _points:Array; private var cube1:Mesh; //每次移动的步长 private var step:Number = 5; private var nextIndex:int = 1; public function PowerParticles() { } public function init(view3D:View3D, points:Array):void{ this._view3D = view3D; this._points = points; var material:ColorMaterial = new ColorMaterial(0xFFD800); // 在三维舞台中创建一个方块 cube1 = new Mesh(new CubeGeometry(5, 5, 5), material); cube1.position = points[0]; _view3D.scene.addChild(cube1); _view3D.addEventListener(Event.ENTER_FRAME, _onEnterFrame); } private function _onEnterFrame(e:Event):void { var nextPoint:Vector3D = _points[nextIndex]; var spanX:Number = nextPoint.x - cube1.x; var spanY:Number = nextPoint.y - cube1.y; var spanZ:Number = nextPoint.z - cube1.z; if(Math.abs(spanX)>=step){ cube1.x += (spanX>0?1:-1)*step; } if(Math.abs(spanY)>=step){ cube1.y += (spanY>0?1:-1)*step; } if(Math.abs(spanZ)>=step){ cube1.z += (spanZ>0?1:-1)*step; } if(Math.abs(spanX)<step&&Math.abs(spanY)<step&&Math.abs(spanZ)<step){ nextIndex++; if(nextIndex>=_points.length){ nextIndex = 1; cube1.position = _points[0]; } } } } }
--- 主类 Main.as ---
package{ import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Vector3D; import flash.utils.setTimeout; import away3d.containers.View3D; import away3d.controllers.HoverController; import away3d.entities.Mesh; import away3d.entities.SegmentSet; import away3d.materials.TextureMaterial; import away3d.primitives.LineSegment; import away3d.primitives.PlaneGeometry; import away3d.utils.Cast; [SWF(frameRate="60", backgroundColor="#FFFFFF")] public class Main extends Sprite { private var _view3D:View3D; private var cameraController:HoverController;//360全景展示相机控制器 [Embed(source="assets/floor_diffuse.jpg")] public static var FloorDiffuse:Class; //材质 private var planeMaterial:TextureMaterial; //管道拐点 private var linePoints:Array = [new Vector3D(450,40,200), new Vector3D(0,40,200), new Vector3D(0,240,200), new Vector3D(0,240,50), new Vector3D(-450,240,50)] private var _lastX:Number = 0; private var _lastY:Number = 0; public function Main() { initEngine(); initMaterials(); initObjects(); initListeners(); } /** * 初始化引擎 */ private function initEngine():void { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // 创建一个视口 _view3D = new View3D(); _view3D.antiAlias = 4; //设置抗锯齿级别 //初始化摄像头 cameraController = new HoverController(_view3D.camera); /*cameraController.distance = 1000; cameraController.minTiltAngle = 0; cameraController.maxTiltAngle = 90; cameraController.panAngle = 45;*/ cameraController.tiltAngle = 30; addChild(_view3D); } /** * 初始化材质 */ private function initMaterials():void { //地面材质 planeMaterial = new TextureMaterial(Cast.bitmapTexture(FloorDiffuse)); planeMaterial.repeat = true; } /** * 初始化物体 */ private function initObjects():void { //地面 var plane:Mesh = new Mesh(new PlaneGeometry(900, 600), planeMaterial); plane.geometry.scaleUV(3, 2); (plane.geometry as PlaneGeometry).doubleSided = true; //双面 贴图 _view3D.scene.addChild(plane); //绘制管道 createLine(linePoints); //添加粒子 setTimeout(addSmallParticle,1000); setTimeout(addSmallParticle,2000); setTimeout(addSmallParticle,3000); setTimeout(addSmallParticle,4000); } private function createLine(points:Array,color:uint=0x00BC19):SegmentSet{ var linesContainer:SegmentSet = new SegmentSet(); for(var i:int = 1;i<points.length;i++){ var line:LineSegment = new LineSegment(points[i-1],points[i],color,color); linesContainer.addSegment(line); } _view3D.scene.addChild(linesContainer); return linesContainer; } private function addSmallParticle():void{ var p:PowerParticles = new PowerParticles(); p.init(_view3D, linePoints); } /** * 初始化监听 */ private function initListeners():void { addEventListener(Event.ENTER_FRAME, _onEnterFrame); //鼠标事件监听 stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); stage.addEventListener(MouseEvent.MOUSE_WHEEL,onWheel); stage.addEventListener(Event.RESIZE, onResize); onResize(); } /** * 渲染视图 */ private function _onEnterFrame(e:Event):void { //渲染视图 _view3D.render(); } /** * 使用舞台大小一直全屏 */ private function onResize(event:Event = null):void { _view3D.width = stage.stageWidth; _view3D.height = stage.stageHeight; } /** * 鼠标滚轮事件 */ private function onWheel(e:MouseEvent):void { if(e.delta > 0){ if(cameraController.distance < 1000) cameraController.distance += 100; }else{ if(cameraController.distance > 600) cameraController.distance -= 100; } } /** * 鼠标按下事件 */ private function onMouseDown(event:MouseEvent):void { _view3D.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); _lastX = _view3D.mouseX; _lastY = _view3D.mouseY; } /** * 鼠标弹起事件 */ private function onMouseUp(event:MouseEvent):void { _view3D.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); } /** * 鼠标移动事件 */ private function mouseMoveHandler(event:MouseEvent):void { //移动摄像机 var dx:Number = _view3D.mouseX - _lastX; var dy:Number = _view3D.mouseY - _lastY; cameraController.panAngle += dx; cameraController.tiltAngle += dy; _lastX = _view3D.mouseX; _lastY = _view3D.mouseY; } } }
2,使用透明图片来实现
直接使用实色方块可能会觉得有些生硬,那么可以使用半透明的放射发光图片来做粒子,素材图如下:
![](http://hangge.com/blog_uploads/201511/2015111909400315997.png)
这时就要使用 Sprite3D 来制作粒子。Sprite3D 是一个始终正对着摄像机镜头的平面对象,其保证不管摄像头如何旋转,始终面向着用户。
效果图如下:
![](http://hangge.com/blog_uploads/201511/2015111909435135463.png)
代码如下 PowerParticles2.as :
package { import flash.display.BlendMode; import flash.events.Event; import flash.geom.Vector3D; import away3d.containers.View3D; import away3d.entities.Sprite3D; import away3d.materials.TextureMaterial; import away3d.utils.Cast; public class PowerParticles2 { private var _view3D:View3D; private var _points:Array; [Embed(source="./assets/blue.png")] private var ParticleImg:Class; private var _particleMesh:Sprite3D; //每次移动的步长 private var step:Number = 5; private var nextIndex:int = 1; public function PowerParticles2() { } public function init(view3D:View3D, points:Array):void{ this._view3D = view3D; this._points = points; var material:TextureMaterial = new TextureMaterial(Cast.bitmapTexture(ParticleImg)); material.blendMode = BlendMode.ADD; // 在三维舞台中创建一个粒子 _particleMesh = new Sprite3D(material,25,25); _particleMesh.position = points[0]; _view3D.scene.addChild(_particleMesh); _view3D.addEventListener(Event.ENTER_FRAME, _onEnterFrame); } private function _onEnterFrame(e:Event):void { var nextPoint:Vector3D = _points[nextIndex]; var spanX:Number = nextPoint.x - _particleMesh.x; var spanY:Number = nextPoint.y - _particleMesh.y; var spanZ:Number = nextPoint.z - _particleMesh.z; if(Math.abs(spanX)>=step){ _particleMesh.x += (spanX>0?1:-1)*step; } if(Math.abs(spanY)>=step){ _particleMesh.y += (spanY>0?1:-1)*step; } if(Math.abs(spanZ)>=step){ _particleMesh.z += (spanZ>0?1:-1)*step; } if(Math.abs(spanX)<step&&Math.abs(spanY)<step&&Math.abs(spanZ)<step){ nextIndex++; if(nextIndex>=_points.length){ nextIndex = 1; _particleMesh.position = _points[0]; } } } } }
全部评论(0)