Away3D基础教程（六）：支持双面交互的PlaneGeometry

看了老外的一篇文章，现在将文章中的实例转过来与大家分享，此例中巧妙的运用两个Mesh对象创建了支持双面交互的PlaneGeometry，其实原理就是将PlaneGeometry放到两个Mesh里去，做反面的那个Mesh设置back.rotationY = 180即可，文章里将这种支持双面交互的PlaneGeometry封装成了DoubleSidedPlane3D类，使用起来也非常简单。大家也可以自己扩展这个类来实现更多的动能，比如点击正面的时候和点击反面的时候做出不同的处理。效果如下：

 

 

 

Main.as  代码

 

package {

    import flash.display.Sprite;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.events.MouseEvent;
    import flash.system.System;
    import flash.events.Event;
    import flash.geom.Vector3D;
    import flash.display.BitmapData;
    import flash.text.TextField;
    import flash.ui.Mouse;
    import flash.ui.MouseCursor;
    import away3d.Away3D;
    import away3d.containers.View3D;
    import away3d.containers.Scene3D;
    import away3d.cameras.Camera3D;
    import away3d.containers.ObjectContainer3D;
    import away3d.materials.TextureMaterial;
    import away3d.textures.BitmapTexture;
    import away3d.materials.ColorMaterial;
    import away3d.utils.Cast;
    import away3d.events.MouseEvent3D;
    import org.libspark.betweenas3.BetweenAS3;
    import org.libspark.betweenas3.tweens.ITween;
    import org.libspark.betweenas3.events.TweenEvent;
    import org.libspark.betweenas3.easing.*;
    import DoubleSidedPlane3D;
    import flash.text.TextFieldAutoSize;

    [SWF(backgroundColor="#FFFFFF", width="512", height="512", frameRate="60")]

    public class Main extends Sprite {
        [Embed(source="assets/back.jpg")]
        private var Background:Class;
        [Embed(source="assets/image0.jpg")]
        private var Image0:Class;
        [Embed(source="assets/image1.jpg")]
        private var Image1:Class;
        [Embed(source="assets/image2.jpg")]
        private var Image2:Class;
        [Embed(source="assets/image3.jpg")]
        private var Image3:Class;
        [Embed(source="assets/image4.jpg")]
        private var Image4:Class;
        
        private var view:View3D;
        private var scene:Scene3D;
        private var camera:Camera3D;
        private var container:ObjectContainer3D;
        private static var cameraDepth:uint = 1000;
        private static var cameraHeight:int = 0;
        private static var max:uint = 5;
        private var planes:Array;
        private static var pwidth:uint = 256;
        private static var pheight:uint = 128;
        private var angle:Number = 0;
        private static var center:Vector3D = new Vector3D();
        private var htmlText:TextField;

        public function Main() {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            System.pauseForGCIfCollectionImminent(1);
            init();
        }

        private function init():void {
            
            view = new View3D();
            scene = view.scene;
            camera = view.camera;
            addChild(view);
            setup();
            initialize();
            
            htmlText = new TextField();
            htmlText.autoSize = TextFieldAutoSize.LEFT;
            htmlText.selectable = false;
            htmlText.textColor = 0xa3a3a3;
            htmlText.htmlText = '交流QQ：781444988\n交流地址：<a href="http://www.cnblogs.com/njflash/" target="_blank">http://www.cnblogs.com/njflash/ </a>';
            addChild(htmlText);
            htmlText.x = 10;
            htmlText.y = 30;
            
            addEventListener(Event.ENTER_FRAME, render, false, 0, true);
        }
        private function setup():void {
            view.backgroundColor = 0xFFFFFF;
            view.antiAlias = 4;
            view.width = 512;
            view.height = 512;
            view.background = Cast.bitmapTexture(Background);
            camera.x = 0;
            camera.y = cameraHeight;
            camera.z = - cameraDepth;
        }
        private function initialize():void {
            container = new ObjectContainer3D();
            scene.addChild(container);
            var Images:Array = [Image0, Image1, Image2, Image3, Image4];
            var colors:Array = [0xF5F5F5, 0x3366CC, 0x339900, 0xFF9900, 0xCC0066];
            planes = new Array();
            for (var n:uint = 0; n < max; n++) {
                var bitmapData:BitmapData = Cast.bitmapData(Images[n]);
                var texture:BitmapTexture = new BitmapTexture(bitmapData);
                var frontmaterial:TextureMaterial = new TextureMaterial(texture);
                var backmaterial:ColorMaterial = new ColorMaterial(colors[n]);
                var plane:DoubleSidedPlane3D = new DoubleSidedPlane3D(frontmaterial, backmaterial, pwidth, pheight, 10, 4, false);
                plane.x = 0;
                plane.y = 140*(n - 2);
                plane.z = 0;
                plane.extra = {id: n};
                container.addChild(plane);
                plane.front.mouseEnabled = true;
                plane.front.addEventListener(MouseEvent3D.CLICK, click, false, 0, true);
                plane.front.addEventListener(MouseEvent3D.MOUSE_OVER, rollOver, false, 0, true);
                plane.front.addEventListener(MouseEvent3D.MOUSE_OUT, rollOut, false, 0, true);
                plane.back.mouseEnabled = true;
                plane.back.addEventListener(MouseEvent3D.CLICK, click, false, 0, true);
                plane.back.addEventListener(MouseEvent3D.MOUSE_OVER, rollOver, false, 0, true);
                plane.back.addEventListener(MouseEvent3D.MOUSE_OUT, rollOut, false, 0, true);
                planes.push(plane);
            }
        }
        private function render(evt:Event):void {
            angle += 0.5;
            container.rotationY = angle;
            camera.lookAt(center);
            view.render();
        }
        private function click(evt:MouseEvent3D):void {
            enable(false);
            var plane:DoubleSidedPlane3D = DoubleSidedPlane3D(evt.target.parent);
            transit(plane.extra.id);
        }
        private function rollOver(vet:MouseEvent3D):void {
            Mouse.cursor = MouseCursor.BUTTON;
        }
        private function rollOut(vet:MouseEvent3D):void {
            Mouse.cursor = MouseCursor.AUTO;
        }
        private function transit(id:uint):void {
            var fadeouttweens:Array = new Array();
            var fadeintweens:Array = new Array();
            var offset:int = 2 - Math.abs(2 - id);
            for (var n:uint = 0; n < max; n++) {
                var direction:int = (n == id) ? 0 : (n < id) ? - 1 : 1;
                var plane:DoubleSidedPlane3D = planes[n];
                var fadeout:ITween = BetweenAS3.delay(BetweenAS3.parallel(
                    BetweenAS3.to(plane, {y: 140*(n - 2) + 120*direction}, 1, Quad.easeIn), 
                    BetweenAS3.to(plane, {rotationY: 180}, 1, Quad.easeIn), 
                    BetweenAS3.delay(BetweenAS3.to(plane, {alpha: 0, visible: 0}, 0.4, Linear.easeNone), 0.6)
                ), 0.2*(4 - Math.abs(n - id) - offset));
                fadeouttweens.push(fadeout);
                var fadein:ITween = BetweenAS3.delay(BetweenAS3.parallel(
                    BetweenAS3.to(plane, {alpha: 1, visible: 1}, 0.4, Linear.easeNone), 
                    BetweenAS3.to(plane, {y: 140*(n - 2)}, 1, Quad.easeOut), 
                    BetweenAS3.tween(plane, {rotationY: 0}, {rotationY: -180}, 1, Quad.easeOut)
                ), 0.2*Math.abs(n - id));
                fadeintweens.push(fadein);
            }
            var itween:ITween = BetweenAS3.serial(
                BetweenAS3.parallelTweens(fadeouttweens), 
                BetweenAS3.delay(BetweenAS3.parallelTweens(fadeintweens), 0.4)
            );
            itween.addEventListener(TweenEvent.COMPLETE, complete, false, 0, true);
            itween.play();
        }
        
        private function complete(evt:TweenEvent):void {
            evt.target.removeEventListener(TweenEvent.COMPLETE, complete);
            enable(true);
        }
        
        private function enable(useful:Boolean):void {
            for (var n:uint = 0; n < max; n++) {
                var plane:DoubleSidedPlane3D = planes[n];
                plane.front.mouseEnabled = useful;
                plane.back.mouseEnabled = useful;
            }
        }

    }

}

 

