gl.enchant.js 入門 – Step04 タッチやキーボードでオブジェクトを回せるようにしよう!
『gl.enchant.js 入門 – ざっくりと作る流れをまとめてみました!!』の Step04 です.
キーボードやマウスで Sphere を回転できるようにしてみましょう.
SAMPLE
今回制作するサンプルはこちら.
CODE
今回作ったサンプル全体のコードです.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gl.enchant.js Guide - step04 タッチやキーボードでオブジェクトを回せるようにしよう!</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>
// おまじない
enchant();
window.onload = function() {
var game = new Game(640, 640);
game.onload = function() {
// 3D 用シーン生成
var scene = new Scene3D();
// ライト生成
var light = new DirectionalLight(); // 平行光源生成
light.directionZ =-1; // 向き
light.color = [1.0, 1.0, 1.0]; // 色
scene.setDirectionalLight(light); // scene にセット
// カメラ生成
var camera = new Camera3D(); // カメラ生生
camera.x = 0; camera.y = 0; camera.z = -10; // カメラ位置をセット
camera.centerX = 0; camera.centerY = 0; camera.centerZ = 0; // 注視点をセット
scene.setCamera(camera); // scene にセット
// 球体
var sphere = new Sphere(); // 球体生成
sphere.x = sphere.y = sphere.z = 0; // 位置をセット
scene.addChild(sphere); // scene にセット
// モデルを回転
var phi = 0; // X軸回転値
var theta = 0; // Y軸回転値
var offsetX = 0; // touch の offsetX
var offsetY = 0; // touch の offsetY
var matrix = new mat4.create(); // 回転行列用マトリックスバッファ
// タッチイベント登録
game.rootScene.addEventListener("touchstart", function(e) {
offsetX = e.x;
offsetY = e.y;
});
game.rootScene.addEventListener("touchmove", function(e) {
// タッチによる回転
theta += (e.x -offsetX) / 160; // 差分/160だけ回転
offsetX = e.x;
phi += (e.y - offsetY) / 160; // 差分/160だけ回転
offsetY = e.y;
});
// 更新イベント登録
game.rootScene.addEventListener("enterframe", function(e)
{
var input = game.input;
// 十字キーによる回転
if (game.input.up) { phi -= 0.05; }
if (game.input.down) { phi += 0.05; }
if (game.input.right) { theta += 0.05; }
if (game.input.left) { theta -= 0.05; }
// Y軸, X軸回転行列を作成
mat4.identity(matrix); // 単位行列化
mat4.rotateY(matrix, theta); // Y軸回転
mat4.rotateX(matrix, phi); // X軸回転
// 回転行列をセット
sphere.rotation = matrix;
});
};
game.start();
};
</script>
</head>
<body>
<h1>gl.enchant.js Guide - Step04 タッチやキーボードでオブジェクトを回せるようにしよう!</h1>
</body>
</html>
TIPS
タッチやキーボードでオブジェクトを回転できるようにしよう!
この step ではタッチやキーボードに反応する処理を追加しています.
処理の流れは
- タッチもしくはキーボードで theta(横回転値), phi(縦回転値)が変わる処理を追加
- matrix(単位行列)を用意
- theta, phi の値をつかってY軸回転, X軸回転させる
- sphere.rotation に matrix をセット
となっています.
// モデルを回転
var phi = 0; // X軸回転値
var theta = 0; // Y軸回転値
var offsetX = 0; // touch の offsetX
var offsetY = 0; // touch の offsetY
var matrix = new mat4.create(); // 回転行列用マトリックスバッファ
// タッチイベント登録
game.rootScene.addEventListener("touchstart", function(e) {
offsetX = e.x;
offsetY = e.y;
});
game.rootScene.addEventListener("touchmove", function(e) {
// タッチによる回転
theta += (e.x -offsetX) / 160; // 差分/160だけ回転
offsetX = e.x;
phi += (e.y - offsetY) / 160; // 差分/160だけ回転
offsetY = e.y;
});
// 更新イベント登録
game.rootScene.addEventListener("enterframe", function(e)
{
var input = game.input;
// 十字キーによる回転
if (game.input.up) { phi -= 0.05; }
if (game.input.down) { phi += 0.05; }
if (game.input.right) { theta += 0.05; }
if (game.input.left) { theta -= 0.05; }
// Y軸, X軸回転行列を作成
mat4.identity(matrix); // 単位行列化
mat4.rotateY(matrix, theta); // Y軸回転
mat4.rotateX(matrix, phi); // X軸回転
// 回転行列をセット
sphere.rotation = matrix;
});
『gl.enchant.js 入門 – ざっくりと作る流れをまとめてみました!!』 はこれで終わりです.
ホントに全体的にざっくりしちゃいましたw 質問や間違いなどあれば気軽に連絡下さい.
gl.enchant.js 入門 – Step04 タッチやキーボードでオブジェクトを回せるようにしよう! http://t.co/Mk7YLoYloK とりあえずこのありがたいコードをコピペして試してみます。
http://t.co/Mk7YLoYloK この人のコードほぼコピペしたのち、yeomanベースで書き換え中。http://t.co/1WvZPEKAiJ
RT @h_demon: http://t.co/Mk7YLoYloK この人のコードほぼコピペしたのち、yeomanベースで書き換え中。http://t.co/1WvZPEKAiJ
いい記事をありがとうございます。
簡単に作る事ができました！