Flash制作3D類動(dòng)畫(huà)的教程

發(fā)布時(shí)間：2009-11-25 00:23:57 作者：佚名

最近對(duì)Flash3D效果產(chǎn)生了興趣，下決心學(xué)習(xí)一下Sandy。一下將學(xué)習(xí)的體會(huì)的感受寫(xiě)下來(lái)，一來(lái)幫助大家熟悉Sandy，二來(lái)加強(qiáng)自己的記憶。

最近對(duì)Flash3D效果產(chǎn)生了興趣，下決心學(xué)習(xí)一下Sandy。一下將學(xué)習(xí)的體會(huì)的感受寫(xiě)下來(lái)，一來(lái)幫助大家熟悉Sandy，二來(lái)加強(qiáng)自己的記憶。

先從基礎(chǔ)開(kāi)始吧（基礎(chǔ)解釋轉(zhuǎn)自Flash3D研究所）

原理解釋：

窗口：
用戶觀看的窗口，簡(jiǎn)單的可以想成就是flash里面的畫(huà)布大小。窗口也可以理解成渲染的尺寸，否則畫(huà)面就無(wú)限大了場(chǎng)景：
場(chǎng)景是指整個(gè)三維的場(chǎng)景。攝像機(jī)：
很多人要問(wèn)，為什么有了攝像機(jī)還要窗口呢？攝像機(jī)是用來(lái)拍畫(huà)面的，看畫(huà)面還是得電視機(jī)/窗口不是嗎，^_^
渲染器：如果沒(méi)有這個(gè)東西，所有以上的東西都只是數(shù)據(jù)，渲染器就是把所有數(shù)據(jù)變成圖像的東西。

下面這幅圖雖然并不算準(zhǔn)確的表述，但希望能幫助我們理解：

然后開(kāi)始寫(xiě)代碼了（目前感覺(jué)Sandy的代碼還是比較簡(jiǎn)潔的）：

要先將Sandy的類庫(kù)下載下來(lái)哦?。。ㄔ谶@里要謝謝 tenzn 的提醒，呵呵。）
官方網(wǎng)站：http://www.flashsandy.org
下載地址：http://sandy.googlecode.com/files/Sandy3-1-1_src_rev1008.zip

先嘗試創(chuàng)建一個(gè)立方體。

package
{
import flash.display.Sprite;
import flash.events.Event;
import sandy.core.Scene3D;
import sandy.core.scenegraph.*;
import sandy.primitive.*;

/**
* ...
* @author ever5u
*/
public class fuxi extends Sprite
{
private var scene:Scene3D;
private var camera:Camera3D;
public function fuxi() {
//創(chuàng)建一個(gè)攝像機(jī)
camera = new Camera3D(300, 300);
camera.z = -300;
//創(chuàng)建一個(gè) Group
var root:Group = createScene();
//創(chuàng)建場(chǎng)景
scene = new Scene3D( "scene", this, camera, root );
//創(chuàng)建實(shí)時(shí)偵聽(tīng)
addEventListener( Event.ENTER_FRAME, enterFrameHandler );
}
var box = new Box("box", 100, 100, 100);
public function createScene() {
var g:Group = new Group();
g.addChild( box );
return g;
}
public function enterFrameHandler(_evt:Event) {
box.rotateX = mouseX;
box.rotateY = mouseY;
scene.render();
}
}

}

成功了，效果如下：

接下來(lái)嘗試給這個(gè)立方體著色。

這里需要用到 sandy.materials.attributes 類。

其中為線著色的方法 LineAttributes 有三個(gè)屬性：
LineAttributes(p_nThickness:uint = 1, p_nColor:uint = 0, p_nAlpha:Number = 1)

p_nThickness:uint (default = 1) — 線的粗細(xì) p_nColor:uint (default = 0) — 線的顏色 p_nAlpha:Number (default = 1) — 線的透明度

這里設(shè)置是否使用光，需要先設(shè)置 lightingEnable = true 。
LightAttributes(p_bBright:Boolean = false, p_nAmbient:Number = 0.3)

p_bBright:Boolean (default = false) — 設(shè)置是否支持光 p_nAmbient:Number (default = 0.3) — 設(shè)置光的亮度（數(shù)值范圍是 0 - 1）

為立方體渲染用
ColorMaterial(p_nColor:uint = 0x00, p_nAlpha:Number = 1, p_oAttr:MaterialAttributes = null)

p_nColor:uint (default = 0x00) — 顏色 p_nAlpha:Number (default = 1) — 透明度 p_oAttr:MaterialAttributes (default = null) — 線設(shè)置

代碼如下：

package
{
import flash.display.Sprite;
import flash.events.Event;
import sandy.core.Scene3D;
import sandy.core.scenegraph.*;
import sandy.primitive.*;
import sandy.materials.*;
import sandy.materials.attributes.*;

/**
* ...
* @author ever5u
*/
public class fuxi extends Sprite
{
private var scene:Scene3D;
private var camera:Camera3D;
public function fuxi() {
//創(chuàng)建一個(gè)攝像機(jī)
camera = new Camera3D(300, 300);
camera.z = -300;
//創(chuàng)建一個(gè) Group
var root:Group = createScene();
//創(chuàng)建場(chǎng)景
scene = new Scene3D( "scene", this, camera, root );
//創(chuàng)建實(shí)時(shí)偵聽(tīng)
addEventListener( Event.ENTER_FRAME, enterFrameHandler );
}
var box = new Box("box", 100, 100, 100);
public function createScene() {
var g:Group = new Group();
//設(shè)置立方體的顏色、線條色和環(huán)境光
material.lightingEnable = true;
var materialAttr:MaterialAttributes = new MaterialAttributes(
new LineAttributes( 0.5, 0x000000, 0.4 ),
new LightAttributes( true, 0.2)
);
var material:Material = new ColorMaterial( 0xCC3300, 1, materialAttr );
var app:Appearance = new Appearance( material );

box.appearance = app;

g.addChild( box );
return g;
}
public function enterFrameHandler(_evt:Event) {
box.rotateX = mouseX;
box.rotateY = mouseY;
scene.render();
}
}

}

這是效果：

繼續(xù)試試看用圖片為立方體貼圖。

首先導(dǎo)入一張位圖到庫(kù)里，并聲明類名為 MyPalm

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.net.URLRequest;
import sandy.core.Scene3D;
import sandy.core.scenegraph.*;
import sandy.primitive.*;
import sandy.materials.*;
import sandy.materials.attributes.*;

/**
* ...
* @author ever5u
*/
public class fuxi extends Sprite
{
private var scene:Scene3D;
private var camera:Camera3D;
public function fuxi() {
//創(chuàng)建一個(gè)攝像機(jī)
camera = new Camera3D(300, 300);
camera.z = -300;
//創(chuàng)建一個(gè) Group
var root:Group = createScene();
//創(chuàng)建場(chǎng)景
scene = new Scene3D( "scene", this, camera, root );
//創(chuàng)建實(shí)時(shí)偵聽(tīng)
addEventListener( Event.ENTER_FRAME, enterFrameHandler );
}
var box = new Box("box", 100, 100, 100);
public function createScene() {
var g:Group = new Group();
//設(shè)置立方體的貼圖
var bitmap:BitmapData = new MyPalm(0, 0);
var material:Material = new BitmapMaterial( bitmap );
var app:Appearance = new Appearance( material );

box.appearance = app;

g.addChild( box );
return g;
}
public function enterFrameHandler(_evt:Event) {
box.rotateX = mouseX;
box.rotateY = mouseY;
scene.render();
}
}

}