凄すぎる! CSS で Voxel を表現した超軽量ライブラリ『voxel.css』の使い方

9 years ago

コリスさんの

『CSSがこんなに進化してるとは！18才の少年がつくった3Dアニメーションのライブラリがすごすぎる -voxel.css | コリス』

で紹介されていた voxel.js が面白そうだったので実際に使ってみました.

動作デモを交えつつ使い方を紹介したいと思います!

『voxel.css』とは？

CSS で Voxel を表現できる超軽量ライブラリです.

ただ Voxel を表現するだけでなく, Voxel Editor で Voxel を編集したり, その状態を保存する機能なんかもあります.

CSS で 3D を表現しているので WebGL をサポートしていないスマートフォンでも綺麗に表示されます.

『voxel.css』のデモ

なんと 30 行程度でエディタ機能含め Voxel world を表現することができます!

クリックすると Voxel を生成することができます. 状態は自動で保存されるので画面を更新しても同じ Voxel が表示されます.

『voxel.css』デモのコード

var scene, world, editor;

var init = function() {  
  scene = new voxelcss.Scene();
  scene.rotate(-Math.PI / 8, Math.PI / 4, 0);
  scene.attach(document.body);

  var lightSource = new voxelcss.LightSource(300, 300, 300, 750, 0.3, 1);
  scene.addLightSource(lightSource);


  world = new voxelcss.World(scene);
  editor = new voxelcss.Editor(world);
  editor.enableAutoSave();

  editor.load();

  if (world.getVoxels().length === 0) {
    editor.add(new voxelcss.Voxel(0, 0, 0, 100, {
      mesh: voxelcss.Meshes.grass
    }));
  }
};

window.onload = function() {  
  init();
};

『voxel.css』の使い方

Install

cdn 経由で読み込みます.

<link rel='stylesheet' href='http://cdn.rawgit.com/HunterLarco/voxel.css/1.1.0/dist/voxel.css' />  
<script src='http://cdn.rawgit.com/HunterLarco/voxel.css/1.1.0/dist/voxelcss.js'></script>

Usage

まず, シーンを生成し body 要素にアタッチします.

scene = new voxelcss.Scene();  
scene.rotate(-Math.PI / 8, Math.PI / 4, 0);  
scene.attach(document.body);

次にライトを追加します. この処理はあってもなくても良いのですがやっておくと 3D 感が増します.

var lightSource = new voxelcss.LightSource(300, 300, 300, 750, 0.3, 1);  
scene.addLightSource(lightSource);

そしてワールドを作成します. ワールドに Voxel を追加することで画面上に表示物を増やしていくことができます.

world = new voxelcss.World(scene);

最後に editor を作ります. editor と world を紐付けることで editor 経由で world に Voxel を追加していくことができます.

editor = new voxelcss.Editor(world);  
editor.enableAutoSave();

editor.load();

if (world.getVoxels().length === 0) {  
  editor.add(new voxelcss.Voxel(0, 0, 0, 100, {
    mesh: voxelcss.Meshes.grass
  }));
}

これで Voxel Editor の完成です! 簡単ですね♪ たった数十行で作れるなんて驚きです!!

これで遊んでたらドラゴンクエストビルダーズやりたくなってきた...

phi