Papervision3Dメモ #1

2007.03.27

前回唾付けたPapervision3D、ちょっと本腰入れて勉強しはじめてみた。
まずは環境設定から。
svnリポジトリからas3版をエクスポートして、適当な場所に「org」フォルダごと設置。
（オレの場合は、/Developer/SDKs/Flex/frameworks/source/に置いた）
んで、/Developer/SDKs/Flex/frameworks/flex-config.xmlの「<source-path>」のコメントアウトを外しつつ、Papervision3dを設置したパスを設定しておく。

<source-path>
<path-element>/Developer/SDKs/Flex/frameworks/source</path-element>
<path-element>locale/{locale}</path-element>
</source-path>

これでmxmlcが、Papervison3dのクラスを取り込んでくれる。

とりあえず、なんか適当なオブジェクトを表示しつつマウスで回してみたりしながら勉強していくことにする。おあつらえむきに、「Plane」「Cube」「Cylinder」「Sphere」というプリミティブオブジェクトを生成するクラスがあるので、これを使ってやってみた。

obj_Plane.swf（要：FlashPlayer9）

で、以下ソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

package
{
import flash.display.*;
import flash.events.*;
 
import org.papervision3d.scenes.*;
import org.papervision3d.objects.*;
import org.papervision3d.cameras.*;
import org.papervision3d.materials.*;
 
[SWF(backgroundColor=0x000000)]
 
public class obj_Plane extends Sprite
{
// _______________________________________________________________________
//                                                                  vars3D
private var container : Sprite;
private var scene     : Scene3D;
private var camera    : Camera3D;
private var rootNode  : DisplayObject3D;
 
private var planeObj  : DisplayObject3D;
private var planeSize : int = 300;      //Planeオブジェクト1辺の長さ
private var segment   : int = 1;        //面の分割数
 
private var valx      : Number = 0;
private var valy      : Number = 0;
 
// _______________________________________________________________________
//                                                             Constructor
public function obj_Plane():void
{
stage.frameRate = 60;
stage.quality   = "BEST";
stage.scaleMode = "noScale";
stage.align = StageAlign.TOP_LEFT;
this.addEventListener(Event.ENTER_FRAME, loop3D);
this.stage.addEventListener(Event.RESIZE, onStageResize);
 
init3D();
}
 
// _______________________________________________________________________
//                                                                  Init3D
private function init3D():void
{
//コンテナ生成
this.container = new Sprite();
addChild(this.container);
this.container.x = this.stage.stageWidth  / 2;
this.container.y = this.stage.stageHeight / 2;
 
//シーン生成
scene = new Scene3D( container );
 
//カメラ設定
camera = new Camera3D();
camera.z = -planeSize;
camera.focus = 500;
camera.zoom = 1;
 
//rootNode生成
rootNode = scene.addChild( new DisplayObject3D( "rootNode" ) );
 
//マテリアル設定
var colorMaterial:ColorMaterial = new ColorMaterial( 0x0099cc, 1);
var wireMaterial:WireframeMaterial = new WireframeMaterial( 0x00ccff );
 
var compoMaterial:CompositeMaterial = new CompositeMaterial();
compoMaterial.addMaterial(colorMaterial);
compoMaterial.addMaterial(wireMaterial);
compoMaterial.doubleSided = true;
 
//Planeオブジェクト生成
planeObj = new Plane( compoMaterial, planeSize, planeSize, segment, segment);
rootNode.addChild( planeObj );
 
}
 
// _______________________________________________________________________
//                                                                    Loop
private function loop3D( event:Event ):void
{
//マウス座標でオブジェクトを回転
valx += this.container.mouseX / 50;
valy += this.container.mouseY / 50;
planeObj.rotationY = valx;
planeObj.rotationX = valy;
 
//レンダリング
this.scene.renderCamera( camera );
}
 
// _______________________________________________________________________
//                                                           onStageResize
private function onStageResize(event:Event):void
{
this.container.x = this.stage.stageWidth  / 2;
this.container.y = this.stage.stageHeight / 2;
}
 
}
}
  • this.container = new Sprite()でコンテナ作る
  • Scene3D(container)で3Dシーン作る
  • カメラ設定
  • Plane()で板オブジェクト作ってaddChild()でシーンに追加する
  • ENTER_FRAMEイベントでレンダリング

が、基本になるのかな？
上のソースだと板オブジェクトを直接シーンにaddChild()せずに、一旦「rootNode」っていうDisplayObject3DオブジェクトをシーンにaddChild()した上で、板オブジェクトをrootNodeにaddChild()してる。他の人のソースに倣ってこうしたんだけど、今回のサンプルみたいに画面上にオブジェクトが一個しか無い場合には直接シーンにaddChild()しても一緒ですな。

基本が出来たんで、あとは表示したいオブジェクトを替えればいいのか。ActionScript超初級でもなんとかなるなぁ、すげぇやPapervision3D。そんなわけで他のプリミティブオブジェクトでもやってみた。

obj_Cube.swf（立方体）
obj_Cylinder.swf（円柱）
obj_Sphere.swf（球体）

先駆者達ががんばってくれてるおかげで、ソース付きのサンプルを一杯読めた。
感謝、感謝でございます。

追記：PV3D1.5の公開に合わせてsvnリポジトリが新しくなった。
新svnリポジトリ

追記：上記をPV3D2.0に対応させたソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

package
{
import flash.display.*;
import flash.events.*;
 
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.special.CompositeMaterial;
 
[SWF(backgroundColor=0x000000)]
 
public class obj_Plane extends Sprite
{
// _______________________________________________________________________
//                                                                  vars3D
private var viewport  : Viewport3D;
private var scene     : Scene3D;
private var camera    : Camera3D;
private var renderer  : BasicRenderEngine;
 
private var planeObj  : Plane;
private var planeSize : int = 300; //Planeオブジェクト1辺の長さ
private var segment   : int = 1;   //面の分割数
 
private var valx      : Number = 0;
private var valy      : Number = 0;
 
// _______________________________________________________________________
//                                                             Constructor
public function obj_Plane():void
{
stage.frameRate = 60;
stage.quality   = "BEST";
stage.scaleMode = "noScale";
stage.align = StageAlign.TOP_LEFT;
 
init3D();
}
 
// _______________________________________________________________________
//                                                                  Init3D
private function init3D():void
{
//ビューポート定義
viewport = new Viewport3D(0,0,true);
viewport.opaqueBackground = 0x000000;
addChild(viewport);
 
//レンダラ定義
renderer = new BasicRenderEngine();
 
//シーン定義
scene = new Scene3D();
 
//カメラ設定
camera = new Camera3D();
camera.z = -1000;
camera.fov = 30;
 
 
//マテリアル定義
var colorMaterial:ColorMaterial = new ColorMaterial( 0x0099cc, 1);
var wireMaterial:WireframeMaterial = new WireframeMaterial( 0x00ccff );
var compoMaterial:CompositeMaterial = new CompositeMaterial();
compoMaterial.addMaterial(colorMaterial);
compoMaterial.addMaterial(wireMaterial);
compoMaterial.doubleSided = true;
 
//Planeオブジェクト定義
planeObj = new Plane( compoMaterial, planeSize, planeSize, segment, segment);
scene.addChild( planeObj );
 
addEventListener(Event.ENTER_FRAME, loop3D);
 
}
 
// _______________________________________________________________________
// Render Loop
private function loop3D( event:Event ):void
{
//マウス座標でオブジェクトを回転
valx += (stage.mouseX - (viewport.width * 0.5) ) / 50;
valy += (stage.mouseY - (viewport.height * 0.5) ) / 50;
planeObj.rotationY = valx;
planeObj.rotationX = valy;
 
//レンダリング
renderer.renderScene(scene,camera,viewport);
}
 
}
}

Posted by rect |  papervision3d1.x  |  Comment(1)

関連する投稿

Trackback URL : http://blog.r3c7.net/wp-trackback.php?p=57

コメント / トラックバック1件

  1. xingxx より:
    2008.06.12 21:24:24

    papervision3dを触ってみた…

    最近、やっとこさ実用レベルでActionScript3.0が理解できてきて、気… (more…)

コメントをどうぞ

Powered by WP Hashcash