/Files/hero82748274/ddd.swf
这次使用Flex 与sandy引擎库进行一个简单3d模拟。在制作过程中使用了flex一些组件配置一些内嵌图片进行贴图。
Code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.core.UIComponent;
import sandy.core.Scene3D;
import sandy.core.scenegraph.*;
import sandy.primitive.*;
import sandy.core.data.*;
import sandy.materials.*;
import sandy.materials.attributes.*;
private var scenne:Scene3D;
private var camera:Camera3D;
private var ranY:Number=0.5;
private var box:Box;
[Embed(source="skin.jpg")]
[Bindable]
public var imgCls:Class; // 嵌入图片资源
private var bt:Bitmap=new imgCls()as Bitmap;
[Bindable]
private var myxml:XML=<item>
<skin>
<myskin>默认皮肤</myskin>
</skin>
<skin>
<myskin>黄色皮肤</myskin>
</skin>
</item>;
private var app:Appearance;
private var app2:Appearance;
private function init():void
{
var ui:UIComponent=new UIComponent(); //创建一个组件
var sprite:Sprite=new Sprite();
ui.addChild(sprite);
canvas.addChild(ui); //添加容器
camera=new Camera3D(300, 300); //创建一个摄影机
camera.z=-400;
var root:Group=createScene();
scenne=new Scene3D("scene1", sprite, camera, root);
addEventListener(Event.ENTER_FRAME, Run);
addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheel);
this.addEventListener(KeyboardEvent.KEY_DOWN, keydown);
ui.setFocus();
}
private function createScene():Group
{
var g:Group=new Group();
box=new Box("box", 100, 100, 100);
var materialAttr:MaterialAttributes=new MaterialAttributes(new LineAttributes(0.5, 0x2111BB, 0.4), new LightAttributes(true, 0.1)); //创建材质属性,线性光，
var material:Material=new ColorMaterial(0xFFCC33, 1, materialAttr); //创建颜色材质
var material2:Material=new BitmapMaterial(bt.bitmapData); //创建图片贴图
material.lightingEnable=true; //开启光线
app=new Appearance(material); //为物体创建材质表面
app2=new Appearance(material2);
box.rotateX=10;
box.rotateY=0;
box.appearance=app; //指定材质表面
//box.appearance=app2;
g.addChild(box);
box.rotateX=30;
box.rotateY=30;
g.addChild(box);
return g;
}
private function Run(event:Event):void
{
scenne.render(); //渲染场景
box.rotateX+=1; //让立方体会在x轴上旋转
box.rotateY+=1; //让立方体会在y轴上旋转
}
private function mouseWheel(event:MouseEvent):void
{
if (event.delta > 0)
{
camera.z+=12; //向前滚动的时候向前滚动
}
else
{
camera.z-=12; //向后滚动
}
}
private function keydown(event:KeyboardEvent):void
{
trace("dd");
if (event.keyCode == Keyboard.UP)
{
trace("dds");
camera.z+=12;
}
else if (event.keyCode == Keyboard.DOWN)
{
camera.z-=12; //使用摄影机来控制深度
}
else if (event.keyCode == Keyboard.LEFT)
{
camera.pan+=2;
}
else if (event.keyCode == Keyboard.RIGHT)
{
camera.pan-=2;
}
else
{
}
}
private function seletSkin(event:ListEvent):void
{
// trace(event.target.selectedItem);
// box.appearance=app2;
if (event.currentTarget.selectedItem == "默认皮肤")
box.appearance=app;
else
box.appearance=app2;
}
]]>
</mx:Script>
<mx:Canvas id="canvas"
x="72"
y="66"
width="411"
height="359">
</mx:Canvas>
<mx:ComboBox id="mycombox"
change="seletSkin(event)"
dataProvider="{myxml..myskin}"
x="400"
y="36" focusEnabled="false">
</mx:ComboBox >
<mx:Label x="348"
y="38"
text="皮肤选择"
width="54"/>
</mx:Application>
一，创建了一个立方体后，在原有基础上，增加一个鼠标互动。
addEventListener(MouseEvent.MOUSE_WHEEL ,mouseWheel);
private function mouseWheel(event:MouseEvent):void
{
if (event.delta>0)
{
camera.z+=12;//向前滚动的时候向前滚动
} else
{
camera.z-=12;//向后滚动
}
}
使用鼠标滑轮让立方体产生一种透视的感觉，好像摄影机推镜和拉镜一样。
二，我们希望在程序加上键盘交互？
this.addEventListener(KeyboardEvent.KEY_DOWN,keydown);
ui.setFocus();
三,如何进行皮肤贴图？
我们希望为立方体创建贴图
[Embed(source="skin.jpg")]
[Bindable]
public var imgCls:Class;// 嵌入图片资源
private var bt:Bitmap=new imgCls() as Bitmap;
使用Embed外部嵌入一张名为skin.jpg的图片转换一个Class类。这样我们可以转换我们希望的位图类。
接下来，使用sandy类为我们提供的位图贴图材质，把我的之前转换的位图bt.bitmapData，作为参传递过去。
var material2:Material=new BitmapMaterial(bt.bitmapData);//创建图片贴图
app2=new Appearance(material2); //指定表面材质
四。如何进行换皮肤？
在程序里面放入一个combox
使用combox 选择我们的皮肤
<mx:ComboBox id="mycombox" change="seletSkin(event)" focusEnabled="false" dataProvider="{myxml..myskin}" x="594" y="66"></mx:ComboBox>
利用combox选择来切换皮肤。
效果图：
下面是一个利用flash来创建一个图形
