【技術者向け】ツクールMZでPIXI3Dを使ってみよう！（Windows用）
ツクールMZでPIXI3D導入して宇宙っぽい雰囲気ができた！
— 莞爾の草 (@kanjinokusa) 2022年11月7日
もはやここまで来たらUnityでやったほうがいい！ pic.twitter.com/cxl8J07709
ツクールMZはPIXI.jsベースで作られているので「どうせならPIXI3Dを使って3D演出を実装したい！」という思いで始めて色々できたので共有します。
マイナーなライブラリなのか英語で調べてもほとんど情報は出てきませんが一緒に頑張りましょう。
※PIXI.jsのバージョンを変えるためコアスクリプトやプラグインで不具合が起こる可能性があります。
※ツクールMVではPIXI.jsのバージョンが低いため対応していません。
※自己責任でお試しください。
Node.jsとnpmの導入（Windows）
必要なライブラリの導入のためにnode.jsとnpmをインストールする必要があります。
■Windowsの場合
Node.js / npmをインストールする（for Windows） - Qiita
npmを正常にダウンロードできたらコマンドプロンプトを開き、ツクールのプロジェクトのサブフォルダなどで『npm init』と実行します。
色々と聞かれますがこの設定はあまり関係ないのでENTERで飛ばします（package nameを省略した場合フォルダ名から自動で指定されますが、隠しフォルダに生成するとnameの先頭を.にすることができないため失敗します。初めて見た）。
これでプロジェクトにnpmが導入できました。
PIXI.jsのアップデート・PIXI3Dのインストール
PIXI3Dが対応するPIXI.jsのバージョンがv5.3.0以上で、ツクールMZ（v1.5.0）のPIXI.jsのバージョンが5.2.4なのでアップデートする必要があります。
今回はバージョンの近い5.3.0を導入したいのでプロンプトに『npm install pixi.js@5.3.0』を実行します。
続けてPIXI3Dをインストールしたいので『npm install pixi3d@1.6.2』（2022/11/12時点の最新バージョン）を実行します。
インストールが完了するとnode_modulesフォルダにpixi.js、pixi3dフォルダが入っているので、それぞれのフォルダ内から以下のファイルをコピーしてjs/libsフォルダに貼り付けます。
pixi.js/dist/pixi.js（libs/pixi.jsのリネーム推奨）
pixi3d/dist/umd/pixi3d.js
移動完了後、main.jsのscriptUrls配列の"js/libs/pixi.js"の下に"js/libs/pixi3d.js"を追加すれば導入は完了です。
3Dオブジェクトを表示してみよう
PIXI3Dの導入が完了したので早速ドキュメントを見ながらいじっていきましょう。
Cube（立方体、直方体）やSphere（球体）を作るにはPIXI3D.Mesh3D.createなんちゃらの関数を呼び出せばいいのでとりあえず書いてみます。
コード
ゲーム画面
3Dオブジェクトが表示されました！
ただマテリアルとライトを設定していないため真っ黒のままになっています。
コードを追加しましょう
ゲーム画面
ちなみにオブジェクトを動かしたい場合は、以下のコードで入力キーとマウスカーソルから操作することができます。
（ここまできたらUnityでは？）
カメラ（視点）を動かしてみよう
オブジェクトの移動のために作った関数内の『const cam = this._kns...』の行をconst cam = PIXI3D.Camera.main;と書き換えるとカメラの座標を調整することができます。
先ほどとは違いオブジェクトそのものは動いていないのでオブジェクトの光の当たり方があまり変わらなくなりました。
カメラは複数作って切り替えることができるのでいろいろ使い道がありそうですね。
3Dモデルを表示してみよう
ざっくり調べた程度ですが、以下のようにすると使えるようです。
PIXI.js v5ではGraphics.app.loaderを介してgltf拡張子のモデルデータにアクセスし、loader.load関数で読み込み時に処理を行います。
既に読み込まれている場合はloader.resoursesからデータを持ってくることができます。
ImageManagerを拡張したりPIXI3D.Modelクラスのラッパーを作ったりすればもっときれいに書けそうですが、自分は今のところ使う予定はないので深く調べていません。
来たれ変態。
Skyboxを表示してみよう
SkyboxはUnityなどではおなじみの空などの背景を表示するものです。
６枚の画像をサイコロのように組み立てたものをうまいことすることで背景のように見せてくれます（よくわからなってない）。
そういうわけで６枚の画像を以下のように設定することで何となくうまくいきます。
とりあえず表示はできましたが、このままでは静止画でただの背景と同じなので動きを付けてみます。
こうなってたんだ
最後に
シーン終了時などにライトオブジェクトを外しておかないとどんどん光が強くなってしまうのでterminateなどで外してあげましょう。
おわり
（ソースコード）
