【Three.js】格子を作る -

Three.jsを使って、格子を表示するだけのページを作った。
three.js Test

OrbitControls.jsというライブラリのおかげで3Dプログラミングなのにめちゃくちゃ楽。
レンタルサーバーにファイル上げるのくっそ面倒。
サーバー作ってエッチページ作りてえなぁ

詳細の記述は後日気が向いたら。
WebGLRendererの引数にcanvasをそのまま渡していて、「絵が出ねえなぁ」って1時間くらい悩んでいた。

【app.js】

var APP = (function() {
    var self = {};

    var APP = function(canvas) {
        self.scene = new THREE.Scene();
        self.camera = new THREE.PerspectiveCamera(100, canvas.width / canvas.height, 1, 1000);
        self.renderer = new THREE.WebGLRenderer({canvas:canvas});
        self.controls = new THREE.OrbitControls(self.camera);

        self.camera.position.set(1.0,1.0,0.0);

        self.initGrid();
        self.animate();
    }
    
    self.initGrid = function() {
        var grid = new THREE.GridHelper(100, 50);
        self.scene.add(grid);
        self.renderer.render(self.scene, self.camera);
    };

    self.animate = function() {
        self.controls.update();
        self.renderer.render(self.scene, self.camera);
        
        requestAnimationFrame(self.animate);
    };
    return APP;
})();

【index.html】

<!DOCTYPE HTML>
<html>
    <head>
        <title>three.js Test</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script type="text/javascript" src="three.js-master/build/three.min.js"></script>
        <script type="text/javascript" src="three.js-master/examples/js/controls/OrbitControls.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script>
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var app = new APP(canvas);
        </script>
    </body>
</html>