株式会社antsのホームページへようこそ。

FIVe3Dを試してみた

0
Posted in Lab. By kiyokazk

こんにちは、kiyokazkです。
Flash向けのベクターベースの3Dライブラリ、FIVe3Dを試してみました。最近バージョン2.1がリリースされて機能がいろいろと増えたみたいで、いろいろなFlasherの方々がブログで取り上げていたので僕も何はともあれ触ってみました。



さて、まずはお試しということでantsロゴをくるくると回してみるだけのシンプルなものを作ってみました。本当にただ回ってるだけです。
antsロゴ回転サンプル
クリックで開きます

中身もとてもシンプルで、行っていることは

シーン(Scene3D)を作成
→コンテナ(Sprite3D)を作成
→画像を読み込み
→読み込んだ画像をコンテナにaddChild
→フレームイベントでコンテナをくるくる回す

です。そのまんまですね。
ソース自体もすごく単純に書けるんですが、たったこれだけでちゃんとぐるぐる回せるのはすごいなーと思います。貼った画像も歪んでないです。

このFIVe3Dは、PV3Dのようにモデルをぐりぐりと動かしたりする用途には向いていないかもしれませんが、Flashアニメーションの延長で3D、みたいに使うにはすごく手軽でよさそうだなーと思いました。
PV3Dのようにカメラとかライトがあるわけではなさそうなので(今のところ?)、3Dのシーンを作り上げるというよりは、ボタンとかのUIに3Dの味付けをしたりするのに適しているのかなぁという印象です。

あと、いろいろなフォントを3Dとして扱えるようになっているのも特徴です。
デフォルトでfive3D.typography以下にいくつかASファイルが入っていますが、中身をのぞいてみると面白いです。まさに力技。
この力技ASファイルを任意のフォントから好きな文字だけ取り出して作成できるツールも公式サイトで公開しているので(TOPページの”Make a new typography file”)今度試してみたいと思います。

最後に今回のソースを貼っておきます。(45行)
[as3]
package{
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.net.URLRequest;
import flash.events.Event;
import five3D.display.Scene3D;
import five3D.display.Sprite3D;
import five3D.display.Bitmap3D;
public class RotateLogo extends Sprite{
private var _scene:Scene3D;
private var _sprite:Sprite3D;
private var _bitmap:Bitmap3D;
private var _loader:Loader;
public function RotateLogo():void{
_scene = new Scene3D();
_scene.x = 150;
_scene.y = 100;
addChild( _scene );
_sprite = new Sprite3D();
_scene.addChild( _sprite );
_loader = new Loader();
_loader.load( new URLRequest("ants_logo.png") );
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
}
private function completeHandler( event:Event ):void{
_bitmap = new Bitmap3D(event.target.loader.content.bitmapData);
_bitmap.x = -event.target.loader.content.width/2
_bitmap.y = -event.target.loader.content.height/2
_sprite.addChild( _bitmap );
this.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
}
private function enterFrameHandler( event:Event ):void{
_sprite.rotationX += 2;
_sprite.rotationY += 3;
_sprite.rotationZ += 1;
}
}
}
[/as3]