scene.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. var camera, scene, renderer, group;
  2. function init( canvas, width, height, pixelRatio, path ) {
  3. camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
  4. camera.position.z = 200;
  5. scene = new THREE.Scene();
  6. scene.fog = new THREE.Fog( 0x444466, 100, 400 );
  7. scene.background = new THREE.Color( 0x444466 );
  8. group = new THREE.Group();
  9. scene.add( group );
  10. // we don't use ImageLoader since it has a DOM dependency (HTML5 image element)
  11. var loader = new THREE.ImageBitmapLoader().setPath( path );
  12. loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function ( imageBitmap ) {
  13. var texture = new THREE.CanvasTexture( imageBitmap );
  14. var geometry = new THREE.IcosahedronBufferGeometry( 5, 3 );
  15. var materials = [
  16. new THREE.MeshMatcapMaterial( { color: 0xaa24df, matcap: texture } ),
  17. new THREE.MeshMatcapMaterial( { color: 0x605d90, matcap: texture } ),
  18. new THREE.MeshMatcapMaterial( { color: 0xe04a3f, matcap: texture } ),
  19. new THREE.MeshMatcapMaterial( { color: 0xe30456, matcap: texture } )
  20. ];
  21. for ( var i = 0; i < 100; i ++ ) {
  22. var material = materials[ i % materials.length ];
  23. var mesh = new THREE.Mesh( geometry, material );
  24. mesh.position.x = random() * 200 - 100;
  25. mesh.position.y = random() * 200 - 100;
  26. mesh.position.z = random() * 200 - 100;
  27. mesh.scale.setScalar( random() + 1 );
  28. group.add( mesh );
  29. }
  30. renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
  31. renderer.setPixelRatio( pixelRatio );
  32. renderer.setSize( width, height, false );
  33. animate();
  34. } );
  35. }
  36. function animate() {
  37. // group.rotation.x = Date.now() / 4000;
  38. group.rotation.y = - Date.now() / 4000;
  39. renderer.render( scene, camera );
  40. if ( self.requestAnimationFrame ) {
  41. self.requestAnimationFrame( animate );
  42. } else {
  43. // Firefox
  44. }
  45. }
  46. // PRNG
  47. var seed = 1;
  48. function random() {
  49. var x = Math.sin(seed++) * 10000;
  50. return x - Math.floor(x);
  51. }