mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-13 23:16:07 +10:00
alteredq
8227d9f118
Work in progress, caveats: - sort happens just inside one ParticleSystems, so everything gets messed up when more ParticleSystems are in the same screen space - not yet solved proper order of operations, if you change object transform, you need to update ParticleSystem object matrix manually before rendering (so that sort works, otherwise it will use transform from previous frame) Also fixed transparency in fog and did small optimizations in WebGLRenderer.
218 lines
5.5 KiB
HTML
218 lines
5.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - particles - webgl</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
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;
|
|
|
|
}
|
|
|
|
#oldie {
|
|
font-family:monospace;
|
|
font-size:13px;
|
|
|
|
text-align:center;
|
|
background:#eee;
|
|
color:#000;
|
|
padding:1em;
|
|
|
|
width:475px;
|
|
margin:5em auto 0;
|
|
|
|
display:none;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particles example
|
|
</div>
|
|
|
|
<center>
|
|
<div id="oldie">
|
|
Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
|
|
and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
|
|
<br/>
|
|
Please try in
|
|
<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
|
|
<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
|
|
<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
|
|
</div>
|
|
</center>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( !is_browser_compatible() ) {
|
|
|
|
document.getElementById( "oldie" ).style.display = "block";
|
|
|
|
}
|
|
|
|
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();
|
|
setInterval( loop, 1000 / 60 );
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.Camera( 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 < 4000; i++ ) {
|
|
|
|
vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
|
|
geometry.vertices.push( new THREE.Vertex( vector ) );
|
|
|
|
}
|
|
|
|
parameters = [ [ [1.0, 1.0, 1.0], 5 ], [ [0.95, 1, 1], 4 ], [ [0.90, 1, 1], 3 ], [ [0.85, 1, 1], 2 ], [ [0.80, 1, 1], 1 ] ];
|
|
//parameters = [ [ 0xff0000, 5 ], [ 0xff3300, 4 ], [ 0xff6600, 3 ], [ 0xff9900, 2 ], [ 0xffaa00, 1 ] ];
|
|
//parameters = [ [ 0xffffff, 5 ], [ 0xdddddd, 4 ], [ 0xaaaaaa, 3 ], [ 0x999999, 2 ], [ 0x777777, 1 ] ];
|
|
|
|
for ( i = 0; i < parameters.length; i++ ) {
|
|
|
|
size = parameters[i][1];
|
|
color = parameters[i][0];
|
|
|
|
//materials[i] = new THREE.ParticleBasicMaterial( { color: color, size: size } );
|
|
|
|
materials[i] = new THREE.ParticleBasicMaterial( { size: size } );
|
|
materials[i].color.setHSV( color[0], color[1], color[2] );
|
|
|
|
particles = new THREE.ParticleSystem( geometry, materials[i] );
|
|
particles.rotation.x = Math.random() * 6;
|
|
particles.rotation.y = Math.random() * 6;
|
|
particles.rotation.z = Math.random() * 6;
|
|
scene.addObject( particles );
|
|
|
|
}
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild( stats.domElement );
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
|
}
|
|
|
|
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 loop() {
|
|
|
|
var time = new Date().getTime() * 0.00005;
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
|
|
|
|
for( i = 0; i < scene.objects.length; i++ ) {
|
|
|
|
scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
|
|
|
|
}
|
|
|
|
for( i = 0; i < materials.length; i++ ) {
|
|
|
|
color = parameters[i][0];
|
|
|
|
h = ( 360 * ( color[0] + time ) % 360 ) / 360;
|
|
materials[i].color.setHSV( h, color[1], color[2] );
|
|
|
|
}
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
stats.update();
|
|
}
|
|
|
|
function is_browser_compatible() {
|
|
|
|
// WebGL support
|
|
|
|
try { var test = new Float32Array(1); } catch(e) { return false; }
|
|
|
|
// Web workers
|
|
|
|
return !!window.Worker;
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|