ボクセルベースの3Dオブジェクトを作成ツール
私は将来的にゲーム開発をしたいと考えており、そのためのツールを作成したいと考えている。
そこで、環境として選んだのが先日執筆した以下の記事だ。
React + Electron + vite + TypeScriptの簡単な環境構築
https://qiita.com/niopetit/items/66818416f67bbe81e3c4
つまるところ、React+Electronでデスクトップアプリ環境を作り、
その上でthree.jsで3D処理を行う、という想定である。
three.jsの細かな仕組みは以下のページを参考にしていただきたい。
https://ics.media/tutorial-three/quickstart/
またthree.jsはcanvas内での処理になるため、外部とのデータの受け渡しには
useRefが必要になるため、今回はそれを省くためzustandを導入した。
3D処理の部分でstoreに値を格納すればcanvas外でもデータを参照できる。
現状
・とりあえず座標軸を表示するヘルパーを作成した
・コントローラを追加したことで回転が可能
・さらに拡大縮小が可能
当面の目標
・ボクセルが何pxで構築されるのか設定できるようにする（ループのため2の倍数限定）
・上で設定したpx数のボクセルの雛形を表示できるようにする
・ボクセルの配置機能
あとがき
12月からは新しい現場も始まるためあまり作業時間を取れないかもしれない