[JS]かわいくて楽しい!ピクセルベースの3Dグラフィックをウェブページで利用できるスクリプト -Obelisk.js
Post on:2014年5月8日
アニメーションでも動く3Dのピクセルベースのオブジェクトをウェブページで利用できるHTML5 Canvasをつかったスクリプトを紹介します。
![サイトのキャプチャ](/wp-content/uploads-201402/2014050800.png)
Obelisk.jsのデモ
Obelisk.jsを使ったさまざまな楽しいデモが用意されています。
HTML5対応ブラウザでご覧ください。
![サイトのキャプチャ](/wp-content/uploads-201402/2014050802-01.png)
GIF Animation Rendering
映画のワンシーンを再現したアニメーション、要Chrome, Safari。
![サイトのキャプチャ](/wp-content/uploads-201402/2014050802-02.png)
Input Text Rendering
入力したテキストをレンダリングします。
![サイトのキャプチャ](/wp-content/uploads-201402/2014050802-03.png)
Pixel Isometirc Flappy Bird
ピクセルで描かれたFlappy Bird。
![サイトのキャプチャ](/wp-content/uploads-201402/2014050802-04.png)
Cube Generator
シンプルなキューブのジェネレーター、X, Y, Zのサイズを変更できます。
また、有志によるデモも充実。
![サイトのキャプチャ](/wp-content/uploads-201402/2014050802-05.png)
Github Contribution Chart Isometric View
GitHubのContributionをグラフ化。
![サイトのキャプチャ](/wp-content/uploads-201402/2014050802-06.png)
Online Voxel Builder
ピクセルアートをゼロから作成できるジェネレーター。
Obelisk.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
<head> ... <script src="//path/to/obelisk.min.js"></script> </head>
Step 2: HTML
オブジェクトを配置するcanvas要素を用意します。
<canvas id="canvas-demo" width="1500" height="400"></canvas>
Step 3: JavaScript
例えば、キューブだと下記のようなコードになります。
// get DOM or jQuery element // like: $('#canvas-demo') var canvas = document.getElementById('canvas-demo'); // create pixel view container in point var point = new obelisk.Point(270, 120); var pixelView = new obelisk.PixelView(canvas, point); // create dimension instance var dimension = new obelisk.CubeDimension(120, 200, 60); // create color instance var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.GRAY); // create cube primitive var cube = new obelisk.Cube(dimension, color); // create cube primitive wihtout border //var cube = new obelisk.Cube(dimension, color, false); // render primitive to view pixelView.renderObject(cube);
Obelisk.jsの詳しい使い方は、チュートリアルが用意されています。
sponsors