Array of Objects

by epsilon_is_afraid_of_zeta

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>
<p style='position: absolute; top: 0px;  width: 100%;'>Arrays of Objects
    <br>
    <button onclick="disperseRandom()">disperse objects randomly</button>
    <button onclick="disperseLine()">disperse objects linearly</button>
</p>

JavaScript

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

	var renderer, scene, camera, controls;
	var plane, sphere, item;
	var symbols = [];
	var symbol = new THREE.Object3D();
	var group = new THREE.Object3D();
	var normaldirection = new THREE.Vector3();

	init();
	animate();

	function init() {
	    if (!Detector.webgl) {
	        renderer = new THREE.CanvasRenderer({
	            antialias: true
	        });
	    } else {
	        renderer = new THREE.WebGLRenderer({
	            antialias: true
	        });
	    }

	    var geometry, material, mesh, info;

	    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);

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

	    // set background color to black
	    renderer.setClearColorHex(0x000000, 1);

	    // add stuff that provides a visual frame of reference 
	    material = new THREE.MeshBasicMaterial({
	        color: Math.random() * 0xffffff,
	        side: THREE.DoubleSide
	    });


	    // create the 'symbol' and add to array of symbols		
	    geometryTorus = new THREE.TorusGeometry(4, 0.25, 15, 30);
	    materialTorus = new THREE.MeshBasicMaterial({
	        color: 0x000000
	    });

	    geometryCircle = new THREE.CircleGeometry(4);
	    materialCircle1 = new THREE.MeshBasicMaterial({
	        color: 0x00ffff,
	        opacity: 0.4,
	        side: THREE.FrontSide,
	        transparent: true
	    });
	    materialCircle2 = new THREE.MeshBasicMaterial({
	        color: 0xffff00,
	        opacity: 0.4,
	        side: THREE.BackSide,
	        transparent: true
	    });


	   ...