Wonderfulで始めるAlternativa3D

入門編5.シーンとカメラとビュー

入門編では、今まで、WonderflのBasic Templateを使い、初期に必要な設定をBasicTemplateクラスにお任せしていましたが、今回はこのBasicTemplateクラスの中で行われている、Alternativa3Dの表示システムについて、簡単に解説します。

よく3Dライブラリの表示システムを説明する時に、テレビが例に取り上げられる事が多いですが、 Alternativa3Dでも、この範例にしたがって同じくテレビで表示システムを表現してみました。

簡単に描くとこんな感じです。

テレビの世界では・・・
1.録画スタジオをセッティング
2.セットを組み、役者さんに演技をしてもらう。
3.それを、カメラマンがカメラを操作して撮影する。
4.撮影した映像を、色々ゴニョゴニョして、テレビに映し出す。

これをAlternativa3Dに置き換えると・・・
1.Sceneを作成する
2.3Dオブジェクトを作成して、Sceneに設置する
3.CameraとCameraControllerを用意し撮影する
4.Viewを用意して、Cameraで撮影した物をViewに映し出す

となります。

実際のコーディング

では、各操作を実際のコーディングを見ながら解説していきます。

1.Sceneを作成する

			var scene:Scene3D = new Scene3D();
			scene.root = new Object3D(); 

最初に録画スタジオにあたる、Scene3Dクラスのインスタンスを作成します。
次に、すべての3Dオブジェクトを設置する為のrootオブジェクトを作成します。
(rootはScene3Dクラスのプロパティとして用意されているのですが、何でconstructorで初期化しといてくれないのでしょうね?必ず必要なのに最初はnullなので、最初にnew Object3D()で初期化します。)

2.3Dオブジェクトを作成して、Sceneに設置する

			var material:FillMaterial=new FillMaterial(0xFF0000)
			var box:Box=new Box(500,500,500)
			box.cloneMaterialToAllSurfaces(material);
			scene.root.addChild(box)

実際に映し出す物を、Sceneのrootに配置します。

3.CameraとCameraControllerを用意し撮影する

			var camera:Camera3D = new Camera3D();
			camera.y = -1000; 
			scene.root.addChild(camera);
			var cameraContoller:CameraController = new CameraController(this); 
			cameraContoller.camera = camera;
			cameraContoller.lookAt(new Point3D());

3Dシーンを映し出すカメラにあたる、Camera3Dのインスタンスを作成し、Sceneのrootに配置します。
次に、カメラマンにあたる、CameraControllerのインスタンスを作成し、操作するカメラとして、先に作成させたCamera3Dのインスタンスを指定します。
Camera3Dのインスタンスは、x,y,zやcoordsプロパティで位置を指定したり、回転を指定する事もできますが、CameraControllerを使用する事で、より簡単にCamera3Dの操作ができるようになります。
なお、CameraControllerは、Scene.rootにaddChild()する必要はありません。
最後に、CameraControllerのlookAtを使用して、Camera3Dを(0,0,0)の位置に向けています。

4.Viewを用意して、Cameraで撮影した物をViewに映し出す

			var view:View = new View();
			view.camera = camera; 
			view.width=465
			view.height=465
			addChild(view); 
			scene.calculate();

Cameraで撮影した物を映し出すテレビにあたる、Viewを作成します。
次に、どのカメラで撮影した物を映し出すかを指定します。
なお、View(テレビ)は、Scene(撮影スタジオ)とは、直接関係ありませんのでScene.rootではなく、表示したいflash.DisplayObjectにaddChild()します。 (Viewクラスは、alternativa.engine3d.displayパッケージのクラスですが、 flash.display.Spriteを継承しています。)
そして、最後にscene.calculate();で映し出しています。
(scene.calculateは実際に映し出す操作ではなく、scene内すべての計算を行い、最終的にViewにレンダリングするメソッドです。)

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src

以上が、Alternativa3Dの表示までの簡単なプロセスです。

簡単と言っても、常に1から構築するのは、慣れるまではとても時間がかかります。
この内、1.3.4.が、 Basic Templateの中のBasicTemplateクラスが自動で行っていますので、最初の内は
これらの初期設定をBasicTemplateクラスにお任せして、楽しい3Dオブジェクトの操作(役者の演技)だけに集中するのが得策だと思います。

Menu

入門編

初級編

7. Sprite3Dとは?

8. MovieClipMaterial

中級(インタラクティブ編)

1. インタラクティブなオブジェクト

2. 反応するモデルと反応しないモデル

3. サーフェースごとのマウスイベント

4. フェースごとのマウスイベント

中級(コントローラー編)

1. コントローラーとは?

2. コントローラーをカスタマイズ

3. 重力・衝突判定

4. LookAt

中級(カメラ&View編)

1. カメラZOOMとFOV

2. 複数のカメラとView

3. Viewのクリッピング

中級(メッシュ作成編)

1. 頂点を作成する

2. 面を作成する

3. 表面を作成する

4. UVを設定する

5. メッシュを作る

実践・応用編

1. 読み込んだ画像で絵本を作る

3. GoogleNexusOne

4. 3Dスロット

5. ルービックキューブ

実験編

1. 3dsの読み込みと操作

2. イラレで作ったpathを押し出す

3. 押し出しによるText3D

4. 自作のマテリアルクラスを作る

5. フラットシェーディングマテリアル

6. 衝突判定を利用した跳ね返り

7. Sprite3Dによるパーティクル表現

8. Sprite3Dでピクセルレンダー

9. Objectのグロー、ブラー