scene.js 2.1 KB

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