aaa.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import * as THREE from 'three';
  2. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  3. let camera, controls, scene, renderer;
  4. init();
  5. //render(); // remove when using next line for animation loop (requestAnimationFrame)
  6. animate();
  7. function init() {
  8. scene = new THREE.Scene();
  9. scene.background = new THREE.Color( 0xcccccc );
  10. scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
  11. renderer = new THREE.WebGLRenderer( { antialias: true } );
  12. renderer.setPixelRatio( window.devicePixelRatio );
  13. renderer.setSize( window.innerWidth, window.innerHeight );
  14. document.body.appendChild( renderer.domElement );
  15. camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
  16. camera.position.set( 400, 200, 0 );
  17. // controls
  18. controls = new OrbitControls( camera, renderer.domElement );
  19. controls.listenToKeyEvents( window ); // optional
  20. //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
  21. controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
  22. controls.dampingFactor = 0.05;
  23. controls.screenSpacePanning = false;
  24. controls.minDistance = 100;
  25. controls.maxDistance = 500;
  26. controls.maxPolarAngle = Math.PI / 2;
  27. // world
  28. const geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
  29. const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
  30. for ( let i = 0; i < 500; i ++ ) {
  31. const mesh = new THREE.Mesh( geometry, material );
  32. mesh.position.x = Math.random() * 1600 - 800;
  33. mesh.position.y = 0;
  34. mesh.position.z = Math.random() * 1600 - 800;
  35. mesh.updateMatrix();
  36. mesh.matrixAutoUpdate = false;
  37. scene.add( mesh );
  38. }
  39. // lights
  40. const dirLight1 = new THREE.DirectionalLight( 0xffffff );
  41. dirLight1.position.set( 1, 1, 1 );
  42. scene.add( dirLight1 );
  43. const dirLight2 = new THREE.DirectionalLight( 0x002288 );
  44. dirLight2.position.set( - 1, - 1, - 1 );
  45. scene.add( dirLight2 );
  46. const ambientLight = new THREE.AmbientLight( 0x222222 );
  47. scene.add( ambientLight );
  48. //
  49. window.addEventListener( 'resize', onWindowResize );
  50. }
  51. function onWindowResize() {
  52. camera.aspect = window.innerWidth / window.innerHeight;
  53. camera.updateProjectionMatrix();
  54. renderer.setSize( window.innerWidth, window.innerHeight );
  55. }
  56. function animate() {
  57. requestAnimationFrame( animate );
  58. controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
  59. render();
  60. }
  61. function render() {
  62. renderer.render( scene, camera );
  63. }