Edges Helper

detect the edges of the object

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - interactive particles</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #ffffff;
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 0px;
				width: 100%;
				padding: 5px;
				font-family: Monospace;
				font-size: 13px;
				text-align: center;
				font-weight: bold;
			}
			a {
				color: white;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive - particles</div>

		<script src="js/three-lib.js"></script>

		<script src="js/main.js"></script>

	</body>

</html>

JavaScript

const CONSTS = {
	scale: 10,
	lineWidth: 3,
	colorTone: 0xff0000,
	maxAmountOfCubes: 10
}

let cubes = [];

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 500 );
camera.position.z = 30;

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1 );
document.body.appendChild( renderer.domElement );

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

const drawCubes = () => {
	const amountOfCubes = Math.floor(Math.random()*CONSTS.maxAmountOfCubes)
	for (let i = 0; i <= amountOfCubes; i++) {
	window[`cube${i}`] = new Cubic(scene);
	window[`cube${i}`].bind(window[`cube${i}`]);
	}
}

const render = () => {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}

class Cubic {
	constructor(scene) {
		this.geometry = new THREE.CubeGeometry( 5, 5, 5);
		this.material = new THREE.MeshFaceMaterial();
		this.cube = new THREE.Mesh( this.geometry, this.material );
		this.scene = scene
		this.scene.add( this.cube );
		this.setPosition();
		this.addEdges();
		this.addSpheres();
	}

	setPosition() {
		const randomNumber = () => {
			return Math.floor((Math.random() - Math.random())*CONSTS.scale);
		};
		this.cube.position.set(
			randomNumber()*5,
			randomNumber()*3,
			randomNumber()*3
		);
		this.cube.rotation.x += randomNumber();
	  this.cube.rotation.y += randomNumber();
		this.cube.rotation.z += randomNumber();
	}

	addEdges() {
		this.edges = new THREE.EdgesGeometry( this.geometry );
	  this.lineMaterial = new THREE.LineBasicMaterial( {color: 0xffffff});
	  this.lines = new THREE.LineSegments( this.edges, this.lineMaterial );
	  this.lines.material.linewidth = CONSTS.lineWidth;
	  this.cube.add( this.lines );
	}

	addSpheres() {
		const cubeVertices = this.geometry.vertices;
		let spheres = [];

		for...