gl.enchant.js 入門 – Step01 DirectionalLight を使ってライトを設置しよう!
『gl.enchant.js 入門 – ざっくりと作る流れをまとめてみました!!』の Step01 です.
平行光源を設置します. ここではまだ何も表示されません.
SAMPLE
今回制作するサンプルはこちら.
CODE
今回作ったサンプル全体のコードです.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gl.enchant.js Guide - Step01 DirectionalLight を使ってライトを設置しよう!</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 にセット
};
game.start();
};
</script>
</head>
<body>
<h1>gl.enchant.js Guide - Step01 DirectionalLight を使ってライトを設置しよう!</h1>
</body>
</html>
TIPS
平行光源とは?
平行光源とは位置に関係なく特定の向きから全てのオブジェクトを照らす光のことを言います.
DirectionalLight クラスとは?
DirectionalLight クラスとは平行光源を設定するクラスです. DirectionalLight は向き(directionX, directionY, directionZ)のパラメータを持っており, この値を変えるとオブジェクトへの光の当たる向きが変わります.
// 例) v(1, 0, 0)への光 var light = new DirectionalLight(); // 平行光源生成 light.directionX = 1; light.directionY = 0; light.directionZ = 0;
次回はカメラの設定について解説します.
[…] Step01 – DirectionalLight を使ってライトを設置しよう! […]