calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>

categories

archives

Flashで3D基本編:オブジェクト表示の基本3ステップ

0
    さてシリーズ第三回目では、具体的にプログラムの内容に入っていきます。
    以前のシリーズを見ていない方は↓からどうぞ
    Flashで3D基本編:ヾ超を作る
    Flashで3D基本編:▲汽鵐廛襪鯑阿す

    あ。あと書き忘れましたが、Papervision3Dで3Dオブジェクトを動かすには、ActionScript3.0というプログラム言語を使って、プログラムを記述する必要があります冷や汗。 中にはプログラムと聞いただけで拒絶反応を示す方もいますが、こればっかりは慣れるしかないです。まあ考え方としては、いきなり1〜100まですべてを理解する必要はなくって、最初はサンプルプログラムの必要な部分(3〜4行)だけを理解するところから始めます。(覚えようとする部分を自分でちょっといじって動きを確認しながら、少しづつ理解を深めていきます)いきなり全てを理解しようとしてもなかなか難しいので、初めのうちは理解するのはほんの数行で、あとはオマジナイという程度でいいと思います温泉

    第二回目でダウンロードして頂いたsample3d.asの内容について説明していきたいと思います。ファイルをダブルクリックすれば、Flash CS3で開くと思います。ちなみにこのasファイルというのは、単なるテキストファイルですので、メモ帳なんかでも普通に開いて編集することができます。本講座では、Flash CS3で開いて編集する、という前提で進めます。

    で、sample3d.asを開くと、以下のようなプログラムが記述されているのが分かります。

    package {
     import flash.display.Sprite;
     import org.papervision3d.materials.*;
     import org.papervision3d.materials.shadematerials.*;
     import org.papervision3d.objects.primitives.*;
     import org.papervision3d.lights.PointLight3D;
     import org.papervision3d.view.BasicView;
     import caurina.transitions.Tweener;

     public class sample3d extends BasicView
     {
      public function sample3d():void
      {
       var light = new PointLight3D;
       startRendering();

       var mat = new FlatShadeMaterial(light);
       var object = new Sphere(mat);
       scene.addChild(object);
       Tweener.addTween(object, {rotationX:6000, rotationY:4000, time:60, transition:"linear"});
      }
     }
    }


    これがPapervision3Dを使い、3Dを動かしているプログラムです。この講座はプログラム触ったことない人を対象にしていますが、いきなり全部を覚える必要はありません。今回覚えていただきたいのは3行だけです。

    3Dオブジェクトを表示させるには、色、形、可視化の3ステップを踏む必要があります。
    分かりやすく日常生活的に表現しますと、

    ・ペンキ屋で赤いペンキを買ってくる。
    ・ホームセンターでポストを買ってきて、赤ペンキで塗る。
    ・玄関にポストを置く。

    というかんじです。
    もうちょっとプログラムっぽい言い方に変えてみます。

    ・赤いペンキという「色」に「mat」という名前をつける。
    ・「形」(ポスト)をmat(赤いペンキ)で塗り「object」と名前を付ける。
    ・「object」(赤ポスト)を可視化する。


    この3ステップは今回のプログラムでは、以下のような記述になっています。

    var mat = new FlatShadeMaterial(light);
    var object = new Sphere(mat);
    scene.addChild(object);

    単にこれだけだと、イメージが湧かないと思いますので、プログラムをちょこっと変えながら実験していきたいと思います。

    その前に、Flash CS3でsample.flaとsample3d.asを開いておきます。この状態から、[Ctrl]+[Enter]キーを押すと、実行(結果を表示)されるます。(以後、「実行する」とは[Ctrl]+[Enter]キーを押して結果を表示することだと思ってください。尚、sample3d.asを変更した後は、必ず保存してから実行してください、保存しないと、変更内容が結果に反映されません

    では早速ですが、3Dオブジェクトを塗る色を変えて実行してみたいと思います。
    プログラムの下の方にある色を設定している行を、下記の内容に変更してみてください。

    変更前:var mat = new FlatShadeMaterial(light);
    変更後:var mat = new WireframeMaterial();

    大文字・小文字は同じように入力してください。
    文字及びスペースは全て半角です。
    編集できたら保存してから実行してみてください。
    上手く編集できていれば、以下のような結果が表示されると思います。


    同様に以下のように変更すれば、ベタ塗りができます。

    var mat = new ColorMaterial();



    ちなみにWireframeMaterialやColorMaterialは、()の中に色を16進数で指定すると、その色で塗る事ができます。
    たとえば、赤で塗る場合はこんな感じ。

    var mat = new WireframeMaterial(0xff0000);

    とか

    var mat = new ColorMaterial(0xff0000);

    影が付けられるFlatShadeMaterialは、一番明るい色と、一番暗い色を()内で指定します。

    var mat = new FlatShadeMaterial(light, 0xff0000, 0x550000);



    ここで紹介した以外にも、
    ・MovieClip(静止画)で塗る。
    ・MovieClip(動いている状態)で塗る。
    ・Bitmap(外部ファイルから読み込み)で塗る。
    などなどができます。



    さて今度は、形を変えてみます。
    色を宣言しているすぐ次の行を、下記の内容に変更してみてください。

    変更前:var object = new Sphere(mat);
    変更後:var object = new Cone(mat);

    以下結果画面です。
    色はFlatShadeMaterialに戻しています。


    同様に以下のように変更してみてください。
    var object = new Cylinder(mat);



    通常、3Dの形というのは、3Dモデリングソフトなんかを使って自分で作成しなくてはいけないのですが、
    Papervision3Dでは、このような基本形があらかじめ用意されていて、特に自分でモデリングしなくても良いようになっています。
    基本形は上記以外にもこんなものがあります。

    ・立方体:var obj = new Cube(new MaterialsList({all:mat}));
    ・平面四角形:var obj = new Plane(mat);

    ※立方体を使う場合は、プログラムの上の方に書き記述を追加する必要があります。
    import org.papervision3d.materials.utils.MaterialsList;

    ※Planeは下記の記述をしないと、片面しか表示されません。(色宣言の次の行に)
    mat.doubleSided = true;

    という訳で、今回は3Dオブジェクトの色設定と基本形設定についてでした。
    次回は、オブジェクトを移動したり回転させたりする方法について説明します。

    コメント
    わかりやすい説明でした。

    次回が楽しみです。
    • パイロン
    • 2008/09/16 4:15 PM
    >>パイロンさん

    いつもコメントありがとうございます。
    分かり難い点や、詳しく説明して欲しい点あれば可能な範囲でアップしますので遠慮なくどうぞ。
    • ぽりG
    • 2008/09/18 9:44 AM
    papervision3dのこんなわかりやすい説明は始めてです!
    ありがとうございます!
    • Skizi
    • 2008/09/27 4:39 PM
    >>Skiziさん

    ありがとうございます。
    分からない点あれば知ってる範囲で答えますので遠慮なくどうぞ〜
    • ぽりG
    • 2008/09/28 11:29 PM
    すごいわかりやすいです。
    今日さんざん本屋でいろんな参考書を1時間も見ましたが、どれも自分にはあってなく、あきらめてしまいそうで、本は買わなかったです。
    ただ「ぽりG」さんのサイトを見つけこんなわかりやすいのは初めてです。
    これから毎日少しずつワクワクしながら、進められそうです。
    こんなサイト作っていただき、ありがとうございます。
    • のん
    • 2012/08/02 10:15 PM
    コメントする








       
    この記事のトラックバックURL
    トラックバック