var container, stats; var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color; var mouseX = 0, mouseY = 0; 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( 75, window.innerWidth / window.innerHeight, 1, 3000 ); camera.position.z = 1000; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x220018, 0.0007 ); geometry = new THREE.Geometry(); for ( i = 0; i < 50000; i ++ ) { var vertex = new THREE.Vector3(); vertex.x = Math.random() * 200 - 100; vertex.y = Math.random() * 2000 - 1000; vertex.z = Math.random() * 200 - 100; geometry.vertices.push( vertex ); } parameters = [ [ [1, 1, 0.5], 1 ], [ [0.5, 1, 0.5], 1 ], [ [0.90, 1, 0.5], 1 ], [ [0.85, 1, 0.5], 1 ], [ [0.80, 1, 0.5], 1 ], [ [1, 1, 0.5], 1 ], [ [0.5, 1, 0.5], 1 ], [ [0.90, 1, 0.5], 1 ], [ [0.85, 1, 0.5], 1 ] ]; for ( i = 0; i < parameters.length; i ++ ) { size = parameters[i][1]; materials[i] = new THREE.PointCloudMaterial( { size: size } ); particles = new THREE.PointCloud( geometry, materials[i]); particles.rotation.x = Math.random() * 5 particles.rotation.y = Math.random() * 5; particles.rotation.z = Math.random() * 5; scene.add( particles ); } renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentTouchStart( event ) { if ( event.touches.length === 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } } function onDocumentTouchMove( event ) { if ( event.touches.length === 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } } // function animate() { requestAnimationFrame( animate ); render(); } function render() { camera.position.z -= 2; camera.position.x += ( mouseX - camera.position.x ) * 1; camera.position.z += ( - mouseY - camera.position.y ) * 0.05; if(camera.position.z > 2500){ camera.position.z = 2500; } if(camera.position.z < -2500){ camera.position.z = -2500; } camera.lookAt( scene.position ); renderer.render( scene, camera ); }