Away3D - 粒子移动动画（在一个路径轨迹上循环运动）
作者：hangge | 2015-11-26 09:08
最近在做一个电源系统的三维拓扑图，使用LineSegment来绘制设备间的连接线缆。为了让画面更生动些，需要在线路上添加粒子移动效果，来模拟电流的流动。
2，使用透明图片来实现
直接使用实色方块可能会觉得有些生硬，那么可以使用半透明的放射发光图片来做粒子，素材图如下：
1，使用小方块来实现
每隔一定的时间创建一个小方块，其移动轨迹就是在线路上进行循环移动。即从起点开始移动到下一个拐点，再移动到下一个拐点，再移动到下一个拐点....如果移到路径尾部的时候就恢复到开始位置。
效果图如下：
--- 方块类 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，使用透明图片来实现
直接使用实色方块可能会觉得有些生硬，那么可以使用半透明的放射发光图片来做粒子，素材图如下：
这时就要使用 Sprite3D 来制作粒子。Sprite3D 是一个始终正对着摄像机镜头的平面对象，其保证不管摄像头如何旋转，始终面向着用户。
效果图如下：
代码如下 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）