25Aug/094
Cubic Panorama in Flash 10
Here is my latest DirectFlex experiment: a cubic panorama, also called a "skybox".
Cubic Panorama on DirectFlex Labs
I was inspired by makc, who first did this experiment using Alternativa3D.
Full code after the jump...
package { import __AS3__.vec.Vector; import flash.events.KeyboardEvent; import flash.geom.Vector3D; import flash.ui.Keyboard; import net.directflex.api.texture.Texture; import net.directflex.demo.DirectFlexDemo; import net.directflex.engine.GraphicsEngine; import net.directflex.engine.Sprite3D; [SWF(backgroundColor=0xffffff,width=720,height=400)] public class Skybox extends DirectFlexDemo { [Embed("../assets/farcry/Farcry15_ft.jpg")] private static const ASSET_TEXTURE_FRONT : Class; [Embed("../assets/farcry/Farcry15_lf.jpg")] private static const ASSET_TEXTURE_RIGHT : Class; [Embed("../assets/farcry/Farcry15_bk.jpg")] private static const ASSET_TEXTURE_BACK : Class; [Embed("../assets/farcry/Farcry15_rt.jpg")] private static const ASSET_TEXTURE_LEFT : Class; [Embed("../assets/farcry/Farcry15_up.jpg")] private static const ASSET_TEXTURE_UP : Class; [Embed("../assets/farcry/Farcry15_dn.jpg")] private static const ASSET_TEXTURE_DOWN : Class; private static const TEXTURES : Array = [Texture.fromAsset(ASSET_TEXTURE_FRONT), Texture.fromAsset(ASSET_TEXTURE_RIGHT), Texture.fromAsset(ASSET_TEXTURE_BACK), Texture.fromAsset(ASSET_TEXTURE_LEFT), Texture.fromAsset(ASSET_TEXTURE_UP), Texture.fromAsset(ASSET_TEXTURE_DOWN)]; private static const FRONT : int = 0; private static const RIGHT : int = 1; private static const BACK : int = 2; private static const LEFT : int = 3; private static const UP : int = 4; private static const DOWN : int = 5; private static const SCALE : Vector3D = new Vector3D(5.0, 5.0, 5.0); private var _SkyBox : Vector. = new Vector.(6, true); public function Skybox() { super(); stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler); } override protected function initialize() : void { _SkyBox[FRONT] = new Sprite3D(); _SkyBox[FRONT].texture = TEXTURES[FRONT]; _SkyBox[FRONT].scale = SCALE; _SkyBox[FRONT].position.z = SCALE.z / 2; _SkyBox[FRONT].rotation.x = -Math.PI / 2; _SkyBox[RIGHT] = new Sprite3D(); _SkyBox[RIGHT].texture = TEXTURES[RIGHT]; _SkyBox[RIGHT].scale = SCALE; _SkyBox[RIGHT].position.x = SCALE.x / 2; _SkyBox[RIGHT].rotation.x = -Math.PI / 2; _SkyBox[RIGHT].rotation.y = Math.PI / 2; _SkyBox[BACK] = new Sprite3D(); _SkyBox[BACK].texture = TEXTURES[BACK]; _SkyBox[BACK].scale = SCALE; _SkyBox[BACK].position.z = -SCALE.z / 2; _SkyBox[BACK].rotation.x = -Math.PI / 2; _SkyBox[BACK].rotation.y = Math.PI; _SkyBox[LEFT] = new Sprite3D(); _SkyBox[LEFT].texture = TEXTURES[LEFT]; _SkyBox[LEFT].scale = SCALE; _SkyBox[LEFT].position.x = -SCALE.x / 2; _SkyBox[LEFT].rotation.x = -Math.PI / 2; _SkyBox[LEFT].rotation.y = -Math.PI / 2; _SkyBox[UP] = new Sprite3D(); _SkyBox[UP].texture = TEXTURES[UP]; _SkyBox[UP].scale = SCALE; _SkyBox[UP].position.y = SCALE.y / 2; _SkyBox[UP].rotation.x = Math.PI; _SkyBox[UP].rotation.y = -Math.PI / 2; _SkyBox[DOWN] = new Sprite3D(); _SkyBox[DOWN].texture = TEXTURES[DOWN]; _SkyBox[DOWN].scale = SCALE; _SkyBox[DOWN].position.y = -SCALE.y / 2; _SkyBox[DOWN].rotation.y = -Math.PI / 2; } override public function draw() : void { super.draw(); for each (var panel : Sprite3D in _SkyBox) gfx.draw(panel, GraphicsEngine.DRAW_STATIC); } private function keyDownHandler(event : KeyboardEvent) : void { var keyCode : uint = event.keyCode; if (keyCode == Keyboard.LEFT) gfx.camera.yaw += 0.01; else if (keyCode == Keyboard.RIGHT) gfx.camera.yaw -= 0.01; else if (keyCode == Keyboard.UP) gfx.camera.pitch += 0.01; else if (keyCode == Keyboard.DOWN) gfx.camera.pitch -= 0.01; } } }

August 28th, 2009 - 12:22
that skybox looks familiar
August 28th, 2009 - 14:48
@makc
Indeed
The community is always an incredible source for inspiration and content! I added a link to your original post.
October 28th, 2009 - 13:54
Hello,
I’d like to try out the DirectFlex API even if in an earlier stage. I have read the blog and labs and did not find any docs or sources.
Best regards,
Joaquim.
October 28th, 2009 - 15:37
Thank you very much for your interest!
DirectFlex is not available for now. It should be available before the end of the year.
Updates will be posted soon!