nanlow

勢いでドメインを変更しました。

Twitterなどに登録をするときにハイフンを使えなかったせいで 「nan-low」と「nanlow」が混在してややこしく、 また、人にも覚えてもらいにくかと思って。

これを機にもう少しこの名前に愛着を持ちたいと思います。

とりあえず、この適当につけた名前に 後付で意味を考えるところから始めようかな。

前回のデータにTweenerでアニメーションを付加します。

マウスによるイベントハンドラーの3箇所に付加しました。

サンプル

ドキュメントクラス

package
{
    import caurina.transitions.Tweener;
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private const SPEED:Number = 10;
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true, true);
            viewport.buttonMode = true;
            var bmd:BitmapData=new Img(180,180)
            var bm:BitmapMaterial = new BitmapMaterial(bmd);
            bm.doubleSided = true;
            bm.smooth = true;
            bm.interactive = true;
            _plane = new Plane(bm, 300, 300, 3, 3);
            _plane.useOwnContainer = true;
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, pressHandler);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overHandler);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, outHandler);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX += (stage.mouseY - stage.stageHeight * 0.5) / SPEED;
            _plane.rotationY += (stage.mouseX - stage.stageWidth * 0.5) / SPEED;
        }
        private function pressHandler(e:InteractiveScene3DEvent):void
        {
            Tweener.addTween(_plane, { scale: 1.1*_plane.scale, time:1.0, transition:'easeOutElastic' } );
        }
        private function outHandler(e:InteractiveScene3DEvent):void 
        {
            Tweener.addTween(_plane, { alpha: 1.0, time:0.2, transition:'easeInQuad' } );
        }
        private function overHandler(e:InteractiveScene3DEvent):void 
        {
            Tweener.addTween(_plane, { alpha: 0.7, time:0.2, transition:'easeOutQuad' } );
        }
    }
}

38・42・46行目：エフェクトをそれぞれTweenerによるトゥイーンにおきかえました。

あとついでに
32・33行目：マウスカーソルの位置による回転を滑らかなトゥイーンにしました。

Tweener自体はNumber型のメンバ変数に対してのトゥイーンを行ってくれるので オブジェクトが持ってるアクセス可能なメンバ変数ならPV3Dのものでも何でもいいんですね。

関連記事

• 初めての『Papervision3D 2.0』：その1（Great Whiteのドキュメント）
• 初めての『Papervision3D 2.0』：その2（BasicView）
• 初めての『Papervision3D 2.0』：その3（テクスチャの貼り付け
• 初めての『Papervision3D 2.0』：その4（マウスの座標をオブジェクトの回転に）
• 初めての『Papervision3D 2.0』：その5（テクスチャ画像にスムージング）
• 初めての『Papervision3D 2.0』：その6（3Dオブジェクトにマウスイベントを付加）
• 初めての『Papervision3D 2.0』：その7（3Dオブジェクトのアルファを変更）
• 初めての『Papervision3D 2.0』：その8（Tweenerとの連携）

前回のデータにマウスオーバー時の効果をつけてみます。
今回はオーバー時に透明度を少し下げる効果です。
もちろんアウト時に元に戻しておきます。

サンプル

ドキュメントクラス

package
{
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true, true);
            viewport.buttonMode = true;
            var bmd:BitmapData=new Img(180,180)
            var bm:BitmapMaterial = new BitmapMaterial(bmd);
            bm.doubleSided = true;
            bm.smooth = true;
            bm.interactive = true;
            _plane = new Plane(bm, 300, 300, 3, 3);
            _plane.useOwnContainer = true;
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, pressHandler);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overHandler);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, outHandler);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX = stage.mouseY - stage.stageHeight * 0.5;
            _plane.rotationY = stage.mouseX - stage.stageWidth * 0.5;
        }
        private function pressHandler(e:InteractiveScene3DEvent):void
        {
            _plane.scaleX *= 1.1;
            _plane.scaleY *= 1.1;
        }
        private function outHandler(e:InteractiveScene3DEvent):void 
        {
            _plane.alpha = 1.0;
        }
        private function overHandler(e:InteractiveScene3DEvent):void 
        {
            _plane.alpha = 0.5;
        }
    }
}

何箇所か追加・変更をしたので順番にいきます。

22行目：オブジェクトにフィルタをかけたり、アルファを変更したりできるようになります。

_plane.useOwnContainer = true;

ただし、下記のマウスイベントを取得できなくなってしまいます。

InteractiveScene3DEvent.OBJECT_CLICK
InteractiveScene3DEvent.OBJECT_DOUBLE_CLICK

これに関しては色々な人が不便さを訴えているようですね。
バグっぽいっていう話もあったりなかったり・・・。

23行目：上に書いたとおりイベントを受け取らなくなってしまうので
受け取るイベントの種類を「click」→「press」に変更しました。

_plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, pressHandler);

24行目：マウスオーバー時のイベントリスナー

_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overHandler);

25行目：マウスアウト時のイベントリスナー

