I was looking around for an updated “Hello World” Away3D example and found many examples out of date, unnecessarily complex or not proofed for orphan code.
The unnecessarily complex examples attempted explaining more than was necessary and neglected clarifying the code.
Many examples used the “open ended object” parameters for methods and constructors. These types of parameters are the root cause for code failing both for the developers of the api and the users. A class property changes and someone forgets that the constructor has a loose compile time parameter. Thus we users are left scratching heads. Magic is cool but should be restricted to side shows. I recommend sticking with setting individual properties and avoiding these types of parameters unless there is a class to define an object to pass so the compiler can reduce the mishaps.
I am using the Away3D version 3.5 code. I included that code in these examples since open source code tends to be subject to change and volatile. Many of the Away3D examples I have seen are broken with this version and the author failed to clarify the exact version they were using or take them down.
You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Away3D library. For Flash CS3 and later versions, you need to create a Flash Document in the src folder and set the document class to Away3D_HelloWorld_Rotating_Sphere_AS3 and then add a library path to the Away3d code or SWC if you created one. For your convenience the Flash CS4 example download is included.
This article shows the code for the Flex project.
Application Class – Away3D_HelloWorld_Rotating_Sphere_Flex
All the code is contained in this class except for the Away3D library. The applicationCompleteHandler creates the Away3D objects and event registration. This uses the Sphere primitive included in Away3D. Only the wire frame is shown so that you can see the x, y and z axes to help get a perspective. The sphere object is dead center in its container for all three axes. You are viewing the sphere from a negative position on the z axis.
<?xml version="1.0" encoding="utf-8"?>
<!--
/**
* Away3D 3.5.0 basic example showing centering a wireframe sphere in a View3D all centered on stage.
* */
-->
<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"
applicationComplete="applicationCompleteHandler(event)"
width="500" height="500">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import away3d.containers.View3D;
import away3d.materials.WireColorMaterial;
import away3d.primitives.Sphere;
import away3d.primitives.Trident;
import mx.events.FlexEvent;
// Properties for background
private static const backgroundColor:Number = 0xcccccc;
private static const backgroundBorderColor:Number = 0x666666;
private static const backgroundBorderWeight:Number = 2;
private var view:View3D; // View to contain the Sphere
private var sphere:Sphere; // Sphere to animate and position.
private var speed:Number = .1; // Speed for sphere rotationY property
protected function applicationCompleteHandler(event:FlexEvent):void
{
var wireColorMaterial:WireColorMaterial; // Optional colors for Sphere.
// Create a View3D and center on stage
view = new View3D();
view.x = stage.stageWidth / 2;
view.y = stage.stageHeight / 2;
// Add viewport to the container
away3DContainer.addChild(view);
// Create a Sphere. Default position is 0,0,0;
sphere = new Sphere();
sphere.radius = 250;
sphere.segmentsW = 12;
sphere.segmentsH = 9;
// Create a color for the sphere wire model. Optional.
wireColorMaterial = new WireColorMaterial();
wireColorMaterial.alpha = 0; // Default wireColorMaterial.color is transparent.;
wireColorMaterial.wireColor = 0x0000ff;
sphere.material = wireColorMaterial;
// Add the sphere to the scene
view.scene.addChild(sphere);
// Add x, y and z axes for position perspective.
var axis:Trident = new Trident(250, false);
view.scene.addChild(axis);
// Register listener for the ENTER_FRAME event.
addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
}
[ad name=”Google Adsense”]
This code is simply the ENTER_FRAME event handler and the function for updating the view and the state of the 3D objects to create the animation. The sphere rotationY property is animated.
/**
* ENTER_FRAME event handler.
* */
public function enterFrameEventHandler(e:Event):void
{
updateView();
}
/**
* Computes the animation changes and updates view.
* */
public function updateView():void
{
// Rotate sphere around the Y-axis.
sphere.rotationY += speed;
// Render the view.
view.render();
}
]]>
</fx:Script>
[ad name=”Google Adsense”]
This Flex version is a spark implementation. The SpriteVisualElement is used as the container. Older versions of Flex will require creating a UIComponent.
A background is included to help see the impact of changing positioning properties of the View3d and the Sphere should you want to play.
<!--
Background for app
-->
<s:BorderContainer id = "background_bc"
width="{width}" height = "{height}"
borderWeight="{backgroundBorderWeight}"
borderColor="{backgroundBorderColor}"
backgroundColor="{backgroundColor}">
<!--
Container for the Away3D Sprite objects
-->
<s:SpriteVisualElement id = "away3DContainer" />
</s:BorderContainer>
</s:Application>
References
Away3d.com/