three.js. random particles demo

mrdoob

2010-06-20 02:23:24

License: MIT License

Fork: 27

Fav: 22

View: 4607

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 98 lines
HTML 0 lines
CSS 9 lines

three.js. random particles demo
three.js (lib)
stats.js (lib)

init();
setInterval(loop, 1000 / 60);

function init() {
  
  container = document.createElement('div');
  document.body.appendChild(container);
  
  camera = new THREE.Camera(0, 0, 1000);
  camera.focus = 200;
  
  scene = new THREE.Scene();
  
  renderer = new THREE.CanvasRenderer();
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  
  for (var i = 0; i < 1000; i++) {
    
    particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 0x808008 + 0x808080, 1));
    particle.size = Math.random() * 10 + 5;
    particle.position.x = Math.random() * 2000 - 1000;
    particle.position.y = Math.random() * 2000 - 1000;
    particle.position.z = Math.random() * 2000 - 1000;
    scene.add(particle);
  }
  
  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() {
  
  camera.position.x += (mouseX - camera.position.x) * .05;
  camera.position.y += (-mouseY - camera.position.y) * .05;
  
  renderer.render(scene, camera);
  
  stats.update();
}

three.js. random particles demo

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/728D/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mrdoob/728D" title="three.js. random particles demo">three.js. random particles demo - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip