上一篇中,已经可以在flex网页中实现一个会自动旋转的平面,那能不能把2D平面的组件添加到3D平面呢,为这个问题,我查了很多资料,结果多样,却没有谁作一个系统的说明,在这里,我也不能作一个具体的解说(功力不够深厚啊),我只是用一个具体的实例来实现我的想法。我的想法是将Flex原有的组件,例如一个Button控件添加到一个平面上。上图
该功能是在as文件中动态添加一个Button,然后将这个Button添加到3D环境中的Panel中,自动旋转。
上代码:
package com.neil
{
import flash.events.Event;
import mx.core.UIComponent;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
public class MainView extends UIComponent
{
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;
private var movieMaterial:MovieMaterial;
private var plane:Plane;
public function MainView()
{
init();
}
private function init():void{
viewport=new Viewport3D(640,480,false,true);
addChild(viewport);
scene=new Scene3D();
camera=new Camera3D();
renderer=new BasicRenderEngine();
var btn:Button=new Button();
btn.label="ddd";
btn.width=100;
btn.height=30;
/*btn.includeInLayout=false;
btn.blendMode=BlendMode.ERASE;*/
addChild(btn);
movieMaterial=new MovieMaterial(btn,true,true,true);
movieMaterial.doubleSided=true;
movieMaterial.precise=true;
movieMaterial.smooth=true;
movieMaterial.interactive=true;
plane=new Plane(material);
scene.addChild(plane);
addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
private function onEnterFrame(e:Event):void{
plane.yaw(2);//设置动画速度
renderer.renderScene(scene,camera,viewport);
}
}
}
代码是很简单吧,可是如果真要在网上找实例来实现这个功能,要下一家功夫的哦。还有一个问题就是,看到在页面上有两个Button是吧,我只是想添加到3D场景中,不想在2D环境中出现。为了这个这个问题,也花了我不少时间,最后有一个最简单的办法,直接设置Button的BlendMode属性,设置为ERASE,代码为注释掉部分。这样,就可以实现将Flex里的一般组件添加到3D场景中了。