遊戲技術相關研究

2012年8月8日 星期三

【Away3D】教學 - 秀3ds檔案

下午4:28 Posted by Channel Chung No comments

點圖或點我執行

 程式一開始我們先設定view大小,然後設定反鋸齒(_view.antiAlias)。。。

// 設定view.
_view = new View3D();
_view.width  = width;
_view.height = height;
_view.backgroundColor = 0x00ff00;
  
// 設定反鋸齒(0、2、4、16).
_view.antiAlias = 16;

接下來繼續設定攝影機。。。再設定前先說明一下攝影機原理,參考下圖:


說明:
(px,py,pz) 等於 _view.camera.position
view ray   等於 _view.camera.lookAt
nearDist   等於 _view.camera.lens.near
farDist      等於_view.camera.lens.far

這邊敘述了攝影機的可視範圍,在這範圍外的物件都不會被成像。。。

// 設定攝影機.
_view.camera.position  = new Vector3D( 0,    0,   0);
_view.camera.lookAt      (new Vector3D( 0, -180, 170));
_view.camera.y          =  1120.0;
_view.camera.z          = -1420.0;
_view.camera.lens.near  =    0.8;
_view.camera.lens.far   = 6000.0;
// 加入場景.
addChild(_view);
// 加入狀態顯示.
addChild(new AwayStats(_view));

Away3D是採用左手座標,所以Vector3D內的座標就是依照左手座標為基準算出來的位置。。


移動攝影機。。。到以下位置:
_view.camera.y  = 1120.0;
_view.camera.z  = -1420.0; 

監聽部分設定了,每次進入Frame處理事件,滾動滑鼠滾輪事件跟鍵盤輸入事件。。。

// 設定監聽事件.
stage.addEventListener  (      Event.ENTER_FRAME, onEenterFrame);
stage.addEventListener ( MouseEvent.MOUSE_WHEEL, onMouseWheel);   
stage.addEventListener ( KeyboardEvent.KEY_DOWN, onKeyboard);

接下來是設定燈光,這邊設定了兩盞燈光。。。
然後將兩盞燈光放入燈光容器(_lightPicker),並將燈光加入場景。。。

// 設定燈光.
var light1:DirectionalLight = new DirectionalLight(0, -2, 1);
var light2:DirectionalLight = new DirectionalLight(0, 2, -2);
_lightPicker = new StaticLightPicker([light1, light2]);
_view.scene.addChild(light1);
_view.scene.addChild(light2);

 接下來就是重頭戲了,將3DS加到場景,這邊設定載入完成後會去執行(onMeshComplete)函數,另外在關閉自動貼圖(new AssetLoaderContext(false))。。。

// 載入3ds.
Loader3D.enableParser(Max3DSParser);
_loader = new Loader3D();
_loader.addEventListener(AssetEvent.MESH_COMPLETE, onMeshComplete);
_loader.loadData(MyMesh, new AssetLoaderContext(false), null, new Max3DSParser());
_loader.scale(1);_view.scene.addChild(_loader);

設定貼圖會受燈光容器內的燈光影響,並將貼圖鏡面強度設為0.9。。。
然後將貼圖貼上網格。。

private function onMeshComplete(event:AssetEvent):void{
 var mesh:Mesh = null;
 // 設定貼圖1.
 _m1.specular = 0.9;
 _m1.lightPicker = _lightPicker;
 // 設定貼圖2.
 _m2.specular = 0.9;
 _m2.lightPicker = _lightPicker;
 // 設定貼圖3.
 _m3.specular = 0.9;
 _m3.lightPicker = _lightPicker;
 
 // 將貼圖貼到網格.
 for (var i:int = 0; i < _loader.numChildren; i++){
  mesh = Mesh(_loader.getChildAt(i));
  mesh.material = _m1;
 }
}

以下是按下1~3鍵後會更換貼圖的處理。。。

private function onKeyboard(e:KeyboardEvent):void{
    var mesh:Mesh = null;
    var i:int     = 0;
    switch (e.keyCode) {
     // 按下1鍵,處理換貼圖1.
     case Keyboard.NUMBER_1:
      for (i = 0; i < _loader.numChildren; i++){
       mesh = Mesh(_loader.getChildAt(i));
       mesh.material = _m1;
      }
      break;

     // 按下2鍵,處理換貼圖2.
     case Keyboard.NUMBER_2:
      for (i = 0; i < _loader.numChildren; i++){
       mesh = Mesh(_loader.getChildAt(i));
       mesh.material = _m2;
      }
      break;

     // 按下3鍵,處理換貼圖3.
     case Keyboard.NUMBER_3:
      for (i = 0; i < _loader.numChildren; i++){
        mesh = Mesh(_loader.getChildAt(i));
        mesh.material = _m3;
      }
      break;
  }
}

以下會在每個Frame處理模型自轉。。。
private function onEenterFrame(event:Event):void{
  // 旋轉物件Y軸.
  _loader.rotationY += 0.5;
  _view.render();
}

最後設定滾動滑鼠滾輪後移動攝影機。。。
private function onMouseWheel(event:MouseEvent):void{   
  var delta:Number = event.delta;
  if (delta < 0){
    _view.camera.z -= 40;
    _view.camera.y += 40;
  }else if (delta > 0){
    _view.camera.z += 40;
    _view.camera.y -= 40;
  }
}

程式部分大概就這樣,以下說明一下環境設定,小弟用的是Flash Builder 4.6,所以會以這個版本的設定方式為主,首先先加入(-swf-version=13)。。。參考下圖:



再來請開啟(Away3d_show_3ds.html)檔案,在48行下加入(params.wmode="direct";),85、91行下加入(<param value='direct' name='wmode'>)。。。


呼~~打完收工。。。希望大家都能看的懂囉,原始碼在這裡下載。。

0 意見:

張貼留言