EffectHub.com: your best source for gaming

Recommendation

More Effects...

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 10000 );
var spheres = [];
var mouse = new THREE.Vector2(), INTERSECTED;

controls = new THREE.OrbitControls( camera );
camera.position.z = 1000;

window.addEventListener("resize", function() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );

});

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

renderer.setClearColor( "#fff", 1.0);

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 1 );
scene.add( directionalLight );

for (var i = -100; i < 100; i++) {
	var sphereGeometry = new THREE.SphereGeometry(Math.random() * 20, 32, 32);
	var sphereMaterial = new THREE.MeshPhongMaterial( {color: "#000000"} );
	var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
	sphere.displacement = i * i / 18;
	sphere.delay = Math.random() * 8;
	scene.add(sphere);

sphere.position.x = Math.random() * 25 - 5 * i;
	sphere.position.y = sphere.displacement;
	sphere.position.z = 0;

spheres.push(sphere);
}

var render = function () {
	requestAnimationFrame( render );
    var timer = Date.now() * 0.002;

spheres.forEach(function(sphere) {
		sphere.position.y = sphere.displacement * Math.sin(timer + sphere.delay);
		sphere.position.z = sphere.displacement * Math.cos(timer + sphere.delay);
	});

renderer.render(scene, camera);
};

render();

CSS

HTML

Recommendation

Join Effecthub.com