Voxel CSS

2次元のピクセルに対す3次元のボクセル。

WiKiPediaより(https://ja.wikipedia.org/wiki/%E3%83%9C%E3%82%AF%E3%82%BB%E3%83%AB)
” ボクセル(英: voxel)とは、体積の要素であり、3次元空間での正規格子単位の値を表す。「ボクセル」という用語は「体積 (volume)」と「ピクセル (pixel)」を組み合わせたかばん語である。これは、2次元画像データがピクセルで表されることのアナロジーである ”

マインクラフトの世界が、このボクセルで作られていることは有名ですね。
JavaScriptでこの世界を作ることができるツールをみつけたので試してみました。

http://voxelcss.com/

以前、voxel.jsなども試したことがありますが、それらより実装がシンプルでブロックの配置がやりやすいのが特徴です。
ここでは、プログラミングでブロックを配置することを目的としました。

https://github.com/HunterLarco/voxel.css
ここでダウンロードして解凍したフォルダの中でこのソースを置きブラウザを開きます。
マウス操作で視点も変えられます。

デモサイトもあります。

ソースを見ていくと、ボックスを構成する画面の差し替えが簡単にできそうなので、これをもとにいろいろと作っていくことが面白そうです。