ChaCha: Sandy3D

顯示具有 Sandy3D 標籤的文章。顯示所有文章

2009年8月31日星期一

Tutorial 04b - Sprite2D

Sprite2D - 一個簡化版的顯示方示，用以取代 3D 顯示物件，可以省去許多額外的計算及資源。此物件在場景中，永遠是面對著 Camera 的。舉例來說，天上的星星、水中的魚、森林裡的樹，都可以利用 Sprite2D 來顯示。

重點API：
sandy.util.LoaderQueue
sandy.core.scenegraph.Sprite2D
sandy.events.QueueEvent

package
{
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import sandy.core.Scene3D;
import sandy.core.scenegraph.Camera3D;
import sandy.core.scenegraph.Group;
import sandy.core.scenegraph.Sprite2D;
import sandy.events.QueueEvent;
import sandy.util.LoaderQueue;
public class Example004b extends Sprite
{
private var scene:Scene3D;
private var camera:Camera3D;
// Utility class for 載入外部資源
private var queue:LoaderQueue;
/** numTree 將影響 CPU 的效能 **/
private var numTree:Number = 50;
public function Example004b()
{
// 產生一 LoaderQueue 物件
queue = new LoaderQueue();
// 將欲載入資源之Unique名稱及路徑，加入 queue 中
queue.add("tree", new URLRequest("asset/tree.gif"));
// 為 queue 物件新增監聽事件 - 當資源載入完成時，
// 執行 loadComplete Function
queue.addEventListener(
QueueEvent.QUEUE_COMPLETE,
loadComplete);
// 為 queue 物件新增監聽事件 - 當載入資源發生錯誤時，
// 執行 loadError Function
queue.addEventListener(
QueueEvent.QUEUE_LOADER_ERROR,
loadError);
// 開始載入外部資源
queue.start();
}
public function loadComplete(evt:QueueEvent):void
{
// 產生 Camera3D 物件
camera = new Camera3D(600, 300);
camera.y = 10;
camera.z = -300;
// 產生 Group 物件
var root:Group = createScene();
// 產生 Scene3D 物件，並將 Camera3D 及 Group 加入場景
scene = new Scene3D("scene", this, camera, root);
// 設定當物件超出場景之外時，將不會被畫出
scene.rectClipping = true;
addEventListener(Event.ENTER_FRAME,
enterFrameHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN,
keyPressHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE,
mouseMoveHandler);
}
public function loadError(evt:QueueEvent):void
{
trace("load resource error");
}
private function createScene():Group
{
// 產生根 Group 物件
var g:Group = new Group();
// 產生 Sprite2D 物件
for (var i:Number = 0; i <>
{
// 將載入 queue 物件中的資源取出
var bit:Bitmap =
new Bitmap(queue.data["tree"].bitmapData);
// 產生 Sprite2D 物件，並設置其參數，分別為
// Unique名稱，顯示物件 (DisplayObject) 及縮放比率
var s:Sprite2D = new Sprite2D("tree" + i, bit, 1);
// 隨機設定 Sprite2D 的 x, y, z 座標位置
s.x = Math.random() * 600 - 300;
s.y = 0;
s.z = Math.random() * 600;
g.addChild(s);
}
return g;
}
private function enterFrameHandler(evt:Event):void
{
scene.render();
}
private function keyPressHandler(evt:KeyboardEvent):void
{
// 調整 camera 鏡頭之遠近
switch(evt.keyCode)
{
case KeyboardEvent.KEY_UP:
camera.moveForward(5);
break;
case KeyboardEvent.KEY_DOWN:
camera.moveForward( -5);
break;
}
}
private function mouseMoveHandler(evt:MouseEvent):void
{
// 隨滑鼠移動設置 camera 之方向
camera.pan = (evt.stageX - 300 / 2) / 10;
camera.tilt = (evt.stageY - 300 / 2) / 20;
}
}
}

程式碼出處：http://www.flashsandy.org/tutorials/3.0/sandy_cs3_tut042

2009年7月22日星期三

Tutorial 04a - 燈光的使用

重點API：
sandy.primitive.Box;
sandy.primitive.Cylinder;
sandy.primitive.PrimitiveMode;
sandy.primitive.Sphere;

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import sandy.core.Scene3D;
import sandy.core.scenegraph.Camera3D;
import sandy.core.scenegraph.Group;
import sandy.core.scenegraph.TransformGroup;
import sandy.materials.Appearance;
import sandy.materials.attributes.CylinderEnvMap;
import sandy.materials.attributes.LightAttributes;
import sandy.materials.attributes.LineAttributes;
import sandy.materials.attributes.MaterialAttributes;
import sandy.materials.ColorMaterial;
import sandy.materials.Material;
import sandy.primitive.Box;
import sandy.primitive.Cylinder;
import sandy.primitive.PrimitiveMode;
import sandy.primitive.Sphere;
public class Example004a extends Sprite
{
private var scene:Scene3D;
private var camera:Camera3D;
private var tg:TransformGroup;
// 設定燈光 x, y, z 軸參數
private var lightX:Number = 0;
private var lightY:Number = 0;
private var lightZ:Number = 10;
public function Example004a()
{
camera = new Camera3D(300, 300);
camera.z = -400;
var root:Group = createScene();
scene = new Scene3D("scene", this, camera, root);
// 設定場景燈光的方向位置
scene.light.setDirection(lightX, lightY, lightZ);
addEventListener(Event.ENTER_FRAME,
enterFrameHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN,
keyPressed);
}
private function createScene():Group
{
var g:Group = new Group();
tg = new TransformGroup();
var materialAttr:MaterialAttributes =
new MaterialAttributes(
new LineAttributes(0, 0x2111BB, 0),
new LightAttributes(true, 0.1)
);
var material:Material = new ColorMaterial(
0xFFCC33, 1, materialAttr
);
material.lightingEnable = true;
var app:Appearance = new Appearance(material);
var materialAttr2:MaterialAttributes =
new MaterialAttributes(
new LineAttributes(0, 0x2111BB, 0),
new LightAttributes(true, 0.1)
);
var material2:Material = new ColorMaterial(
0xCC0000, 1, materialAttr
);
material2.lightingEnable = true;
var app2:Appearance = new Appearance(material2);
var materialAttr3:MaterialAttributes =
new MaterialAttributes(
new LineAttributes(0, 0x2111BB, 0),
new LightAttributes(true, 0.1)
);
var material3:Material = new ColorMaterial(
0x008AE6, 1, materialAttr
);
material3.lightingEnable = true;
var app3:Appearance = new Appearance(material3);
// 產生一 Box 物件，並設定其參數，分別為：
// 識別名稱、寬、高、深度、face generation 及 Quility
var table:Box = new Box(
"table", 10, 150, 200, PrimitiveMode.QUAD, 1
);
//table.enableBackFaceCulling = false;
// 設定是否容許使用者改變呈現此 table 的方式
table.useSingleContainer = false;
// 設定 table 的外觀
table.appearance = app;
// 旋轉 table
table.rotateY = 90;
table.rotateX = 90;
// 產生一 Cylinder 物件，並設定其參數，分別為
// 識別名稱、半徑及高
var leg01:Cylinder = new Cylinder("leg01", 5, 80);
// 設定 leg01 的外觀
leg01.appearance = app;
// 設定 leg01 的 x，y，z 座標
leg01.x = -80;
leg01.y = -45;
leg01.z = 50;
var leg02:Cylinder = new Cylinder("lig02", 5, 80);
leg02.appearance = app;
leg02.x = 80;
leg02.y = -45;
leg02.z = 50;
var leg03:Cylinder = new Cylinder("leg03", 5, 80);
leg03.appearance = app;
leg03.x = -80;
leg03.y = -45;
leg03.z = -50;
var leg04:Cylinder = new Cylinder("leg04", 5, 80);
leg04.appearance = app;
leg04.x = 80;
leg04.y = -45;
leg04.z = -50;
// 產生一 Sphere 物件，並設定其參數，分別為：
// 識別名稱、半徑、水平切割數及垂直切割數
var mySphere:Sphere = new Sphere("theSphere", 20, 20, 8);
mySphere.useSingleContainer = true;
mySphere.appearance = app2;
mySphere.y = 25;
mySphere.x = -30;
var myBox:Box = new Box(
"theBox", 60, 60, 60, PrimitiveMode.TRI, 3
);
myBox.useSingleContainer = true;
myBox.appearance = app3;
myBox.rotateY = 30;
myBox.x = 40;
myBox.y = 35;
tg.addChild(table);
tg.addChild(leg01);
tg.addChild(leg02);
tg.addChild(leg03);
tg.addChild(leg04);
tg.addChild(mySphere);
tg.addChild(myBox);
tg.rotateX = 5;
g.addChild(tg);
return g;
}
private function enterFrameHandler(evt:Event):void
{
// 將場景顯示快取設定為 false
scene.render(false);
}
private function keyPressed(evt:KeyboardEvent):void
{
switch(evt.keyCode)
{
case Keyboard.PAGE_DOWN:
// 減少場景燈光的亮度
scene.light.setPower(scene.light.getPower() - 5);
break;
case Keyboard.PAGE_UP:
// 增加場景燈光的亮度
scene.light.setPower(scene.light.getPower() + 5);
break;
case Keyboard.UP:
lightY += 10;
scene.light.setDirection(lightX, lightY, lightZ);
break;
case Keyboard.DOWN:
lightY -= 10;
scene.light.setDirection(lightX, lightY, lightZ);
break;
case Keyboard.RIGHT:
lightX += 10;
scene.light.setDirection(lightX, lightY, lightZ);
break;
case Keyboard.LEFT:
lightX -= 10;
scene.light.setDirection(lightX, lightY, lightZ);
break;
}
}
}
}

