ITエンジニア/デザイナ向けにオープンソースを毎日紹介

マインクラフトに代表される、立方体をボクセルと呼びます。単なる立方体をながら、模様があり、それを積み重ねることで様々な造形を可能にしています。

そんなボクセルをCSS3を駆使して可能にしているのがvoxel.cssです。Webベースのボクセルエンジン開発が進みそうです。

voxel.cssの使い方

トップページです。これもvoxel.cssで作られていて、マウスでぐりぐり動かせます。

テクスチャを張り付ければこんな使い分けもできます。

マウスで動かしているところ。

JavaScriptを使って動かしたり、ブロックを増減できるデモです。

ブロックの色も変えられるので、好きな形を作れます(保存はできませんが)。

voxel.cssは操作の部分はともかく、描画自体はCSS3だけで実現しています。voxel.cssであればJavaScriptと組み合わせて使うのも簡単にできそうです。

voxel.cssはHTML5/CSS3製のオープンソース・ソフトウェア(MIT License)です。

voxel.css

‎voxelcss.com/demo

HunterLarco/voxel.css: A lightweight 3D CSS voxel library.

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch