gl.enchant.js 用に作ったプラグイン debug-camera3d.gl.enchant.js を, 機能を絞って使いやすくしてみた
以前『gl.enchant.js 上でカメラを自由に動かせるようにするプラグイン debug-camera3d.gl.enchant.js を作りました』 で公開したプラグイン debug-camera3d.gl.enchant.js を少し修正して使いやすくしてみました.
Sample and Download
今回制作したサンプルはこちら.
操作方法はこちら
操作方法
| 回転 | マウスでドラッグ |
|---|---|
| 移動 | ‘z’ を押しながらマウスでドラッグ & ドロップ |
| ズーム | マウスホイールを回転 |
一般的なモデル編集ツールにあわせています.
Donwload はこちらから出来ます.
Usage
使い方はいたって簡単. DebugCamera3D インスタンスを生成し, enable を呼ぶだけです.
var camera = new DebugCamera3D(); scene.setCamera(camera); camera.enable(game.rootScene);
これだけでマウスの動作によってカメラが動くようになります.
enable に渡している引数が Scene3D ではなく game が持っている Scene である点にだけ注意してください.
Code
今回制作したサンプルの全体コードです.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gl.enchant.js Plugin - debug-camera3d.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 type="text/javascript" src="debug-camera3d.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 DebugCamera3D();
scene.setCamera(camera);
camera.enable(game.rootScene);
// ラベル
var cameraInfoLabel = new Label();
cameraInfoLabel.moveTo(12, 20);
cameraInfoLabel.color = "white";
cameraInfoLabel.font = "20px 'Consolas', 'Monaco', 'ＭＳ ゴシック'";
cameraInfoLabel._element.style.textShadow = "2px 2px 2px black";
cameraInfoLabel._element.style.whiteSpace = "pre";
game.rootScene.addChild(cameraInfoLabel);
cameraInfoLabel.addEventListener("enterframe", function() {
this.text = "";
this.text += "[CAMERA PARAMETER]<br />";
this.text += " Eye : (" + camera.x.toFixed() + ',' + camera.y.toFixed() + ',' + camera.z.toFixed() + ")<br />";
this.text += " Cnt : (" + camera.centerX.toFixed() + ',' + camera.centerY.toFixed() + ',' + camera.centerZ.toFixed() + ")<br />";
this.text += " Up : (" + camera.upVectorX.toFixed() + ',' + camera.upVectorY.toFixed() + ',' + camera.upVectorZ.toFixed() + ")<br />";
this.text += " Theta: " + camera.theta.toFixed() + "<br />";
this.text += " Phi : " + camera.phi.toFixed() + "<br />";
this.text += " Distance : " + camera.distance.toFixed() + "<br />";
this.text += " Direction : (" + camera.direction[0].toFixed(2) + ',' + camera.direction[1].toFixed(2) + ',' + camera.direction[2].toFixed(2) + ")<br />";
});
// 床
var floor = new Floor(100, 100, 17, 17, "red", "white");
floor.x = 0; floor.y =-1; floor.z = 0;
scene.addChild(floor);
// 分かりやすいように注視点に球体を表示しておく
var sphere = new Sphere();
scene.addChild(sphere);
// space キーを押した際は camera のパラメータをリセットする
game.addEventListener("spacebuttondown", function(e) { camera.reset(); });
};
game.start();
};
</script>
</head>
<body>
</body>
</html>
一時間後ぐらいにメタセコの記事を上げます. よかったら見てください.
[…] 今回制作したサンプルの全体コードです. debug-camera3d を使ったり ドラッグ & ドロップに対応したりとなんやかんやしています. […]
作りと使い方をシンプルにしてみました.
『gl.enchant.js 用に作ったプラグイン debug-camera3d.gl.enchant.js を, 機能を絞って使いやすくしてみた』
http://t.co/tmknrD9q
#javascript #webgl
作りと使い方をシンプルにしてみました.
『gl.enchant.js 用に作ったプラグイン debug-camera3d.gl.enchant.js を, 機能を絞って使いやすくしてみた』
http://t.co/tmknrD9q
#javascript #webgl