_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, overHandler);

39～46行目：マウスオーバー・アウト時のイベントハンドラー

変更箇所を全部書いたのでややこしくなってしまいましたが
一番重要なのはuseOwnContainer。

alpha値を変更するにはこれをtrueにしておく必要があるのは
知らないとつまづいて長時間悩んでしまうところかもしれないです。

関連記事

• 初めての『Papervision3D 2.0』：その1（Great Whiteのドキュメント）
• 初めての『Papervision3D 2.0』：その2（BasicView）
• 初めての『Papervision3D 2.0』：その3（テクスチャの貼り付け
• 初めての『Papervision3D 2.0』：その4（マウスの座標をオブジェクトの回転に）
• 初めての『Papervision3D 2.0』：その5（テクスチャ画像にスムージング）
• 初めての『Papervision3D 2.0』：その6（3Dオブジェクトにマウスイベントを付加）
• 初めての『Papervision3D 2.0』：その7（3Dオブジェクトのアルファを変更）
• 初めての『Papervision3D 2.0』：その8（Tweenerとの連携）

前回のデータにマウスイベントを付加してみます。
とりあえず、めちゃくちゃ簡易的なものとして
「クリックするごとに大きくなる」ようにしてみます。

サンプル

ドキュメントクラス

package
{
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true, true);
            viewport.buttonMode = true;
            var bmd:BitmapData=new Img(180,180)
            var bm:BitmapMaterial = new BitmapMaterial(bmd);
            bm.doubleSided = true;
            bm.smooth = true;
            bm.interactive = true;
            _plane = new Plane(bm, 300, 300, 3, 3);
            _plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickHandler);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX = stage.mouseY - stage.stageHeight * 0.5;
            _plane.rotationY = stage.mouseX - stage.stageWidth * 0.5;
        }
        private function clickHandler(e:InteractiveScene3DEvent):void
        {
            _plane.scaleX *= 1.1;
            _plane.scaleY *= 1.1;
        }
    }
}

15行目：オブジェクトにマウスオーバーしたときのカーソルを指マークにします。

viewport.buttonMode = true

20行目：マウスイベントを受け取るようします。

bm.interactive = true

22行目：イベントリスナーを付けます。 Papervision3D独自のイベントInteractiveScene3DEventでクリックを判断します。

_plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickHandler)

重要なのはこの辺りかと。

関連記事

• 初めての『Papervision3D 2.0』：その1（Great Whiteのドキュメント）
• 初めての『Papervision3D 2.0』：その2（BasicView）
• 初めての『Papervision3D 2.0』：その3（テクスチャの貼り付け
• 初めての『Papervision3D 2.0』：その4（マウスの座標をオブジェクトの回転に）
• 初めての『Papervision3D 2.0』：その5（テクスチャ画像にスムージング）
• 初めての『Papervision3D 2.0』：その6（3Dオブジェクトにマウスイベントを付加）
• 初めての『Papervision3D 2.0』：その7（3Dオブジェクトのアルファを変更）
• 初めての『Papervision3D 2.0』：その8（Tweenerとの連携）

前回オブジェクトを自由に回転させることができましたが
そのおかげで台形変形時の画像の荒れが気になるようになりました。

スムージングをかけて誤魔化したいと思います。

サンプル

ドキュメントクラス

package
{
    import flash.display.BitmapData;
    import flash.events.Event;
    import org.papervision3d.materials.BitmapMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    public class Main extends BasicView
    {
        private var _plane:Plane;
        public function Main():void
        {
            super(0, 0, true);
            var bmd:BitmapData=new Img(180,180)
            var bmm:BitmapMaterial = new BitmapMaterial(bmd);
            bmm.doubleSided = true;
            bmm.smooth = true;
            _plane = new Plane(bmm, 300, 300, 3, 3);
            scene.addChild(_plane);
            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            startRendering();
        }
        private function enterFrameHandler(e:Event):void{
            _plane.rotationX = stage.mouseY - stage.stageHeight * 0.5;
            _plane.rotationY = stage.mouseX - stage.stageWidth * 0.5;
        }
    }
}

17行目の

bmm.smooth = true;

でBitmapMaterialにスムージングをかけました。

ギザギザは気にならなくなったと思います。

関連記事

• 初めての『Papervision3D 2.0』：その1（Great Whiteのドキュメント）
• 初めての『Papervision3D 2.0』：その2（BasicView）
• 初めての『Papervision3D 2.0』：その3（テクスチャの貼り付け
• 初めての『Papervision3D 2.0』：その4（マウスの座標をオブジェクトの回転に）
• 初めての『Papervision3D 2.0』：その5（テクスチャ画像にスムージング）
• 初めての『Papervision3D 2.0』：その6（3Dオブジェクトにマウスイベントを付加）
• 初めての『Papervision3D 2.0』：その7（3Dオブジェクトのアルファを変更）
• 初めての『Papervision3D 2.0』：その8（Tweenerとの連携）