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

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

我要評(píng)論

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

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

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

原理解釋：

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

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

然后開始寫代碼了（目前感覺Sandy的代碼還是比較簡潔的）：

要先將Sandy的類庫下載下來哦！?。ㄔ谶@里要謝謝 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)建場景
scene = new Scene3D( "scene", this, camera, root );
//創(chuàng)建實(shí)時(shí)偵聽
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();
}
}

}

成功了，效果如下：

接下來嘗試給這個(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)建場景
scene = new Scene3D( "scene", this, camera, root );
//創(chuàng)建實(shí)時(shí)偵聽
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)入一張位圖到庫里，并聲明類名為 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)建場景
scene = new Scene3D( "scene", this, camera, root );
//創(chuàng)建實(shí)時(shí)偵聽
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();
}
}

}

效果：

#p#

繼續(xù)上次的學(xué)習(xí)，接下來要試試攝像機(jī)的移動(dòng)了。
這里需要涉及幾個(gè)概念，攝像機(jī)的坐標(biāo)（x, y, z）和視覺角度（LookAt）
攝像機(jī)的位置可以使用（x, y, z）來定位；
視覺角度可以定義如何通過窗口來看場景。
lookAt(p_nX:Number, p_nY:Number, p_nZ:Number)
如：lookAt(0,0,0);//可以理解為通過攝像機(jī)的位置看場景。

攝像機(jī)的移動(dòng)方式比較有意思，如果直接修改x、y、z坐標(biāo)，視覺效果會(huì)與現(xiàn)實(shí)看到的情況相同；
而tilt、pan則是與場景平行移動(dòng)；
roll是以z軸移動(dòng)，通過攝像機(jī)視野看上去是攝像機(jī)的旋轉(zhuǎn)效果。

額外說一下 Line3D 是在場景中繪制了線段，這里用做參考線，代碼不難理解我就不過多解釋了。

代碼如下：

package { import flash.display.Sprite; import flash.events.*; import flash.ui.*; 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.*; import sandy.core.data.*; /** * ... * @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.x = 100; camera.y = 100; camera.z = -300; camera.lookAt(0,0,0); //創(chuàng)建一個(gè) Group var root:Group = createScene(); //創(chuàng)建場景 scene = new Scene3D( "scene", this, camera, root ); //創(chuàng)建實(shí)時(shí)偵聽 addEventListener( Event.ENTER_FRAME, enterFrameHandler ); stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); } var box = new Box("box", 100, 100, 100); var Plane:Plane3D; public function createScene() { var g:Group = new Group(); //在場景畫一個(gè)坐標(biāo)定位點(diǎn) Plane = new Plane3D("Texture", 300, 300); var myXLine:Line3D = new Line3D( "x-coord", new Point3D( -20, 0, 0), new Point3D( 20, 0, 0 )); var myYLine:Line3D = new Line3D( "y-coord", new Point3D(0, -20, 0), new Point3D( 0, 20, 0 )); var myZLine:Line3D = new Line3D( "z-coord", new Point3D(0, 0, -20), new Point3D( 0, 0, 20 )); g.addChild(myXLine); g.addChild(myYLine); g.addChild(myZLine); g.addChild( box ); return g; } public function enterFrameHandler(_evt:Event) { box.rotateX = mouseX; box.rotateY = mouseY; scene.render(); } public function keyPressed(_evt:KeyboardEvent):void { switch(_evt.keyCode) { case Keyboard.UP: camera.tilt += 2; //camera.y -= 2; break; case Keyboard.DOWN: camera.tilt -= 2; //camera.y += 2; break; case Keyboard.RIGHT: camera.pan -= 2; //camera.x += 2; break; case Keyboard.LEFT: camera.pan += 2; //camera.x -= 2; break; case Keyboard.CONTROL: camera.roll += 2; break; case Keyboard.PAGE_DOWN: camera.z -= 5; break; case Keyboard.PAGE_UP: camera.z += 5; break; } } } }

效果：

還有場景自適應(yīng)的問題，需要說明一下。

攝像機(jī)的鏡頭可視角度使用 fov（vertical field of view angle）來定義。

換算公式：

var fl:Numer = (viewport.height / 2) / Math.tan (camera.fov / 2 * (Math.PI / 180));

代碼：

package
{
import flash.display.Sprite;
import flash.events.*;
import flash.ui.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import sandy.core.Scene3D;
import sandy.core.scenegraph.*;
import sandy.primitive.*;
import sandy.materials.*;
import sandy.materials.attributes.*;
import sandy.core.data.*;

/**
* ...
* @author ever5u
*/
public class fuxi extends Sprite
{
private var scene:Scene3D;
private var camera:Camera3D;
public function fuxi() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//創(chuàng)建一個(gè)攝像機(jī)
camera = new Camera3D(300, 300);
camera.x = 100;
camera.y = 100;
camera.z = -300;
camera.lookAt(0,0,0);
//創(chuàng)建一個(gè) Group
var root:Group = createScene();
//創(chuàng)建場景
scene = new Scene3D( "scene", this, camera, root );
//創(chuàng)建實(shí)時(shí)偵聽
addEventListener( Event.ENTER_FRAME, enterFrameHandler );
stage.addEventListener (Event.RESIZE, onResize);
}
var box = new Box("box", 100, 100, 100);
var Plane:Plane3D;
public function createScene() {
var g:Group = new Group();

//在場景畫一個(gè)坐標(biāo)定位點(diǎn)
Plane = new Plane3D("Texture", 300, 300);
var myXLine:Line3D = new Line3D( "x-coord", new Point3D( -20, 0, 0), new Point3D( 20, 0, 0 ));
var myYLine:Line3D = new Line3D( "y-coord", new Point3D(0, -20, 0), new Point3D( 0, 20, 0 ));
var myZLine:Line3D = new Line3D( "z-coord", new Point3D(0, 0, -20), new Point3D( 0, 0, 20 ));

g.addChild(myXLine);
g.addChild(myYLine);
g.addChild(myZLine);
g.addChild( box );
return g;
}
public function enterFrameHandler(_evt:Event) {
box.rotateX = mouseX;
box.rotateY = mouseY;
scene.render();
}
function onResize (e:Event):void{
// 獲取場景寬高
var w:Number = stage.stageWidth;
var h:Number = stage.stageHeight;
// 設(shè)置視野寬高
scene.camera.viewport.width = w;
scene.camera.viewport.height = h;
// 獲取物體box與攝像機(jī)間的距離
var d:Number = box.getPosition ("camera").getNorm ();
// 保持?jǐn)z像機(jī)觀看比例
scene.camera.fov = 2 * Math.atan2 (h / 2, d) * (180 / Math.PI);
// 執(zhí)行渲染
scene.render();
}
}

}