一个3D地球

一个3D地球，学习一些新的绘图方法

fla代码如下：

// creates a sphere
function createSphere(radius:Number,
                      parallels:int,
                      meridians:int,
                      trianglePathOut:GraphicsTrianglePath,
                      vertices3DOut:Vector.<Number>):void {
    
    if (parallels < 3) parallels = 3;
    if (meridians < 3) meridians = 3;
    meridians++; // texture edge meridian duplicated
    
    var parallelStops:int = parallels-1; // for 决定 u
    var meridianStops:int = meridians-1; // for determining v
    
    // local variables
    var r:Number; // radius
    var x:Number, y:Number, z:Number; // coordinates
    var p:int, pi:int, pa:Number; // parallel vars
    var m:int, mi:int, ma:Number; // meridian vars
    var u:Number, v:Number; // u, v of uvt
    var n:int = -1; // vertices index
    
    // horizontal
    for (p=0; p<parallels; p++){
        v = p/parallelStops;
        pa = v*Math.PI - Math.PI/2;
        y = radius*Math.sin(pa);
        r = radius*Math.cos(pa);//不同高度y，半径不同
        
        // vertical
        for (m=0; m<meridians; m++){
            u = m/meridianStops;
            ma = u*Math.PI*2;
            x = r*Math.cos(ma);
            z = r*Math.sin(ma);
            
            // vertices
            vertices3DOut.push(x,y,z);
            n++;
            
            // trianglePathOut
            trianglePathOut.uvtData.push(u, v, 1);
            
            if (m != 0){ // not first meridian (texture edge)
                if (p != parallelStops){ // not last parallel (no next parallel to connect)
                    trianglePathOut.indices.push(n, n+meridians, n+meridians-1);
                    trianglePathOut.indices.push(n, n+meridians-1, n-1);
                }
            }
        }
    }
}




// creates a darker version of a bitmap
function getDarkerBitmap(source:BitmapData, darkness:Number):BitmapData {

    // put source in a Bitmap display object
    // and darken it using a ColorTransform
    var darker:Bitmap = new Bitmap(source);
    darker.transform.colorTransform = new ColorTransform(darkness, darkness, darkness);
    
    // draw() does not take in account of
    // transformations on the object you draw
    // so place it in a container
    var container:Sprite = new Sprite();
    container.addChild(darker);
    
    // create a new BitmapData drawing
    // the darker image in the container
    var bmp:BitmapData = new BitmapData(source.width, source.height, source.transparent, 0);
    bmp.draw(container);
    return bmp;
}




// create globe shape
var globe:Shape = new Shape();
globe.x = stage.stageWidth/2;
globe.y = stage.stageHeight/2;
addChild(globe);


// 球的变量
var globeRadius:Number        = 100;//球的半径
var globeParallels:int        = 20;//y方向线条数
var globeMeridians:int        = 20;//x方向线条数
var globeSpinSpeed:Number    = 2;
 
var frontFace:BitmapData    = new Erf(0,0);
var backFace:BitmapData        = getDarkerBitmap(frontFace, .25);

var globeTransform:Matrix3D                    = new Matrix3D();
globeTransform.appendTranslation(0, 0, globeRadius*4); // push back in 3D space
var globeProjection:PerspectiveProjection    = new PerspectiveProjection();
var globePerspective:Matrix3D                = globeProjection.toMatrix3D();


//triangles和trianglesBack分别是两个网格，只是位置重合，绘制的顺序也相同即相同位置法向量相同
//它们分别删除正面或背面，这样在相同位置就只绘制其中一个网格，避开Z坐标排序
//类似双面贴图
// a GraphicsTrianglePath for the path
// data to be drawn in Flash
//GraphicsTrianglePath(vertices:Vector = null, indices:Vector = null, uvtData:Vector = null, culling:String = "none")
var triangles:GraphicsTrianglePath    = new GraphicsTrianglePath(
        new Vector.<Number>(), new Vector.<int>(),
        new Vector.<Number>(), TriangleCulling.NEGATIVE);//剔除正面TriangleCulling.NEGATIVE

// a new GraphicsTrianglePath container using the
// same vector data as triangles is created to draw
// the backside of the sphere once the darker version
// of the bitmap is added to the drawing state
var trianglesBack:GraphicsTrianglePath = new GraphicsTrianglePath(
        triangles.vertices, triangles.indices,
        triangles.uvtData, TriangleCulling.POSITIVE);//剔除背面TriangleCulling.POSITIVE

// stroke for when mouse is pressed
// start with a NaN width (no stroke)
var stroke:GraphicsStroke = new GraphicsStroke(NaN, false, "normal", "none", "round", 3,
        new GraphicsSolidFill(0xFF0000));//定义线条样式或笔触,定义线条实心填充

// create a vector of Number objects to store
// 3D locations of sphere coordinates
var vertices3D:Vector.<Number> = new Vector.<Number>();
// to be non-destructive, changes to the sphere
// coordinates are added to this vector
var vertices3DTransformed:Vector.<Number> = new Vector.<Number>();

// populate triangles and vertices3D and with
// sphere data; note that the triangles vector data
// is being modified but this also affects trianglesBack
// since it uses those same vectors
createSphere(globeRadius, globeParallels, globeMeridians, // in
             triangles, vertices3D); // out




// IGraphicsData list of drawing commands, drawing back face
// first (dark), followed by front face (light)
var globeData:Vector.<IGraphicsData> = Vector.<IGraphicsData>([
    stroke,                                             //定义绘图线条样式
    new GraphicsBitmapFill(backFace, null, false, true),//定义位图填充
    trianglesBack,                                      //定义绘图路径GraphicsTrianglePath    
    new GraphicsBitmapFill(frontFace, null, false, true),//定义位图填充
    triangles                                           //定义绘图路径GraphicsTrianglePath    
]);




// rotate globe in frame loop
addEventListener(Event.ENTER_FRAME, draw);
function draw(event:Event):void {
    
    // rotate the globe transform around the y axis
    // using prepend allows this to be applied
    // "before" the previous translation in z
    globeTransform.prependRotation(-globeSpinSpeed, Vector3D.Y_AXIS);
    // apply the transform to the globe vertices
    // to make the globe points actually rotated
    // (as well as pushed back in z)
    globeTransform.transformVectors(vertices3D, // in
                                    vertices3DTransformed); // out
    // convert the 3D points to 2D points and update
    // the T data in the UVT to coorectly account for
    // the translation of 2D to 3D for the bitmaps
    Utils3D.projectVectors(globePerspective, vertices3DTransformed, // in
                           triangles.vertices, triangles.uvtData); // out
    
    // draw the triangles
    globe.graphics.clear();
    globe.graphics.drawGraphicsData(globeData);
}


// show outlines when pressing the mouse
stage.addEventListener(MouseEvent.MOUSE_DOWN, toggleStroke);
stage.addEventListener(MouseEvent.MOUSE_UP, toggleStroke);
function toggleStroke(event:MouseEvent):void {
    stroke.thickness = (event.type == MouseEvent.MOUSE_DOWN) ? 1 : NaN;
}