Papervision3D入門

  ここでは、Papervisionの入門として、3Ｄ空間に3Ｄモデルが1つだけという、単純で簡単にできる下の[カラフルな立方体]の作例を通してPapervisionの基本を勉強して行きたいと思います。

【カラフルな立方体】

INFO: Papervision3D Public Beta 2.0 - Great White (December 3rd, 2008)

   この作品を作成するのに必要なPapervisionの概念は下記の6つです。この6つの概念を理解できれば、あとはアイディアと工夫しだいで、面白い作品ができるのではないかと思います。

 

  1. 3Dモデル（= 3Dオブジェクト）
  2. マテリアル（≒テクスチャ）
  3. 3Dシーン
  4. カメラ
  5. ビューポート
  6. レンダラー

3Dモデル(3Dmodel)

3Dモデルというと、3DCGの経験がない方にとっては、どのように作成したら良いのかわからないと思いますが、papervisionではあらかじめ、プリミティブオブジェクトと呼ばれるいくつかの3Ｄモデルを用意しています。これらを利用するだけでも、アイディアと工夫次第で面白い作品ができると思います。もちろんPapervisionでは、3ds Maxなどの3DCGソフトウエアを使用して、自分の好きな3Dモデルを作成し、そのデータを読み込んで利用する事もできます。

 

※このPapervisionの勉強部屋では”3Dオブジェクト”という言葉は、ActionScriptの説明で使うオブジェクト指向のオブジェクトと明確に区別するために使用せず、基本的に”3Dモデル”という言葉を使って行きます。

 

マテリアル(material)

  マテリアルは素材・材質という意味で、3DCGでは一般的に3Dモデルの表面を覆う絵（模様）・色だけでなく、光の反射や陰の具合などを設定しますが、Papervisionにおいては、私はテクスチャとほとんど同義と捉えています。マテリアルやテクスチャが何かという議論は置いておいて、ここでは3Dモデルの表面に色や、絵（模様）をつけたい場合にマテリアルを利用するという事を理解しておけば良いかと思います。

 

3Dシーン(3Dscene)

3Dモデルを配置する空間です。この3D空間に、3Dモデルを配置する事により、空間と物が存在する3DCGの世界が作られます。

 

カメラ(Camera)

 3Dモデルと3Dシーンで3DCGの世界を作成したら、それを見るためにカメラが必要です。私達は作成した3ＤＣＧの世界をカメラの視点で見ることになります。

 

ビューポート(Viewport)

  カメラで撮影した3ＤＣＧの世界は、何かに投影しないと私達は見ることができません。例えばテレビ局でカメラが撮影した映像は、液晶ディスプレイやブラウン管に映し出される事により目にする事ができるのと一緒です。この例えで、ディスプレイやブラウン管の役割をするのがビューポートです。

 

レンダリング(Rendering)

これは3DCGでよく耳にする用語です。カメラで撮影した3DCGの世界をビューポートに映し出すためには、3DCGではレンダリングという計算工程が必要になります。3Dシーンに配置されている3Dモデルをカメラの視点から見るとビューポートにどのように映し出されるのか計算する必要があるのです。計算するというと、難しい計算のように思われますが、レンダリングに必要な情報（3Dシーン、カメラ、ビューポート等の情報）がそろっていればあとはPapervisionが行ってくれます。

 

 

カラフルな立方体ソースコード

//importするpapervisionのクラス
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;

 

//グローバル変数
var scene:Scene3D;
var viewport:Viewport3D;
var camera:Camera3D;
var render:BasicRenderEngine;
var cube:Cube;

 

init3d();

 

function init3d():void{
         
    // cubeに着色するためのマテリアルを作成
    var material_front:ColorMaterial = new ColorMaterial(0x00ff00);
    var material_back:ColorMaterial = new ColorMaterial(0xfe9926);
    var material_right:ColorMaterial = new ColorMaterial(0x89bdde);
    var material_left:ColorMaterial = new ColorMaterial(0x0000ff);
    var material_top:ColorMaterial = new ColorMaterial(0xff0000);
    var material_bottom:ColorMaterial = new ColorMaterial(0x000000);  
  
    //マテリアルのリストを作成
    var material_list:MaterialsList = new MaterialsList({
                                                       front : material_front,
                                                       back : material_back,
                                                       right: material_right,
                                                       left : material_left,
                                                       top : material_top,
                                                       bottom : material_bottom
                                                       });
  
    // プリミティブのキューブを作成し、座標を設定する。
    cube = new Cube(material_list,150,150,150);
    cube.x =  0;
    cube.y =  0;
    cube.z =  0;
 
    // シーンを作成しキューブをシーンに加える
    scene = new Scene3D();
    scene.addChild(cube);
  
    // カメラの作成とカメラ座標の設定
    camera = new Camera3D();
    camera.x = 500;
    camera.y = 0;
    camera.z = 500;
      
    //ビューポートを作成
    viewport = new Viewport3D(200, 200);
    this.addChild(viewport);

    // レンダラの作成
    render = new BasicRenderEngine();  
                
     //ENTER_FRAMEにてレンダリングを行う
    this.addEventListener(Event.ENTER_FRAME, render3D);
  
}

 

function render3D(event:Event):void {
  
    //カメラの上下移動
    camera.y =  (mouseY - stage.stageHeight * 0.5) *10 ;
    camera.x = (mouseX - stage.stageWidth * 0.5) * 5  ;
    
    // カメラが中央のCubeを見るように設定してレンダリング
    camera.lookAt(cube);
    render.renderScene(scene, camera, viewport);
}