ビューポート
ビューポートとは概念的にはカメラで撮影した3DCGの世界を投影し、私達の目に見える形で表示してくれるテレビのブラウン管のような役割を果たします。
ActionScript的には、レンダリング結果を表示させるDisplayObjectとしての役割と、X軸、Y軸、z軸がある3D空間の役割を果たします。
[カラフルな立方体]の作例を加工して、ビューポートを4つ活用してみました。1 つの回転しているCubeを、上と前と左側から固定のカメラで撮影し、1台マウスに反応して動くカメラを作って撮影しています。ソースコードを修正した箇所は赤字にしてあります。
INFO: Papervision3D Public Beta 2.0 - Great White (December 3rd, 2008)
//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 viewport01:Viewport3D;
var viewport02:Viewport3D;
var viewport03:Viewport3D;
var viewport04:Viewport3D;
var camera01:Camera3D; //固定カメラ-TOP
var camera02:Camera3D; //固定カメラ-FRONT
var camera03:Camera3D; //固定カメラ-LEFT
var camera04: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);
// カメラの作成とカメラ座標の設定
camera01 = new Camera3D(); //TOP
camera01.x = 0;
camera01.y = 500;
camera01.z = 1; //なぜか0だとレンダリングされないので1を代入しています。
camera02 = new Camera3D(); //FRONT
camera02.x = 0;
camera02.y = 0;
camera02.z = 500;
camera03 = new Camera3D(); //LEFT
camera03.x = -500;
camera03.y = 0;
camera03.z = 0;
camera04 = new Camera3D(); //マウスに反応するカメラ
camera04.x = -500;
camera04.y = 500;
camera04.z = 500;
//ビューポートを作成
viewport01 = new Viewport3D(200, 200);
viewport01.x = 5;
viewport01.y = 5;
this.addChild(viewport01);
viewport02 = new Viewport3D(200, 200);
viewport02.x = 5;
viewport02.y = 215;
this.addChild(viewport02);
viewport03 = new Viewport3D(200, 200);
viewport03.x = 215;
viewport03.y = 5;
this.addChild(viewport03);
viewport04 = new Viewport3D(200, 200);
viewport04.x = 215;
viewport04.y = 215;
this.addChild(viewport04);
// レンダラの作成
render = new BasicRenderEngine();
//ENTER_FRAMEにてレンダリングを行う
this.addEventListener(Event.ENTER_FRAME, render3D);
}
function render3D(event:Event):void {
//cubeを回転させます。
cube.localRotationY = cube.localRotationY + 1;
//フリーカメラの動きを制御
camera04.y = (mouseY - stage.stageHeight * 0.75) *10 ;
camera04.x = (mouseX - stage.stageWidth * 0.75) * 5 ;
//カメラをCubeに向けます。
camera01.lookAt(cube);
camera02.lookAt(cube);
camera03.lookAt(cube);
camera04.lookAt(cube);
//レンダリングします。
render.renderScene(scene, camera01, viewport01);
render.renderScene(scene, camera02, viewport02);
render.renderScene(scene, camera03, viewport03);
render.renderScene(scene, camera04, viewport04);
}