Three.js for sumyblog brand

by mingjian sun

HTML

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="//cdn.bootcss.com/three.js/r80/three.js"></script>
<header class="index-header" id="index-canvas-container"></header>

CSS

body {
  width: 100vw;
  height: 100vh;
}

header {
  width: 100%;
  height: 100%;
}

JavaScript

var WINDOWS_HEIGHT;
var WINDOWS_WIDTH;

var lastTime;
var canvasElement = [];
var acc = 0;
var dt = 1000 / 60;

var cubeGroup = new THREE.Object3D();
var scene;
var CUBE_SIZE = 25;

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */
            element) {
            return window.setTimeout(callback, 1000 / 60);
        };
})();

$(function() {
    WINDOWS_HEIGHT = $('.index-header').height();
    WINDOWS_WIDTH = $('.index-header').width();

    // scene and camera
    scene = new THREE.Scene();
    var camera = new THREE.OrthographicCamera(WINDOWS_WIDTH / -2,
        WINDOWS_WIDTH / 2, WINDOWS_HEIGHT / 2, WINDOWS_HEIGHT /
        -2, -500, 1000);
    camera.position.x = 0;
    camera.position.y = CUBE_SIZE * 2;
    camera.position.z = CUBE_SIZE * 2;

    // renderer
    var renderer = new THREE.WebGLRenderer();
    //var renderer = new THREE.CanvasRenderer();
    renderer.setClearColor(0xf0f0f0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(WINDOWS_WIDTH, WINDOWS_HEIGHT);
    document.getElementById('index-canvas-container').appendChild(
        renderer.domElement);

    // line table
    var widthsize = 24 * CUBE_SIZE,
        heightsize = 5 * CUBE_SIZE,
        step = CUBE_SIZE;

    var geometry = new THREE.Geometry();
    for (var i = -heightsize; i <= heightsize; i += step) {
        geometry.vertices.push(new THREE.Vector3(-widthsize, 0, i));
        geometry.vertices.push(new THREE.Vector3(widthsize, 0, i));
    }
    for (var i = -widthsize; i <= widthsize; i += step) {
        geometry.vertices.push(new THREE.Vector3(i, 0, -heightsize));
        geometry.vertices.push(new THREE.Vector3(i, 0, heightsize));
    }
    var material = new...