Away3D in Flex 4 – Phase 1 – Getting started

Phase 1

Getting Started.

This post shows how to get Away3D working in Flex 4 or Flash Builder 4.

Notes from this site (my emphasis, though):

• The reason we extend UIComponent is bacause the View3D class in Away3D is based on a Sprite and the only Flex component that can add a Sprite as a child is UIComponet.
• How to add a self-made component, using the 'local' namespace defined in the s:Application tag as local:"*"

The Flex 4 version required some fiddling, and using a more recent version of Away3D requires some more. Here is the revised code - note that you will still use the image from the other site.

Code:FlexView3D.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:local="com.st.mediator.*" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel width="100%" height="100%">
		<local:Away3DCube id="test3DScene" width="100%" height="100%" />
	</s:Panel>
</s:Application>

Code:Away3DCube.as

package com.st.mediator
{
	import away3d.containers.View3D;
	import away3d.materials.BitmapFileMaterial;
	import away3d.primitives.Cube;
	
	import flash.events.Event;
	import flash.geom.Vector3D;
	
	import mx.core.UIComponent;
	
	public class Away3DCube extends UIComponent
	{
		//Sprite container used for storing camera, scene, session, renderer and clip references, and resolving mouse events
		private var view:View3D;
		private var testCube:Cube;
		
		
		public function Away3DCube()
		{
			super();
			this.addEventListener(Event.ENTER_FRAME, onFrameEnter);
		}
		
		override protected function createChildren():void
		{
			super.createChildren();
			
			if(!this.view)
			{
				this.view = new View3D();
				
				//Camera used when rendering.
				this.view.camera.moveTo(0, 0, -1500);
				
				this.view.camera.lookAt(new Vector3D(0, 0, 0));
			}
			
			try
			{
				this.getChildIndex(this.view);
			}
			catch(e:Error)
			{
				this.addChild(this.view);
			}
			
			if(!this.testCube)
			{
				this.testCube = new Cube({name:"cube", height:500, width:500, depth:500, material:new BitmapFileMaterial("asset/funny_1558.jpg")});
			}
			
			try
			{
				if(this.view.scene.getChildByName(this.testCube.name) == null)
				{
					this.view.scene.addChild(this.testCube);
				}
			}
			catch(e:Error)
			{
				this.view.scene.addChild(this.testCube);
			}
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			if(this.width / 2 != this.view.x)
				this.view.x = this.width / 2;
			
			if(this.height / 2 != this.view.y)
				this.view.y = this.height / 2;
			
		}
		
		private function onFrameEnter(event:Event):void
		{
			if(this.view && this.view.stage)
			{
				this.testCube.rotationX += .7;
				this.testCube.rotationY += .5;
				this.testCube.rotationZ += .4;
				
				this.view.render();
			}
		}
	}
}

Execution Order:

1.constructed function - Away3DCube()

2.createChildren()

3.onFrameEnter()

4.updateDisplayList()