[JS]かわいくて楽しい！ピクセルベースの3Dグラフィックをウェブページで利用できるスクリプト -Obelisk.js

サイト構築 -JavaScript

Post on:2014年5月8日

Obelisk.jsのデモ

Obelisk.jsを使ったさまざまな楽しいデモが用意されています。
HTML5対応ブラウザでご覧ください。

GIF Animation Rendering
映画のワンシーンを再現したアニメーション、要Chrome, Safari。

Input Text Rendering
入力したテキストをレンダリングします。

Pixel Isometirc Flappy Bird
ピクセルで描かれたFlappy Bird。

Cube Generator
シンプルなキューブのジェネレーター、X, Y, Zのサイズを変更できます。

また、有志によるデモも充実。

Github Contribution Chart Isometric View
GitHubのContributionをグラフ化。

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の詳しい使い方は、チュートリアルが用意されています。