将flex组件添加到papervision3d

上一篇文章介绍了如何将papervision3d作为组件添加到flex中。地址如下：

http://blog.youkuaiyun.com/sing_sing/archive/2011/03/23/6270637.aspx

 

这篇文章倒过来，介绍如何将flex组件添加到papervision3d中。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    backgroundColor="#000000"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    applicationComplete="init3D()">
    <mx:Script>
        <![CDATA[
            import mx.controls.*;
            import org.papervision3d.view.*;
            import org.papervision3d.cameras.*;
            import org.papervision3d.materials.*;
            import org.papervision3d.objects.primitives.*;
           
            private var view:BasicView;
            private var thePlane:Plane;
            private var flexSkin:MovieMaterial;
           
            private function init3D():void {
                view = new BasicView(0, 0, true, true, CameraType.FREE);
                flex.addChild(view);
               
                //to aviod myPanel show in stage,
                //myPanel visible set false or remove all children and add child again;
//                this.removeAllChildren();
//                this.addChild(flex);
                //end!!
               
                view.camera.zoom = 10;
                view.camera.focus = 100;
               
                flexSkin = new MovieMaterial(myPanel, false, true, false);
                flexSkin.doubleSided = true;
                flexSkin.interactive = true;
               
                thePlane = new Plane(flexSkin, myPanel.width, myPanel.height, 4, 4);
                thePlane.useOwnContainer = true;
                thePlane.filters = [new GlowFilter(0x00ff00, 1, 6, 6, 4, 2, false,
                    false)];
                view.scene.addChild(thePlane);
               
                addEventListener(Event.ENTER_FRAME, loop3D);
            }
           
            private function loop3D(e:Event):void {
                if(view.camera != null) {
                    thePlane.rotationY++;
                    view.singleRender();
                }
            }
           
            private function hit():void {
                Alert.show("clicked!");
            }
           
            private function reset():void {
                txtname.text = "";
                txtpass.text = "";
            }
        ]]>
    </mx:Script>
    <mx:Panel id="myPanel" title="flexComponet3D" visible="false"
        backgroundColor="#000000" color="#fFFFFF" cornerRadius="0" headerHeight="22"
        width="225" backgroundAlpha="1.0"
        height="171" borderStyle="solid" x="10" y="62">
        <mx:Form width="204" height="135" backgroundColor="#000000">
            <mx:FormItem label=" "/>
            <mx:FormItem label="name">
                <mx:TextInput width="83"
                    color="#FFFFFF" id="txtname"/></mx:FormItem>
            <mx:FormItem label="password">
                <mx:TextInput width="82"
                    color="#FFFFFF" id="txtpass"/></mx:FormItem>
            <mx:HBox width="100%">
                <mx:Button label="enter" textRollOverColor="#cccccc"
                    textSelectedColor="#FFFFFF" color="#FFFFFF"
                    click="hit()"/>
                <mx:Button label="reset" textRollOverColor="#cccccc"
                    textSelectedColor="#FFFFFF" color="#FFFFFF" 
                    click="reset()"/>
            </mx:HBox>
        </mx:Form>
    </mx:Panel>
    <mx:UIComponent id="flex" top="0" bottom="0" left="0" right="0"/>
</mx:Application>

 

代码中注释部分说明：

在application中添加myPanel，在界面上会出现两个myPanel，一个是通过mxml标签添加进去的，一个是作为材质加入到flexSkin的，所以要先隐藏掉通过mxml标签添加进去的myPanel，有两种方法：一是通过visible隐藏myPanel，一个方法是在application完成构建后先删除所有组件，然后重新添加需要的组件。