DoubleSidedPlane3D.as  代码

package{

    import away3d.containers.ObjectContainer3D;
    import away3d.entities.Mesh;
    import away3d.primitives.PlaneGeometry;
    import away3d.materials.TextureMaterial;
    import away3d.materials.ColorMaterial;

    public class DoubleSidedPlane3D extends ObjectContainer3D {
        
        public var front:Mesh;
        public var back:Mesh;
        private var _geometry:PlaneGeometry;
        private var _frontmaterial:TextureMaterial;
        private var _backmaterial:ColorMaterial;
        private var _alpha:Number = 1;

        
        public function DoubleSidedPlane3D(frontmaterial:TextureMaterial, backmaterial:ColorMaterial, width:Number = 100, height:Number = 100, segmentsW:uint = 1, segmentsH:uint = 1, yUp:Boolean = true) {
            _geometry = new PlaneGeometry(width, height, segmentsW, segmentsH, yUp, false);
            _frontmaterial = frontmaterial;
            _backmaterial = backmaterial;
            init();
        }

        
        private function init():void {
            front = new Mesh(_geometry, _frontmaterial);
            back = new Mesh(_geometry, _backmaterial);
            addChild(front);
            addChild(back);
            back.rotationY = 180;
        }
        public function get alpha():Number {
            return _alpha;
        }
        public function set alpha(value:Number):void {
            _alpha = value;
            _frontmaterial.alpha = _alpha;
            _backmaterial.alpha = _alpha;
        }

    }

}