Away3d Particle Movement Animation (circular motion on a path trajectory)

Recently in a three-dimensional topology of the power system, using LineSegment to draw the connection between the device cable. In order to make the picture more vivid, it is necessary to add particle moving effect on the line to simulate the flow of current.

1, using small squares to achieve

Create a small square every once in a while, and its moving trajectory is a circular movement on the line. That is, move from the start to the next inflection point, move to the next corner, and move on to the next inflection .... If you move to the end of the path, return to the start position.

The effect chart is as follows:

---block class 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;

Step size for each move
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);

Create a square in a three-dimensional stage
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 class 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=, backgroundcolor= "#FFFFFF")]
public class Main extends Sprite {

private Var _view3d:view3d;
Private var cameracontroller:hovercontroller;//360 panoramic display camera controller

[Embed (source= "assets/floor_diffuse.jpg")]
public static Var Floordiffuse:class;

Material
private Var planematerial:texturematerial;

Pipe inflection point
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 Lastpanangle:number;
private Var Lasttiltangle:number;
private Var Lastmousex:number;
private Var Lastmousey:number;
private Var Move:boolean;

Public Function Main () {
Initengine ();
Initmaterials ();
Initobjects ();
Initlisteners ();
}

/**
* Initialize engine
*/
Private Function Initengine (): void
{
Stage.scalemode = Stagescalemode.no_scale;
Stage.align = Stagealign.top_left;

Create a viewport
_view3d = new View3D ();
_view3d.antialias = 4; Set anti-aliasing level

Initializing the camera
Cameracontroller = new Hovercontroller (_view3d.camera);
/*cameracontroller.distance = 1000;
Cameracontroller.mintiltangle = 0;
Cameracontroller.maxtiltangle = 90;
Cameracontroller.panangle = 45;*/
Cameracontroller.tiltangle = 30;

AddChild (_VIEW3D);
}


/**
* Initialization of the material
*/
Private Function Initmaterials (): void
{
Ground material
planematerial = new Texturematerial (Cast.bitmaptexture (floordiffuse));
Planematerial.repeat = true;
}

/**
* Initialize Object
*/
Private Function initobjects (): void
{
Ground
var Plane:mesh = new Mesh (new Planegeometry (900,), planematerial);
Plane.geometry.scaleUV (3, 2);
(Plane.geometry as Planegeometry). Doublesided = true; Two-sided map
_view3d.scene.addchild (plane);

Draw Pipe
Createline (linepoints);

Add particles
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);
}

/**
* Initialization Monitoring
*/
Private Function Initlisteners (): void
{
AddEventListener (Event.enter_frame, _onenterframe);
Mouse Event Monitoring
Stage.addeventlistener (Mouseevent.mouse_down, OnMouseDown);
Stage.addeventlistener (mouseevent.mouse_up, onMouseUp);
Stage.addeventlistener (Mouseevent.mouse_wheel,onwheel);
Stage.addeventlistener (Event.resize, onResize);
OnResize ();
}

/**
* Render View
*/
Private Function _onenterframe (e:event): void
{

Moving perspective
if (move) {
Cameracontroller.panangle = 0.3 * (stage.mousex-lastmousex) + lastpanangle;
Cameracontroller.tiltangle = 0.3 * (Stage.mousey-lastmousey) + lasttiltangle;
}
Render View
_view3d.render ();
}

/**
* Use stage size always full screen
*/
Private Function onResize (event:event = null): void
{
_view3d.width = Stage.stagewidth;
_view3d.height = Stage.stageheight;
}

/**
* Mouse Wheel Event
*/
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;
}
}

/**
* Mouse Down Event
*/
Private Function OnMouseDown (event:mouseevent): void
{
Lastpanangle = Cameracontroller.panangle;
Lasttiltangle = Cameracontroller.tiltangle;
Lastmousex = Stage.mousex;
Lastmousey = Stage.mousey;
move = true;
}

/**
* Mouse Bounce Event
*/
Private Function OnMouseUp (event:mouseevent): void
{
move = false;
}
}
}

2, using transparent pictures to achieve
The direct use of solid color box may feel a bit stiff, then you can use translucent light-emitting images to do the particles, the material map is as follows:

Then use Sprite3d to make the particles. Sprite3d is a flat object that is always facing the camera lens, ensuring that no matter how the camera rotates, it is always geared towards the user.

The effect chart is as follows:

The code is powerparticles2.as as follows:

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;

Step size for each move
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;

Create a particle in a three-dimensional stage
_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];
}
}
}
}
}