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

サイト構築 -CSS

Post on:2016年1月29日

voxel.cssのデモ

上部のアニメーションgifは、voxel.cssのトップページで楽しめます。
ファイルサイズの関係で尺を半分くらいにしているので、ぜひ全編を下記ページでお楽しみください。

voxel.css

トップページの下の方では、アニメーションがどれくらい快適に動作するかが分かります。

voxel.css: デモ

また、デモページでは3Dのオブジェクトがさまざまな動きをします。

デモページ

ドラッグ: 軌道
Shift+ドラッグ: パン
スクロール: ズーム
クリック: オブジェクトの追加
右クリック: オブジェクトの削除

voxel.cssの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

<head>
  ...
  <script src="js/voxelcss.js"></script>
  <link rel='stylesheet' href="css/voxel.css"></link>
</head>

<head>

...

</head>

Step 2: HTML

HTMLは特に必要ありません。
領域の確保をする必要もなく、JavaScriptに記述します。

Step 3: JavaScript

オブジェクトやアニメーションをJavaScriptで設定します。

<script>

    var scene, world, editor;

    init();

    function init() {
    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
      }));
    }

</script>