Three.js spinning cubes - prototype.

index.html

<div id="main-container">
  <script src="./main.js"><script/>
</div>

script.js

/**
 * Variables and properties.
 */
var scene = new THREE.Scene();
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	1,
	10000
);
camera.position.z = 1000;
scene.add(camera);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const TOTAL = 20; // Number of items in ring field.
var items = []; // Circulating item properties.

/**
 * Item properties.
 */
class Item {
	constructor(mesh, radius, spin, velocity = 0, ecliptic = 0) {
		this.mesh = mesh; // THREE.Mesh type
		this.spin = spin; // Vector3 type
		this.radius = radius; // Vector3 type
		this.velocity = velocity;
		this.ecliptic = ecliptic;
	}

	/**
	 * Sets initial position.
	 */
	initPosition(iPosition) {
		this.mesh.position.set(iPosition.x, iPosition.y, iPosition.z);
	}
	
	/**
	* Rotate the mesh object over input time.
	*/
	rotateDegrees(dTime)
	{
		this.mesh.rotation.x += this.spin.x * dTime;
		this.mesh.rotation.y += this.spin.y * dTime;
		this.mesh.rotation.z += this.spin.z * dTime;
	}
}

/**
 * Generates a random color:
 * @return: Color in 0x000000 format.
 */
function randomColor() {
	//return new THREE.Color("0x" + Math.floor(Math.random()*16777215).toString(16));
	return new THREE.Color(Math.random(), Math.random(), Math.random());
}

/**
 * Generates a random position as Vector3(x, y, z).
 */
function randomPosition() {
	const DISTANCE = 1000;
	function posRange() {
		return Math.random() * (DISTANCE + 1) - DISTANCE / 2;
	}
	return new THREE.Vector3(posRange(), posRange(), posRange());
}

/**
 * A value between low (inclusive) and high (inclusive).
 * @returns A value between low (inclusive) and high (inclusive).
 */
function fromRange(low, high) {
	return Math.random() * (high - low + 1) + low;
}

/**
 * Generate number of items.
 */
for (let i = 0; i < TOTAL; i++) {
	let cubeGeometry = new THREE.BoxGeometry(100, 100, 100);
	let cubeMaterial = new THREE.MeshLambertMaterial({
		color: randomColor(),
		wireframe: false
	});
	let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

	scene.add(cube);

	let cubeItem = new Item(cube, randomPosition(), new THREE.Vector3(Math.random(), Math.random(), Math.random()));
	cubeItem.initPosition(randomPosition());
	
	items.push(cubeItem);
}

/**
Skybox,
*/
var skyboxGeometry = new THREE.BoxGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({
	color: 0x000000,
	side: THREE.BackSide
});
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
scene.add(skybox);

var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 0, 0);
scene.add(pointLight);

/**
 * Render animation.
 */
function render() {
	requestAnimationFrame(render);
	let delta = clock.getDelta();

	for (var x = 0; x < TOTAL; x++) {
		items[x].rotateDegrees(delta);
	}

	renderer.render(scene, camera);
}

render();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

style.css

body 
{
	font-family: Monospace;
	font-weight: bold;
	background-color: black;
	margin: 0px;
	overflow: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
}

three-js-spinning-cubes-prototype.markdown

Three.js spinning cubes - prototype.

A Pen by Andrew Khassapov on CodePen.

License.

Basic THREE.js prototype.

A specific number of randomly positioned, coloured and rotating cubes.