読者です 読者をやめる 読者になる 読者になる

CX's Hatena Blog

はてなブログを使ってみるテスト

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

Windows WebGL IE11 Three.js JavaScript HTML5

初心者でも絶対わかる、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);

実行結果

どうでしょうか?ドット絵に見えたら成功です。