Away3d uses a cylindrical body (Cylinder) to draw a line segment example

Usually we can use LineSegment to create line segments, but sometimes using linesegment there is a rendering vanishing problem. And also does not support skin, mouse interaction events (move out, click, etc.). In fact, we can use the cylinder (cylindergeometry) to replace the linesegment to draw a straight line, but also to meet the requirements above.

One, use Cylindergeometry to draw segment

1, Effect chart

We use a cylindrical body to achieve a straight line between two points, the cylinder using a solid color, you can change it to other skin texture.

2, the principle of implementation:

(1) First calculate the distance between two points, and then draw a cylinder of the same length.

(2) Move the cylinder to the midpoint between two points.

(3) Changing the angle of the cylinder so that its two endpoints coincide with the two coordinate points of the set. To accurately adjust the angle, I'm here with the LookAt () method, which allows a 3D object (originally toward the positive direction of the z-axis) to move toward another 3D object or to a specific point in the scene.

Code

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 Away3d.containers.View3D;
Import Away3d.controllers.HoverController;
Import away3d.debug.Trident;
Import Away3d.entities.Mesh;
Import away3d.materials.ColorMaterial;
Import Away3d.primitives.CylinderGeometry;

[SWF (Framerate=, backgroundcolor= "#FFFFFF")]
public class S3 extends Sprite {

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

Cylindrical drawing material (using solid color)
private Var cylindermaterial:colormaterial;

private var _lastx:number = 0;
private var _lasty:number = 0;

Public Function S3 () {
Initengine ();
Initmaterials ();
Initobjects ();
Initlisteners ();

Add a coordinate system.
var trident:trident = new Trident (200);
_view3d.scene.addchild (Trident);
}

/**
* 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 = 15;

AddChild (_VIEW3D);
}

/**
* Initialization of the material
*/
Private Function Initmaterials (): void
{
cylindermaterial = new Colormaterial (0xffd800);
}

/**
* Initialize Object
*/
Private Function initobjects (): void
{
Create a cylinder on a three-dimensional stage
var v1:vector3d = new Vector3D (100, 0, 0);
var v2:vector3d = new Vector3D (0, 100, 100);
Createcylinderline (v1, v2);
}

/**
* Use the cylinder to achieve the two-point line between
*/
Private Function Createcylinderline (V1:vector3d, V2:vector3d): Mesh {
Calculate segment length
var lenght:number = v1.subtract (v2). length;
To create a cylinder (the same direction as the Z axis)
var Cylinder:mesh = new Mesh (New Cylindergeometry (2, 2, Lenght,16,1,true,true,true,false),
Cylindermaterial);
var T:vector3d = V1.add (v2);
Move the cylinder to the midpoint between two points
Cylinder.position = new Vector3D (T.X/2, T.Y/2, T.Z/2);
To change the direction of a cylindrical body
Cylinder.lookat (v2);
To add a cylinder to the stage
_view3d.scene.addchild (cylinder);
Return cylinder
}

/**
* 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
{
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
{
_view3d.stage.addeventlistener (Mouseevent.mouse_move, Mousemovehandler);
_LASTX = _view3d.mousex;
_lasty = _view3d.mousey;
}

/**
* Mouse Bounce Event
*/
Private Function OnMouseUp (event:mouseevent): void
{
_view3d.stage.removeeventlistener (Mouseevent.mouse_move, Mousemovehandler);
}

/**
* Mouse Movement Events
*/
Private Function Mousemovehandler (event:mouseevent): void
{
Mobile camera
var dx:number = _view3d.mousex-_lastx;
var dy:number = _view3d.mousey-_lasty;

Cameracontroller.panangle = + dx;
Cameracontroller.tiltangle + dy;

_LASTX = _view3d.mousex;
_lasty = _view3d.mousey;
}
}
}

Second, use Cylindergeometry to draw line segments

We define a method to receive an array of coordinates, which holds the starting point of the polyline, the end point, and the coordinates of the inflection points:

/**
* Implement line segment by multiple point coordinates
*/
Private Function Createcylinderlines (Points:array): void{
for (var i:int = 1; i<points.length; i++) {
Createcylinderline (Points[i],points[i-1]);
}
}

Test code:

Draw a triangle
var v1:vector3d = new Vector3D (100, 0, 0);
var v2:vector3d = new Vector3D (0, 100, 100);
var v3:vector3d = new Vector3D (200, 100, 0);
Createcylinderlines ([V1, V2, v3, v1]);

The effect chart is as follows:

The problem with using a cylindrical body stitching into a polyline is that there will be a notch at the intersection of two cylinders, and the following lines can be magnified to see clearly:

Solution: Add a sphere at each intersection, the radius of the ball and the radius of the cylinder are the same, the color material is the same.

/**
* Implement line segment by multiple point coordinates
*/
Private Function Createcylinderlines (Points:array): void{
for (var i:int = 1; i<points.length; i++) {
Createcylinderline (Points[i],points[i-1]);

Create a sphere around the corner
var Sphere:mesh = new Mesh (new Spheregeometry (6), cylindermaterial);
Sphere.position = Points[i];
_view3d.scene.addchild (Sphere);
}
}

Original from: www.hangge.com