因为项目需要,我们需要在浏览器展现3D建筑模型。经过一段时间的技术选型,我们觉得Flex是现在浏览器展现3D模型比较成熟技术。我们工作流程也是美工根据实际物体或者场景制作3D的模型为DAE文件。Flex通过Papervision3D的引擎来加载DAE的模型展现和交互。
3D模型加载源代码:
<?xml version="1.0" encoding="utf-8"?>
<view:BaseSimpleContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:view="com.shine.framework.core.view.*"
creationComplete="{complete()}"
xmlns:view1="com.shine.framework.Papervision3D.view.*">
<view:layout>
<s:BasicLayout/>
</view:layout>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.MoveEvent;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.cameras.SpringCamera3D;
import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.DAE;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
private var daeFilePath:String;
//3D视窗
private var viewport:Viewport3D;
//3D场景
private var scene:Scene3D;
//3D照相机
private var camera:Camera3D;
//定位
private var renderer:BasicRenderEngine;
private var dae:DAE;
private var controlDisplayObject3D:DisplayObject3D;
private var oMouseX:Number;
private var oMouseY:Number;
private var tMouseX:Number;
private var tMouseY:Number;
private var cameraX:Number;
private var cameraY:Number;
private var target:DisplayObject3D;
private var configFilePath:String;
[Bindle]
private var debug:Boolean;
private function complete():void{
}
public function changeDebug(value:Boolean):void{
this.debug=value;
}
//加载DAE file
public function loadDaeFile(value:String):void{
this.daeFilePath=value;
initDae3D();
}
public function loadConfigFile(value:String):void{
this.configFilePath=value;
}
//绘画3D
private function initDae3D():void{
dae = new DAE();
dae.load(this.daeFilePath);
dae.addEventListener(FileLoadEvent.LOAD_COMPLETE, handleLoadComplete);
dae.addEventListener(FileLoadEvent.LOAD_ERROR, handleLoadError);
dae.addEventListener(FileLoadEvent.LOAD_PROGRESS, handleProgress);
dae.addEventListener(FileLoadEvent.SECURITY_LOAD_ERROR, handleSecurity);
dae.addEventListener(FileLoadEvent.COLLADA_MATERIALS_DONE, handleMaterialsDone);
}
//Load Collada
private function handleLoadComplete(e:Event):void
{
this.completeLoading();
initViewPort();
//messageText.text = "COLLADA LOAD COMPLETE";
}
private function handleLoadError(e:Event):void
{
}
private function handleProgress(e:Event):void
{
}
private function handleSecurity(e:Event):void
{
}
private function handleMaterialsDone(e:Event):void
{
//initViewPort();
}
private function initViewPort():void{
//Setup viewport, add to stage
viewport = new Viewport3D(this.width,this.height,false,false);
canvas.rawChildren.addChild(viewport);
//Setup renderer
renderer = new BasicRenderEngine();
//Setup camera
camera = new Camera3D();
camera.fov=18;
camera.x=0;
camera.y=0;
camera.z=-1000;
target=new DisplayObject3D();
target.x=0;
target.y=0;
target.z=0;
camera.target=target;
//Setup scene
scene = new Scene3D();
//Setup container, add dae to container, add container to scene.
scene.addChild(dae);
//Alert.show(dae.childrenList());
//Alert.show(dae.getChildByName("COLLADA_Scene").childrenList());
//Alert.show(dae.getChildByName("COLLADA_Scene").getChildByName("Pyramid001").childrenList());
//dae.getChildByName("C