Oimo.js でドミノっぽい年賀状を作ってみる

cx20が2015年1月3日15:39:39に投稿しました。

JavaScript

5

お気に入り

準備中

Views

このレシピで作るもの

JavaScript の 3D 物理演算ライブラリである「Oimo.js」を用いてドミノ倒し風の年賀状を作ってみます。


目次

準備するもの

今回必要なものは以下のようになります。

  • three.js … 3D 表示ライブラリ
  • oimo.js … 3D 物理演算ライブラリ
  • 16x16サイズのドット絵

つくっていくもの

今回のレシピで作っていくファイルは以下のようになります。

  • index.html
  • index.js

index.html を作る

index.html を以下のように記述してください。

<!DOCTYPE html>
<meta charset="utf-8">
<title>Happy New Year 2015</title>
<!-- three.min.js -->
<script src="http://lo-th.github.io/root/build/three.min.js"></script>
<!-- oimo.min.js -->
<script src="http://lo-th.github.io/root/build/oimo.min.js"></script>

<div id='container'></div>

index.js を書いていく

雛形コピーした後、dataSet ~ の箇所に、ドット絵を描いていきます。
"白" は白色、"赤" は赤色といった感じです。

// □□□■□□□□□□□□□□□□
// □■■■■■■□□■□□□■□□
// □□□■□□□□□■□■■■■■
// □□□■□□□□□■□□□■□□
// □□■■■■■□□■□□□■□□
// □■□■□■□■□■□□□■□□
// □■□□■□□■□■□□□■□□
// □□■■□□■□□■□□■□□□
// □□□□□□□□□□□□□□□□
// □□□■□□■□□□□□□□□□
// □■■■■■□■□□■□□■□□
// □□□■□□□□□□■■■■■□
// □■■■■■■□□■□■□■□■
// ■□□■□□□■□■□■□■□■
// ■□□■□□□■□■□□■□□■
// □■■□□□■□□□■■□□■□
var dataSet = [
    "赤","赤","赤","白","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤",
    "赤","白","白","白","白","白","白","赤","赤","白","赤","赤","赤","白","赤","赤",
    "赤","赤","赤","白","赤","赤","赤","赤","赤","白","赤","白","白","白","白","白",
    "赤","赤","赤","白","赤","赤","赤","赤","赤","白","赤","赤","赤","白","赤","赤",
    "赤","赤","白","白","白","白","白","赤","赤","白","赤","赤","赤","白","赤","赤",
    "赤","白","赤","白","赤","白","赤","白","赤","白","赤","赤","赤","白","赤","赤",
    "赤","白","赤","赤","白","赤","赤","白","赤","白","赤","赤","赤","白","赤","赤",
    "赤","赤","白","白","赤","赤","白","赤","赤","白","赤","赤","白","赤","赤","赤",
    "赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤",
    "赤","赤","赤","白","赤","赤","白","赤","赤","赤","赤","赤","赤","赤","赤","赤",
    "赤","白","白","白","白","白","赤","白","赤","赤","白","赤","赤","白","赤","赤",
    "赤","赤","赤","白","赤","赤","赤","赤","赤","赤","白","白","白","白","白","赤",
    "赤","白","白","白","白","白","白","赤","赤","白","赤","白","赤","白","赤","白",
    "白","赤","赤","白","赤","赤","赤","白","赤","白","赤","白","赤","白","赤","白",
    "白","赤","赤","白","赤","赤","赤","白","赤","白","赤","赤","白","赤","赤","白",
    "赤","白","白","赤","赤","赤","白","赤","赤","赤","白","白","赤","赤","白","赤"
];

表示までの流れ

Oimo.js を用いた、物理演算コードの基本的な流れとしては、

  1. 物理演算の準備を行う
  2. 物理演算用のオブジェクトを設定する(形とサイズと位置を指定)
  3. 表示用のオブジェクトを設定する(形と色とサイズと位置を指定)

という感じです。

function init() {
      :
    // 物理演算の準備
    world = new OIMO.World();

    // 床を作成する
    createGround();

    // ドミノを作成する
    createDomino();

    // ドミノ碑を倒す為の立方体を配置する
    createCube();
      :
}
function createGround() {
    // 床の物理演算用のオブジェクトを設定
    var ground = new OIMO.Body({
        size: [400, 40, 400],
        pos: [0, -50, 0],
        world: world
    });

    // 表示用のオブジェクトを設定
    var material = new THREE.MeshLambertMaterial({
        color: 0x202020
    });
    var geometry = new THREE.BoxGeometry(400, 40, 400);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.y = -50;
    scene.add(mesh);
}

おわりに

以上でドミノっぽい年賀状の完成です。

three_js_oimo_20150101_001.png

お疲れ様でした。

このレシピを書いたシェフ

cx20

@cx20

プログラマ(マイクロソフト系の言語を使用することが多いです。)


このシェフが書いたレシピ