25,000 Cubes in 3D

by Theo Armour

HTML

<script src='http://mrdoob.github.com/three.js/examples/js/Detector.js'></script>
<script src='http://mrdoob.github.com/three.js/build/three.min.js'></script>
<script src='http://mrdoob.github.com/three.js/examples/js/controls/TrackballControls.js'></script>
<script src='http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js'></script>

JavaScript

if (!Detector.webgl) {
        Detector.addGetWebGLMessage();
    }
    var info, renderer, scene, camera, controls, stats, group;

    init();
    animate();

    function init() {
        var css, light, geometry, material, mesh;

        css = document.body.appendChild(document.createElement('style'));
        css.innerHTML = 'body { font: 600 12pt monospace; margin: 0; overflow: hidden; text-align: center; }';

        info = document.body.appendChild(document.createElement('div'));
        info.style.cssText = 'position: absolute; width: 100%; ';
        info.innerHTML = info.txt = '<h1>25,000 Cubes</h1>' +
            'Use your mouse to pan, zoom and rotate.<br>' +
            '<a href="http://three.js.org" target="_blank">Three.js</a> - ' +
            '<a href="http://www.khronos.org/webgl/" target="_blank">WebGL</a> - ' +
            '<a href="http://jaanga.github.io" target="_blank">Jaanga</a>' +
            '';

        stats = new Stats();
        stats.domElement.style.cssText = 'position: absolute; top: 0px; zIndex: 100; ';
        document.body.appendChild(stats.domElement);

        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(100, 100, 100);
        controls = new THREE.TrackballControls(camera, renderer.domElement);

        // Axes
        function v(x, y, z) {
            return new THREE.Vector3(x, y, z);
        }

        scene.add(new THREE.ArrowHelper(v(1, 0, 0), v(0, 0, 0), 10, 0xcc0000));
        scene.add(new THREE.ArrowHelper(v(0, 1, 0), v(0, 0, 0), 10, 0x00cc00));
        scene.add(new THREE.ArrowHelper(v(0, 0, 1), v(0, 0, 0), 10, 0x0000cc));

        // Assets
        material = new THREE.MeshBasicMaterial({
           ...