three.js ~ example ~ Mr.doob

2012-01-05 ~

by Eve Weinberg

HTML

<script src="http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js"></script>
<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>
<div id="container"></div>

CSS

body {
				color: #cccccc;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #000000;
				margin: 0px;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {

				color: #0080ff;
			}

JavaScript

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

var container, stats;

var camera, scene, renderer;

var mesh;

init();
animate();

function init() {

    container = document.getElementById('container');

    //

    camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 4000);
    camera.position.z = 2750;

    scene = new THREE.Scene();


    var segments = 10000;

    var geometry = new THREE.BufferGeometry();
    var material = new THREE.LineBasicMaterial({
        vertexColors: true
    });

    geometry.attributes = {
        position: {
            itemSize: 3,
            array: new Float32Array(segments * 3),
            numItems: segments * 3
        },
        color: {
            itemSize: 3,
            array: new Float32Array(segments * 3),
            numItems: segments * 3
        }
    };

    var positions = geometry.attributes.position.array;
    var colors = geometry.attributes.color.array;

    var r = 800;

    for (var i = 0; i < segments; i++) {

        var x = Math.random() * r - r / 2;
        var y = Math.random() * r - r / 2;
        var z = Math.random() * r - r / 2;

        // positions

        positions[i * 3] = x;
        positions[i * 3 + 1] = y;
        positions[i * 3 + 2] = z;

        // colors

        colors[i * 3] = (x / r) + 0.5;
        colors[i * 3 + 1] = (y / r) + 0.5;
        colors[i * 3 + 2] = (z / r) + 0.5;

    }

    geometry.computeBoundingSphere();

    mesh = new THREE.Line(geometry, material);
    scene.add(mesh);

    //

    renderer = new THREE.WebGLRenderer({
        antialias: false,
        clearColor: 0x000000,
        clearAlpha: 0,
        alpha: true,
        preserveDrawingBuffer: true 
        /*****
        preserveDrawingBuffer to allow screenshot
        *****/
    });
    renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.physicallyBasedShading = true;

   ...