一聚教程网:一个值得你收藏的教程网站

Away3D使用圆柱体(Cylinder)来绘制直线线段例子

时间:2016-03-18 00:00:00 编辑:简简单单 来源:转载

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

一,使用CylinderGeometry来绘制线段

1,效果图


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


原文:Away3D - 使用圆柱体(Cylinder)来绘制直线线段

 

2,实现原理:
(1)先计算两点间的距离,然后绘制一个相同长度的圆柱体。

(2)将圆柱体移到两点间的中点处。

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

代码

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]);

效果图如下:

 


原文:Away3D - 使用圆柱体(Cylinder)来绘制直线线段



使用圆柱体体拼接成成折线有个问题,就是在两个圆柱体交汇处会有一个缺口,下面把线加粗放大可以很明显地看到:

原文:Away3D - 使用圆柱体(Cylinder)来绘制直线线段

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

原文:Away3D - 使用圆柱体(Cylinder)来绘制直线线段

/**
 * 通过多个点坐标实现折线线段
 */
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);
    }
}


原文出自:www.hangge.com

文章评论

热门栏目