Away3D - 在Flex中加载嵌入Away3D Sprite

2015-12-10 发布：hangge 阅读：421

通常我们通过继承 Sprite，在起内部使用 ActionScript 来进行 Away3D 的三维创作。但有时我们需要把做好的 3d Sprite 嵌入到 Flex 页面中，那么可以进行如下操作。

1，Flex加载Away3D的Sprite方法与注意事项：

（1）Flex 版本要使用4。

（2）先在 Flex 页面中先添加个 UIComponent，再把 3D Sprite 的实例对象放到这个 UIComponent 里。

（3）Flex 页面的背景色设为透明（backgroundAlpha="0"）。否则加载进来也是显示一片空白。

（4）Flex 默认的帧率24帧/秒。如果和制作的 Away3D 的 Sprite 帧率不一致的话，会造成显示效果的差异。Flex这边可以修改 MXML 页面的 frameRate 属性使其一致。

2，比如下面是一个3D Sprite（MyAway3DSprite.as）

效果很简单，只是添加了个坐标轴。

package{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	
	import away3d.containers.View3D;
	import away3d.debug.Trident;

	[SWF( frameRate="60", backgroundColor="#FFFFFF")]
	public class MyAway3DSprite extends Sprite {
				
		private  var _view3D:View3D;
		
		public function MyAway3DSprite() {
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event):void{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			// 创建一个视口
			_view3D = new View3D();
			addChild(_view3D);
			
			//添加 坐标系.
			var trident:Trident = new Trident(150);
			_view3D.scene.addChild(trident);
			
			addEventListener(Event.ENTER_FRAME, _onEnterFrame);
		}
		
		/**
		 * 渲染视图
		 */
		private function _onEnterFrame(e:Event):void
		{
			_view3D.render();
		}
	}
}

3，Flex中的页面代码如下：

<?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"
			   backgroundAlpha="0" frameRate="60"
			   creationComplete="init(event)" >
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			protected function init(event:FlexEvent):void
			{
				var main:MyAway3DSprite = new MyAway3DSprite();
				container.addChild(main);
			}
			
		]]>
	</fx:Script>
	<mx:UIComponent id="container" width="100%" height="100%"></mx:UIComponent>
</s:Application>