body {
				background:#000;
				padding:0;
				margin:0;
				overflow:hidden;
			}
var container;
			var camera, scene, renderer, controls;
			var mouseX = 90, mouseY = 90;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			init();
			animate();
			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.set( 1000, 0, 0500 );

				//Controls
				controls = new THREE.TrackballControls( camera );
				var speeds = 5;
				controls.rotateSpeed = 2;
				controls.zoomSpeed = 2;
				controls.panSpeed = 2;

				controls.addEventListener( 'change', render );

				scene = new THREE.Scene();
				var colors = [ 0xfff, 0xb9baff, 0xff2a2a, 0xeeff30 ];
				var geometry = new THREE.Geometry();
				for ( var i = 3000; i > 0; i-- ) {
					var vertex = new THREE.Vector3();
					vertex.x = Math.random() * 500 - 250;
					vertex.y = Math.random() * 500 - 250;
					vertex.z = Math.random() * 500 - 250;
					geometry.vertices.push( vertex );
					geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
					geometry.colors.push( new THREE.Color( colors[ Math.floor( Math.random() * colors.length ) ] ) );
				}
				var material = new THREE.PointsMaterial( { size: 1.5, fog: 0xad6969, vertexColors: THREE.VertexColors, opacity: .7, transparent: true } );
				var mesh = new THREE.Points( geometry, material );
				scene.add( mesh );

				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );

				renderer.autoClearColor = false;

				container.appendChild( renderer.domElement );
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				window.addEventListener( 'resize', onWindowResize, false );

				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setPixelRatio( window.devicePixelRatio );
			}
			function onDocumentMouseMove(event) {//Perspective turn
				mouseX = ( event.clientX + windowHalfX ) * .5;
				mouseY = ( event.clientY + windowHalfY ) * .5;
			}
			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				controls.handleResize();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			//
			function animate() {
				requestAnimationFrame( animate );
				controls.update();
				render();
			}
			function render() {
				camera.position.x += ( mouseX - camera.position.x ) * .5;
				camera.position.y += ( - mouseY - camera.position.y ) * .5;
				renderer.render( scene, camera );
			};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js
  2. https://www.jacobdfrank.com/2016Folio/js/TrackballControls.js/