gl.enchant.js 入門 – Step03 Sphere を使って球体を生成, 表示しよう!
『gl.enchant.js 入門 – ざっくりと作る流れをまとめてみました!!』の Step03 です.
Sphere クラスを使って球体を表示します.ついに表示物がでます!!
SAMPLE
今回制作するサンプルはこちら.
CODE
今回作ったサンプル全体のコードです.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gl.enchant.js Guide - Step03 Sphere を使って球体を生成, 表示しよう!</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 にセット
};
game.start();
};
</script>
</head>
<body>
<h1>gl.enchant.js Guide - Step03 Sphere を使って球体を生成, 表示しよう!</h1>
</body>
</html>
TIPS
Sphere クラスを使って球体を表示しよう!
gl.enchant.js では Sphere というクラスが定義されており, これを使えば, 簡単に球体を表示することができます.
// 球体 var sphere = new Sphere(); // 球体生成 sphere.x = sphere.y = sphere.z = 0; // 位置をセット scene.addChild(sphere); // scene にセット
Sphere の位置を変更してみよう!
Sphere は Sprite3D を継承しているので Sprite3D のパラメータを使用することができます.
x, y, z で位置を変更することができます.
sphere.x = sphere.y = sphere.z = 0; // 位置をセット ↓こっちに変更 sphere.x = 0; sphere.y = 0; sphere.z = 10;
Sphere の色を変えてみよう!
Sphere は mesh というプロパティを持っており, この mesh のプロパティを変更することで見た目を色々と変えることができます.
色変更は mesh の setBaseColor メソッドで行います.
下記の一文を追加すれば
sphere.mesh.setBaseColor("#ff0000");
色が赤になります.
次回は, マウスやキーボードで回転できるようにします.