Edges Helper

detect the edges of the object

by intrinsica

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>

JavaScript

var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false});
renderer.setSize(width, height );
renderer.autoClear = true;
document.body.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(22, width/height, 1, 1000);
camera.position.z = 60;
var scene = new THREE.Scene();
var light = new THREE.PointLight(0xffffff, 5, 100);
scene.add(light);

var geometry = new THREE.CubeGeometry(5, 5, .2);
var material = new THREE.MeshBasicMaterial({color:0xff0000});
var mesh= [];
for (var i = 0; i < 10; i ++) {
mesh[i] = new THREE.Mesh(geometry, material);

mesh[i].position.x = 28-(7*i);
mesh[i].position.y = Math.random()*20-(1*i);
mesh[i].position.z = -59;//Math.random()*20 - 100;
mesh[i].rotation.x = Math.random();
mesh[i].rotation.y = Math.random();
scene.add(mesh[i]);

var edges = new THREE.EdgesHelper( mesh[i], 0x000000);
edges.material.linewidth = 1;

scene.add(edges);}

function animate() {
requestAnimationFrame(animate);
for (var i = 0; i < 10; i ++) {
  mesh[i].rotation.z += 0.01;
  mesh[i].rotation.x += 0.001;
  mesh[i].rotation.y += 0.001;
  }
renderer.render(scene, camera);

}
animate();