2015の20日目です。さんが昨日の記事でご紹介されていたとおりphina.jsにはThreeLayerというものがあり、three.jsと連携して3Dゲームを作ることが出来ます。いうわけでさっそくやってみました。バトルシップ!私が過去に作った大海戦!ヤマトさんというゲームを3D化したものを開発しています。作成途中ですが、three.jsのExampleフォルダに入っているWaterShaderを丸パクリ利用してみました。MagicaVoxelのvoxファイルをjsで使うためのライブラリvox.jsを使い、20分でモデリングした大和型戦艦を登場させています。今回の記事ではphina.jsとthree.jsを連携する上でいくつか気づいたことをまとめてみます。phina.asset.AssetManagerでテクスチャをロードthree.jsではテクスチャに画像ファイルを使う際、ImageUtils.loadTexture()メソッドなどを使い画像をロードします。texture});phina.jsにはアセットを一括管理するしくみがありますので、3D用のテクスチャもこちらでロードしたいところです。そこでこのようにしてみました。texture});ロード時は2Dスプライト用のテクスチャとまったく同じです。利用時は画像アセット(phina.asset.Texture)のdomElementプロパティからimg要素を取得できるので、それをTHREE.Textureのコンストラクタに渡してあげればテクスチャオブジェクトを作ることが出来ます。Tweenerでアニメーションphina.accessory.Tweenerを使ったアニメーションは簡単かつ見栄えのする演出方法です。ゲームを作る上ではぜひ利用していきたいしくみですね。さんが記事を書いていらっしゃいます。Tweenerを使いこなそう!THREE.Mesh等の3Dオブジェクトでトゥイーンアニメーションを実現するには、phinaのエレメントでラップしてしまうと手っ取り早いです。"easeOutBack");カメラなどをスムーズに移動させたい場合に便利ですね。今回はここまでというわけで簡単ではありますが、phina.jsとthree.jsを連携する際に覚えておくと便利な使い方でした。phina.jsCommentsJavaScriptゲーム作りマン+MagicaVoxelでキャラ作るマン。phina.js好き。シューティングゲーム好き。能登麻美子と結婚したい。