產出：

程式碼出處：http://www.flashsandy.org/tutorials/3.0/sandy_cs3_tut041

2009年7月14日星期二

Tutorial 04 - Start Moving

重點API：
sandy.core.scenegraph.TransformGroup
sandy.primitive.Cone
sandy.primitive.Hedra

package
{
import flash.display.Sprite;
import flash.events.*;
import flash.ui.*;
import sandy.core.Scene3D;
import sandy.core.data.*;
import sandy.core.scenegraph.*;
import sandy.materials.*;
import sandy.materials.attributes.*;
import sandy.primitive.*;
public class Example004 extends Sprite
{
private var scene:Scene3D;
private var camera:Camera3D;
private var tg:TransformGroup;
private var myCone:Cone;
private var myHeadra:Hedra;
public function Example004()
{
// 產生 camera 物件
camera = new Camera3D(300, 300);
camera.x = 100;
camera.y = 100;
camera.z = -400;
camera.lookAt(0, 0, 0);
// 產生顯示物件群組
var root:Group = createScene();
// 產生場景物件，並將 camera 物件及顯示
// 物件群組加到場景中
scene = new Scene3D("scene", this, camera, root);
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
}
private function createScene():Group
{
var g:Group = new Group();
// 在每個座標軸，產生一線性物件
var myXLine:Line3D = new Line3D("x-coord", new Point3D(-50, 0, 0),
new Point3D(50, 0, 0));
var myYLine:Line3D = new Line3D("y-coord", new Point3D(0, -50, 0),
new Point3D(0, 50, 0));
var myZLine:Line3D = new Line3D("z-coord", new Point3D(0, 0, -50),
new Point3D(0, 0, 50));
// 產生一移動群組物件, 並為其命名
tg = new TransformGroup("myGroup");
// 產生Cone object, 並設定其參數，分別為：
// 識別名稱, 半徑及高
myCone = new Cone("theObj1", 50, 100);
// 產生 Hedra objecct，並設定其參數，分別為：
// 識別名稱、高、寬及深度
myHeadra = new Hedra("theObj2", 80, 60, 60);
// 分別將 Cone 物件移到左邊， Hedra 物件移到右邊
myCone.x = -160;
myCone.z = 150;
myHeadra.x = 90;
// 產生 materialAttributes物件
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);
material.lightingEnable = true;
var app:Appearance = new Appearance(material);
myCone.appearance = app;
myHeadra.appearance = app;
// 將兩個 objects 加入移動群組物件中
tg.addChild(myCone);
tg.addChild(myHeadra);
// 將所有的物件加入 Group 物件中
g.addChild(tg);
g.addChild(myXLine);
g.addChild(myYLine);
g.addChild(myZLine);
return g;
}
private function enterFrameHandler(evt:Event):void
{
// 調整 Headra 與 Cone 沿Y軸轉向的幅度
myHeadra.pan += 4;
myCone.pan += 4;
scene.render();
}
private function keyPressed(evt:KeyboardEvent):void
{
switch(evt.keyCode)
{
case Keyboard.UP:
tg.y += 2;
break;
case Keyboard.DOWN:
tg.y -= 2;
break;
case Keyboard.RIGHT:
tg.roll += 2;
break;
case Keyboard.LEFT:
tg.roll -= 2;
break;
}
}
}
}

產出：

程式碼出處：http://www.flashsandy.org/tutorials/3.0/sandy_cs3_tut04

2009年6月24日星期三

Tutorial 03a: Camera 與 Screen Resize

在Sandy3D裡Camera有一屬性, fov (vertical field of view angle)，代表了垂直視野的視角與視點高度的關係，如下圖所示：

focal length的計算公式為：
var fl:Numer = (viewport.height / 2) / Math.tan (camera.fov / 2 * (Math.PI / 180));
任何位於 wz = fl 的 plane 後面的物體，看起來都會比實際上小，而位於前面的，就會看起來比較大。