Away3D - 使用圆柱体（Cylinder）来绘制直线线段

2016-03-18 发布：hangge 阅读：1487

通常我们可以使用 LineSegment 来创建线段，但有时使用 LineSegment 会有渲染消失问题。而且也不支持皮肤，鼠标交互事件（移入移出、点击等）。其实我们可以使用圆柱体（CylinderGeometry）来替代 LineSegment 绘制直线，同时也能满足上面的需求。

一，使用CylinderGeometry来绘制线段

1，效果图
这里我们用圆柱体实现两点间的直线绘制，圆柱体使用纯色，需要的话可以自行改成其他皮肤纹理。

2，实现原理：

（1）先计算两点间的距离，然后绘制一个相同长度的圆柱体。

（2）将圆柱体移到两点间的中点处。

（3）改变圆柱体角度使其两个端点与设置的两个坐标点重合。要准确地调整角度，我这里借助了 lookAt() 方法，它可以让一个3D物体（原来朝向Z轴正方向的一面）朝向另一个3D物体或向场景中的一个特定点。

3，样例代码：

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="60", backgroundColor="#FFFFFF")]
	public class S3 extends Sprite {
		
		private  var _view3D:View3D;
		private var cameraController:HoverController;//360全景展示相机控制器
		
		//圆柱图材质（使用纯色） 
		private var cylinderMaterial:ColorMaterial;
		
		private var _lastX:Number = 0;
		private var _lastY:Number = 0;
		
		public function S3() {
			initEngine();
			initMaterials();
			initObjects();
			initListeners();
			
			//添加 坐标系.		
			var trident:Trident = new Trident(200);
			_view3D.scene.addChild(trident);
		}
		
		/**
		 * 初始化引擎
		 */
		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 = 15;
			
			addChild(_view3D);
		}
		
		/**
		 * 初始化材质
		 */
		private function initMaterials():void
		{
			cylinderMaterial = new ColorMaterial(0xFFD800);
		}
		
		/**
		 * 初始化物体
		 */
		private function initObjects():void
		{
			// 在三维舞台中创建一个圆柱体 
			var v1:Vector3D = new Vector3D(100, 0, 0);
			var v2:Vector3D = new Vector3D(0, 100, 100); 
			createCylinderLine(v1, v2);
		}
		
		/**
		 * 使用圆柱体来实现两点间的线段
		 */
		private function createCylinderLine(v1:Vector3D, v2:Vector3D):Mesh {	
			//计算线段长度
			var lenght:Number = v1.subtract(v2).length;
			//创建圆柱体（同z轴方向相同）
			var cylinder:Mesh = new Mesh(new CylinderGeometry(2, 2, lenght,16,1,true,true,true,false),
				cylinderMaterial);	
			var t:Vector3D = v1.add(v2);
			//将圆柱体移动到两点间的中点位置
			cylinder.position = new Vector3D(t.x/2, t.y/2, t.z/2);
			//改变圆柱体朝向
			cylinder.lookAt(v2);  
			//将圆柱体添加到舞台
			_view3D.scene.addChild(cylinder);
			return cylinder
		}
		
		/**
		 * 初始化监听
		 */
		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;
		}
	}
}

二，使用CylinderGeometry来绘制折线线段
我们定义一个方法接收坐标数组，这个数组里存放折线的起点、终点以及各个拐点的坐标：

/**
 * 通过多个点坐标实现折线线段
 */
private function createCylinderLines(points:Array):void{
	for(var i:int = 1; i<points.length; i++){
		createCylinderLine(points[i],points[i-1]);
	}
}

测试代码：

//绘制一个三角形
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]);

效果图如下：

三，绘制折线时修补拐点处的缺口
使用圆柱体体拼接成成折线有个问题，就是在两个圆柱体交汇处会有一个缺口，下面把线加粗放大可以很明显地看到：

解决办法：在每个交点处添加一个球体，球的半径和圆柱体半径相同，颜色材质也一样。

/**
 * 通过多个点坐标实现折线线段
 */
private function createCylinderLines(points:Array):void{
	for(var i:int = 1; i<points.length; i++){
		createCylinderLine(points[i],points[i-1]);
		
		// 在拐角处创建一个球体
		var sphere:Mesh = new Mesh(new SphereGeometry(6), cylinderMaterial);
		sphere.position = points[i]; 
		_view3D.scene.addChild(sphere);
	}
}