Away3D - 使用圆柱体(Cylinder)来绘制直线线段
作者:hangge | 2016-03-18 08:22
通常我们可以使用 LineSegment 来创建线段,但有时使用 LineSegment 会有渲染消失问题。而且也不支持皮肤,鼠标交互事件(移入移出、点击等)。其实我们可以使用圆柱体(CylinderGeometry)来替代 LineSegment 绘制直线,同时也能满足上面的需求。
这里我们用圆柱体实现两点间的直线绘制,圆柱体使用纯色,需要的话可以自行改成其他皮肤纹理。
2,实现原理:
二,使用CylinderGeometry来绘制折线线段
我们定义一个方法接收坐标数组,这个数组里存放折线的起点、终点以及各个拐点的坐标:
测试代码:
效果图如下:
三,绘制折线时修补拐点处的缺口
使用圆柱体体拼接成成折线有个问题,就是在两个圆柱体交汇处会有一个缺口,下面把线加粗放大可以很明显地看到:
解决办法:在每个交点处添加一个球体,球的半径和圆柱体半径相同,颜色材质也一样。
一,使用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); } }
全部评论(0)