gl.enchant.js 上で簡単に床を表示するプラグイン floor.gl.enchant.js を作りました.

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

gl.enchant.js 用プラグイン floor.gl.enchant.js を作りました.

3D の床を表示するプラグインです.

使い方は, Sprite3D を継承しているので基本的に Plane や Sphere と同じです.

「3D 上を動きまわるサンプルを作ったはいいけどまわりが真っ暗で動いているかわからないよー」なんてときに使って下さい. 私がそんなときに作ったのを抜き出しただけのプラグインなので…

sample-img

Sample And Download

floor.gl.enchant.js を使っているサンプルはこちら.

格子状の床が表示されているのがわかるかと思います. クエリ文字列(URL の ?~)でパラメータを指定しているので値を変えると反映されます. 遊んでみてください.

ダウンロードはこちらからできます.

Code

floor.gl.enchant.js の使用例です.

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>gl.enchant.js Plugin - floor.gl.enchant.js - 最小サンプル</title>
        
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
        
        <script type="text/javascript" src="../js/gl.enchant.js/glMatrix-0.9.5.min.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/gl.enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/primitive.gl.enchant.js"></script>
        <script type="text/javascript" src="floor.gl.enchant.js"></script>
        <script>
            // おまじない
            enchant();
            
            // ちょっとだけ拡張
            Camera3D.prototype.setEye = function(x, y, z) { this.x = x; this.y = y; this.z = z; };
            Camera3D.prototype.setCnt = function(x, y, z) { this.centerX = x; this.centerY = y; this.centerZ = z; };
            Camera3D.prototype.setUp  = function(x, y, z) { this.upVectorX = x; this.upVectorY = y; this.upVectorZ = z; };
            
            // メイン処理
            window.onload = function() {
                var game = new Game(640, 640);
                //var game = new Game(window.innerWidth, window.innerHeight);
                game.fps = 60;
                game.keybind(90, 'a');      // z
                game.keybind(88, 'b');      // x
                game.keybind(32, "space");  // space
                
                game.onload = function() {
                    var scene = new Scene3D();
                    
                    // ライトをセット
                    var light = new DirectionalLight();
                    light.directionZ = 1;
                    scene.setDirectionalLight(light);
                    
                    // 通常時カメラ
                    var camera = new Camera3D();
                    camera.setEye(0, 200, -250);
                    camera.setCnt(0, 0, 0);
                    scene.setCamera(camera);
                    
                    // 床
                    var floor = new Floor(100, 100, 17, 17, "blue", "white");
                    floor.x = 0;
                    floor.y =-1;
                    floor.z = 0;
                    scene.addChild(floor);
                };
                
                game.start();
            };
            
        </script>
    </head>
    
    <body>
        <h1>gl.enchant.js Plugin - floor.gl.enchant.js - 最小サンプル</h1>
    </body>
    
</html>

Usage

引数は順番に渡す場合と, オブジェクトを引数として渡す場合との2パターンに対応しています.

Arguments

対応する引数はこちら.

パラメータ名 概要 デフォルト値
第一引数 width Number 幅を設定します 100
第二引数 height Number 高さを設定します 100
第三引数 widthDivit Number 横の分割数を設定します. 17
第四引数 heightDivit Number 縦の分割数を設定します. 17
第五引数 color0 Array(16) or String マスの色を設定します. color1 の値と交互に色が設定されます. white
第六引数 color1 Array(16) or String マスの色を設定します. color0 の値と交互に色が設定されます. cyan

Examples

使用例です.

順番に引数を渡す場合

var floor = new Floor(100, 100, 17, 17, "blue", "white");
scene.addChild(floor);

オブジェクトを引数として渡す場合

var floor = new Floor({
    width       : 100,
    height      : 100,
    widthDivit  : 17,
    heightDivit : 17,
    color0      : "blue",
    color1      : "white",
});
scene.addChild(floor);

スイマセン, 前回のエントリーで書くって言ってたウォークスルーについてはちょっと延期します. 近々ちゃんと書きます.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT