スポットライトでドット絵を描いてみるテスト

初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ | HTML5Experts.jp

@yomotsu さんの three.js の記事（分かりやすい！）に触発されて、個人的に苦手分野の光源について試してみました。

f:id:cx20:20140208131122p:plain

プログラム概要

1.ドット絵を用意する
2.スポットライトを用意する
3.スポットライトの位置と色を変えることでドット絵を表現してみる

ソースコード

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello, Three.js World!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://jsdo.it/lib/three.js-r60/js"></script>
</head>
<body>
<div id="container"></div> 
<script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js

var X_START_POS = -45;
var Y_START_POS = 45;
var DOT_SIZE = 6;

// 1. ドット絵を用意する

// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□
// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□
// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□
// ‥‥‥‥‥■■■□□■□‥■■■
// ‥‥‥‥■□■□□□■□□■■■
// ‥‥‥‥■□■■□□□■□□□■
// ‥‥‥‥■■□□□□■■■■■‥
// ‥‥‥‥‥‥□□□□□□□■‥‥
// ‥‥■■■■■〓■■■〓■‥‥‥
// ‥■■■■■■■〓■■■〓‥‥■
// □□■■■■■■〓〓〓〓〓‥‥■
// □□□‥〓〓■〓〓□〓〓□〓■■
// ‥□‥■〓〓〓〓〓〓〓〓〓〓■■
// ‥‥■■■〓〓〓〓〓〓〓〓〓■■
// ‥■■■〓〓〓〓〓〓〓‥‥‥‥‥
// ‥■‥‥〓〓〓〓‥‥‥‥‥‥‥‥
var dataSet = [
    "無","無","無","無","無","無","無","無","無","無","無","無","無","肌","肌","肌",
    "無","無","無","無","無","無","赤","赤","赤","赤","赤","無","無","肌","肌","肌",
    "無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","赤","赤","肌","肌",
    "無","無","無","無","無","茶","茶","茶","肌","肌","茶","肌","無","赤","赤","赤",
    "無","無","無","無","茶","肌","茶","肌","肌","肌","茶","肌","肌","赤","赤","赤",
    "無","無","無","無","茶","肌","茶","茶","肌","肌","肌","茶","肌","肌","肌","赤",
    "無","無","無","無","茶","茶","肌","肌","肌","肌","茶","茶","茶","茶","赤","無",
    "無","無","無","無","無","無","肌","肌","肌","肌","肌","肌","肌","赤","無","無",
    "無","無","赤","赤","赤","赤","赤","青","赤","赤","赤","青","赤","無","無","無",
    "無","赤","赤","赤","赤","赤","赤","赤","青","赤","赤","赤","青","無","無","茶",
    "肌","肌","赤","赤","赤","赤","赤","赤","青","青","青","青","青","無","無","茶",
    "肌","肌","肌","無","青","青","赤","青","青","黄","青","青","黄","青","茶","茶",
    "無","肌","無","茶","青","青","青","青","青","青","青","青","青","青","茶","茶",
    "無","無","茶","茶","茶","青","青","青","青","青","青","青","青","青","茶","茶",
    "無","茶","茶","茶","青","青","青","青","青","青","青","無","無","無","無","無",
    "無","茶","無","無","青","青","青","青","無","無","無","無","無","無","無","無"
];

function getRgbColor( c )
{
    var colorHash = {
        "無":0x000000,
        "白":0xffffff,
        "肌":0xffcccc,
        "茶":0x800000,
        "赤":0xff0000,
        "黄":0xffff00,
        "緑":0x00ff00,
        "水":0x00ffff,
        "青":0x0000ff,
        "紫":0x800080
    };
    return colorHash[ c ];
}

var main = function () {
    var scene = new THREE.Scene();

    var width = 465;
    var height = 465;
    var fov = 60;
    var aspect = width / height;
    var near = 1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0, 0, 100);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    // 2.スポットライトを用意する
    var lights = [];
    for (var i = 0; i < 3; i++) {
        var light = new THREE.SpotLight();
        light.angel = Math.PI/100;
        lights.push(light);
        scene.add(light);
    }

    var geometry = new THREE.CubeGeometry(100, 100, 5);
    var material = new THREE.MeshPhongMaterial({
        color: 0xffffff
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    var timer = 0;

    (function renderLoop() {
        requestAnimationFrame(renderLoop);

        // 3.スポットライトの位置と色を変えることでドット絵を表現してみる
        for (var i = 0; i < lights.length; i++) {
            var pos = (timer + 16 * i) % dataSet.length;
            var x = Math.floor(pos % 16) * DOT_SIZE + X_START_POS;
            var y = -Math.floor(pos / 16) * DOT_SIZE + Y_START_POS;
            lights[i].color.setHex(getRgbColor(dataSet[pos]));
            lights[i].position.set(x, y, 10);
            lights[i].target.position.set(x, y, 0);
        }
        renderer.render(scene, camera);

        timer++;
    })();
};

window.addEventListener('DOMContentLoaded', main, false);