Home > papervision3d > Papervision3Dのオブジェクトにテクスチャを貼付ける

Papervision3Dのオブジェクトにテクスチャを貼付ける

今回はPapervision3Dのオブジェクトにテクスチャを貼付けてみます。
ベースは以前のエントリ「Papervision3Dのオブジェクトをマウスの位置に応じて回転させる」です。

マテリアル(Material)をテクスチャにする

以前のエントリでは、オブジェクトの素材(マテリアル)を単一の色(白色:0xffffff)にしていました。

material = new ColorMaterial( 0xffffff, 1 );
material.oneSide = false

これをJPG画像のテクスチャに変更します。JPG等の画像ファイルを読込む簡単なクラスが準備されています。それはBitmapFileMaterialです。

material = new BitmapFileMaterial( "adamrocker.jpg" );
material.doubleSided = true;

BitmapFileMaterialのコンストラクタで画像ファイルを指定するだけでテクスチャのオブジェクトができます。とっても簡単です。

ただし、ここでハマることがあります。
それは、ローカルファイルへのアクセスです。
サーバ上で同一ドメインであれば、上記の方法で簡単に画像を読込めますが、ローカル環境でテストしているだけではファイルを読込めず、何も表示されません。これはセキュリティの問題です。回避する方法はあるようですが、それは追々。

「material.doubleSided = true;」はテクスチャの裏面をどうするかの設定です。
裏面もちゃんと表示したければ、trueとします。裏面は表示する事が無いことが確実であれば、falseにしておくと処理が軽くて良いようです。

蛇足ですが、「material」はオブジェクト指向っぽくしておきます。

private var material  : MaterialObject3D;

こうしておくと、BitmapFileMaterial以外にもColorMaterialであったりBitmapAssetMaterialなどのインスタンスを格納できるので、拡張が簡単ですね。

ソースコード

前回のエントリから、部分的に変更が加わっていますが、基本は同じです。

package {
    import flash.display.*;
    import flash.events.*;
 
    import org.papervision3d.scenes.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.cameras.*;
    import org.papervision3d.materials.*;
    import org.papervision3d.core.proto.*;
 
    public class ImagePlane extends Sprite
    {
        private var container : Sprite;
        private var scene     : Scene3D;
        private var camera    : Camera3D;
        private var rootNode  : DisplayObject3D;
 
        private var planeObj  : DisplayObject3D;
        private var planeW : int = 240;//Planeオブジェクトの幅
        private var planeH : int = 320;//Planeオブジェクトの高さ
        private var segment   : int = 1;  //面の分割数
        private var material  : MaterialObject3D;
 
        private var valx      : Number = 0;
        private var valy      : Number = 0;
 
        //---------------------------------------------Constructor
        public function ImagePlane():void
        {
            stage.frameRate = 60;
            stage.quality   = "MEDIUM";
            stage.scaleMode = "noScale";
            stage.align = StageAlign.TOP_LEFT;
 
            //コンテナ生成
            container = new Sprite();
            container.x = 200;
            container.y = 200;
            stage.addChild( container );
 
            //シーン生成
            scene = new Scene3D( container );
 
            //rootNode生成
            rootNode = new DisplayObject3D();
            scene.addChild( rootNode );
 
            //マテリアル設定
            material = new BitmapFileMaterial( "adamrocker.jpg" );
            material.doubleSided = true;
 
            //Planeオブジェクト生成
            planeObj = new Plane( material, planeW, planeH, segment, segment );
            rootNode.addChild( planeObj );
 
            //camera設定
            camera = new Camera3D();
            camera.z = -250;
            camera.focus = 500;
            camera.zoom = 1;
 
            stage.addEventListener(Event.ENTER_FRAME, loop);
        }
 
        //---------------------------------------------loop
        private function loop( event:Event ):void
        {
            // 回転
            planeObj.rotationY += this.container.mouseY / 100;
            planeObj.rotationX += this.container.mouseX / 100;
 
            //再レンダリング
            scene.renderCamera( camera );
        }
    }
}
その他のテクスチャ
PNG画像をテクスチャに用いる
material = new BitmapFileMaterial( "adamrocker.png" );

結果はこうなります。

GIF画像をテクスチャに用いる
material = new BitmapFileMaterial( "adamrocker.gif" );

結果はこうなります。

このエントリをはてなブックマークに登録 Deliciousにブックマーク
関連のありそうなエントリ

Comments:1

whaison 11-01-04 (火) 16:01

material = new ColorMaterial( 0xffffff, 1 );
material.oneSide = false

material = new BitmapFileMaterial( “adamrocker.jpg” );
material.doubleSided = true;

こもわかりやすいメモだいぶ助かりました。
ありがとがとございます
ダブルシェイデドだとおもってたら。
ダブルサイデドなんですね。

Comment Form
Remember personal info

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Trackbacks:0

Trackback URL for this entry
http://www.adamrocker.com/blog/132/papervision3d_bitmapfilematerial_texture.html/trackback/
Listed below are links to weblogs that reference
Papervision3Dのオブジェクトにテクスチャを貼付ける from throw Life

Home > papervision3d > Papervision3Dのオブジェクトにテクスチャを貼付ける

Twitter
Search
Feeds
Meta

Return to page top