Three.jsとphina.jsをつかおうとしてハマったこと

投稿が遅くなり、申し訳ありませんでした。

背景

Three.jsで息子たちとカーレースものをつくろうとしていて、
これとPhina.jsを併せてゲームらしく出来ないかとおもい、始めたが。。

座標系がThree.jsと異なっている

去年のアドカレでPhinaとThree.jsを組み合わせることが
出来るのを知ったので、やってみたが、
Three.jsベースで作っていたものをPhinaのレイヤーに
組み込んだところ、どうも、カメラの指定と表示される場所が
異なっているようだった。

three.jsのみでつくっていた際は、
x,yを0,0で指定すれば、画面中央に表示されたが、
phina.jsのレイヤーに組み込んだところ、画面の
中央に表示されず、左上に表示されるようだった。

試行錯誤のすえ、

const layer = phina.display.ThreeLayer({
      originX: 0.25,
      originY: 0.25,
      width: options.width*2,
      height: options.height*2,
    }).addChildTo(this);

という指定をThree.jsのレイヤー作成時に行うことで、
Retina環境でもいい感じに3Dオブジェクトがレンダリングされ、
かつThree.jsの座標系でオブジェクトの位置指定が
行えた。

• オプション付きでThree.jsレイヤーを使用した例

終わりに

当初は、息子たちと作っているカーレースゲームを完成させて
これを元に記事にしたかったのですが、12月某日に担当している
システムのリニューアルがあり、このあと処理に追われる
日々を予想していたものの、なかなか時間が取れず、
来年こそは何か一つ完成した作品をつくってアドカレに
臨みたいところです。