gl.enchant.js 上で簡単に床を表示するプラグイン floor.gl.enchant.js を作りました.
gl.enchant.js 用プラグイン floor.gl.enchant.js を作りました.
3D の床を表示するプラグインです.
使い方は, Sprite3D を継承しているので基本的に Plane や Sphere と同じです.
「3D 上を動きまわるサンプルを作ったはいいけどまわりが真っ暗で動いているかわからないよー」なんてときに使って下さい. 私がそんなときに作ったのを抜き出しただけのプラグインなので…
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
引数は順番に渡す場合と, オブジェクトを引数として渡す場合との２パターンに対応しています.
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);
スイマセン, 前回のエントリーで書くって言ってたウォークスルーについてはちょっと延期します. 近々ちゃんと書きます.
よかったら使って下さい.
『gl.enchant.js 上で簡単に床を表示するプラグイン floor.gl.enchant.js を作りました.』
http://t.co/tDXVX1AS
#javascript #webgl
よかったら使って下さい.
『gl.enchant.js 上で簡単に床を表示するプラグイン floor.gl.enchant.js を作りました.』
http://t.co/tDXVX1AS
#javascript #webgl