-
-
Save danielsamuels/f3a895bcf46f5620c4e04310b9824a4c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>three.js webgl - 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 { | |
background-color: #000000; | |
margin: 0px; | |
overflow: hidden; | |
font-family:Monospace; | |
font-size:13px; | |
text-align:center; | |
font-weight: bold; | |
text-align:center; | |
} | |
a { | |
color:#0078ff; | |
} | |
#info { | |
color: #fff; | |
position: absolute; | |
top: 0px; width: 100%; | |
padding: 5px; | |
z-index: 100; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="info"> | |
<a href="http://threejs.org" target="_blank">three.js</a> - webgl particles example | |
</div> | |
<script src="../build/three.js"></script> | |
<script src="js/Detector.js"></script> | |
<script src="js/libs/stats.min.js"></script> | |
<script> | |
if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); | |
var container, stats; | |
var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, size; | |
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( 0x000000, 0.0007 ); | |
geometry = new THREE.Geometry(); | |
for ( i = 0; i < 5000; i ++ ) { | |
var vertex = new THREE.Vector3(); | |
vertex.x = Math.random() * 2000 - 1000; | |
vertex.y = Math.random() * 2000 - 1000; | |
vertex.z = Math.random() * 2000 - 1000; | |
geometry.vertices.push( vertex ); | |
} | |
parameters = [ | |
[ [1, 1, 0.5], 5 ], | |
[ [0.95, 1, 0.5], 4 ], | |
[ [0.90, 1, 0.5], 3 ], | |
[ [0.85, 1, 0.5], 2 ], | |
[ [0.80, 1, 0.5], 1 ] | |
]; | |
for ( i = 0; i < parameters.length; i ++ ) { | |
color = parameters[i][0]; | |
size = parameters[i][1]; | |
materials[i] = new THREE.PointsMaterial( { size: size } ); | |
particles = new THREE.Points( geometry, materials[i] ); | |
particles.rotation.x = Math.random() * 6; | |
particles.rotation.y = Math.random() * 6; | |
particles.rotation.z = Math.random() * 6; | |
scene.add( particles ); | |
} | |
renderer = new THREE.WebGLRenderer(); | |
renderer.setPixelRatio( window.devicePixelRatio ); | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
container.appendChild( renderer.domElement ); | |
stats = new Stats(); | |
container.appendChild( stats.dom ); | |
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(); | |
stats.update(); | |
} | |
function render() { | |
var time = Date.now() * 0.00005; | |
camera.position.x += ( mouseX - camera.position.x ) * 0.05; | |
camera.position.y += ( - mouseY - camera.position.y ) * 0.05; | |
camera.lookAt( scene.position ); | |
for ( i = 0; i < scene.children.length; i ++ ) { | |
var object = scene.children[ i ]; | |
if ( object instanceof THREE.Points ) { | |
object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) ); | |
} | |
} | |
for ( i = 0; i < materials.length; i ++ ) { | |
color = parameters[i][0]; | |
// Divide by 360 == 0 - 1. Divide by 3600 == 0 - 0.1 | |
h = ( 360 * ( color[0] + time ) % 360 ) / 3600; | |
materials[i].color.setHSL( h, color[1], color[2] ); | |
} | |
renderer.render( scene, camera ); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment