Three.js ~ addText x 50

by Lore ZZ

HTML

<script src="https://github.com/mrdoob/three.js/raw/master/build/Three.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/RequestAnimationFrame.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/Stats.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/Detector.js"></script>

CSS

body {
    font-family: Monospace;
    background-color: #ffffff;
    margin: 0px;
    overflow: hidden;
}

JavaScript

/*

Theo Armour 2011-03-26

*/

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;

var camera, scene, renderer;

var mouseX = 0,
    mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.Camera(40, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.set(0, 50, 1000);
    camera.target.position.set(0, 50, 0);

    scene = new THREE.Scene();

    var object, material;

    object = new THREE.Mesh(new Plane(1000, 1000, 50, 50), new THREE.MeshBasicMaterial({
        color: 0x666666,
        opacity: 0.5,
        wireframe: true
    }))

    object.position.set(0, -20, 0);
    object.rotation.set(1.57, 0, 0);
    scene.addObject(object);

    var col, color, x, y, z;
    color = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff"];
    for (var i = 0; i < 50; i++) {
        x = Math.random() * 500 - 250;
        y = Math.random() * 500 - 250;
        z = Math.random() * 500 - 250;
        
        // x = 0;y = 0; z = -100 + i * 20; // coole feeling
        col = color[Math.round(Math.random() * 4)];
        // addText(" ", col, x, y + 1, z);// very flashy! does not help with backgrounds though
        addText("text " + i, col, x, y, z);
        
    }
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.sortObjects = false;

    container.appendChild(renderer.domElement);

    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild(stats.domElement);

    document.addEventListener('mousemove', onDocumentMouseMove, false);

}

function addText(text, color, x, y, z) {
    var ctx = document.createElement("canvas");
    var xc =...