BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

3D in Flex 3

Posted by Shardul Singh Bartwal on June 20, 2008

Using Google SketchUp File into Flex 3

 

 3D in flex! Yes, we all know that it is possible but how to implement? Here I am with the solution for this. One thing more if we are going to use 3D in flex then hmmm… I think we should also go for the ‘Google SketchUp to pickup the 3d.By doing so we will also get the way to use the Google SketchUp with flex. So let start step by step for doing this.

1)      If you are not having the Google SketchUp you can get it from here. Just download it and install.

 

2)      Now simply create you 3D in Google SketchUp.

 

3)      After creating your 3D just go to ‘File’ Menu. Then ‘Export ’submenu and then ‘3D Model’.

File    >>   Export   >> 3D Model.

Then save you 3D with .kmz extension. Let I am giving my file the name ‘abc’ so it will be saved as ‘abc.kmz’.

 

4)      Now a very stylish step….just rename your abc.kmz to abc.zip. Now unzip    

Your ‘abc.zip’.There will be a folder ‘model’.Just open it and find your ‘abc.dae’ file.This .dae extension shows the file of collada type, which is supported by the flex. You can close the Google SketchUp now.

 

5)   Now you require the PaperVision 3D.Download it from here. Now unzip it and open the folder Papervision3D_1_5, inside it open PV3D_1_5.Here is a folder src also open it. Now just copy com and org folder from here and paste them into the src folder of your flex application.

 

6)  In your flex application create a folder asset and paste the abc.dae file of step 4 into it.

 

      7) Now…………just copy and paste the code below into your main mxml.

 

 

***********************************

 

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml

 creationComplete=”init(event)”

 >

<mx:Script>

<![CDATA[

import mx.core.UIComponent;

import org.papervision3d.scenes.Scene3D;

import org.papervision3d.cameras.Camera3D; 

import org.papervision3d.objects.DisplayObject3D;

import org.papervision3d.render.BasicRenderEngine;

import org.papervision3d.objects.parsers.DAE;

import org.papervision3d.view.Viewport3D;

 

 

private var myCam:Camera3D = new Camera3D(); 

private var objScene:Scene3D = new Scene3D();

private var objRenEngin:BasicRenderEngine = new BasicRenderEngine();

private var objViewport3D:Viewport3D = new Viewport3D(10,10,true,true);

 

[Embed(source=“asset/abc.dae”)]

private var objCls:Class;

 

private function init(event:Event): void

{

 var objUIComponent:UIComponent = new UIComponent();

 v1.addChild(objUIComponent );

 objUIComponent.addChild(objViewport3D);

 var objDAE:DAE = new DAE();

 objDAE.load(XML(new objCls() ) );

 var model:DisplayObject3D = objScene.addChild( objDAE );

 myCam.zoom=3;

 myCam.z=-500;

 myCam.lookAt(model);

 this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);

}

 

private function enterFrameHandler(event:Event):void

{

 objRenEngin.renderScene(objScene,myCam,objViewport3D);

}

]]>

</mx:Script>

<mx:VBox id=”v1” width=”100%” height=”100%/>

</mx:Application>

 

***********************************

 

 

Now run your application…………..and see 3D in flex 

 

 

 

Enjoy flexing………………

 

 

Advertisements

Sorry, the comment form is closed at this time.

 
%d bloggers like this: