3D物体への画像貼り付け‐Papervision3Dのお勉強(3)‐

※外部ライブラリシリーズ学習の目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。

前回は用意されている基本図形の画面への表示及びその回転を行いました。
今回は基本図形へのjpg画像の貼り付けを行ってみます。

Sphereへの貼り付け

org.papervision3d.materials.BitmapFileMaterialクラスを使用します。 外部画像ファイルをロードするために使用するクラスです。 Sphereクラスのインスタンスを生成する際、引数としてBitmapFileMaterialクラスのインスタンスを渡します。

貼り付けに使用した画像です(縮小してあります)。

結果です。

以下がソースです。

/* * 基本図形(Sphere)への画像貼り付け * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.primitives.Sphere; import flash.events.Event; import org.papervision3d.materials.BitmapFileMaterial; public class Sample03 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var sphere:Sphere; //コンストラクタ public function Sample03() { init();//初期化関数開始 } //初期化関数 public function init(){ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); //BitmapFileMaterialには画像URLを引数として渡す sphere = new Sphere(new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d03back.jpg")); scene.addChild(sphere); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { sphere.yaw(5);//回転軸に沿って回転 renderer.renderScene(scene, camera, viewport);//描画 } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

Cubeへの貼り付け

続きまして、立方体であるCubeの描画と、画像の貼り付けを行ってみます。 立方体は六面ありますので、その一つ一つに「上」「左」「右」「下」「前」「後」と描いた画像を貼り付けることにしました。

今回はSphereの場合のBitmapFileMaterialに加えて、org.papervision3d.materials.utils.MaterialsListを使用します。

BitmapFileMaterialで六つのインスタンスを生成し、それをMaterialsListにてまとめて渡すといった方法です。

以下が結果です(見る角度の問題で見えない面がありますが)。

以下がソースです。

/* * 基本図形(Cube)への画像貼り付け * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.primitives.Cube; import flash.events.Event; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.materials.utils.MaterialsList; public class Sample04 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var cube:Cube; private var top_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04top.jpg"); private var left_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04left.jpg"); private var right_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04right.jpg"); private var bottom_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04bottom.jpg"); private var front_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04front.jpg"); private var back_bfm:BitmapFileMaterial = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d04back.jpg"); //コンストラクタ public function Sample04() { init();//初期化関数開始 } //初期化関数 public function init(){ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); //BitmapFileMaterialを引数として渡す cube = new Cube(new MaterialsList({top:top_bfm , left:left_bfm , right:right_bfm , bottom:bottom_bfm , front:front_bfm , back:back_bfm}) , 300 , 300 , 300); scene.addChild(cube); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { cube.yaw(5);//回転軸に沿って回転 renderer.renderScene(scene, camera, viewport);//描画 } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

次回はマウス位置に合わせての図形の回転を説明します!

マウス位置に合わせての画像回転‐Papervision3Dのお勉強(4)‐へ。
3D物体の表示と回転‐Papervision3Dのお勉強(2)‐へ。