webgl_geometries.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - geometries</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometries</div>
  11. <script type="module">
  12. import * as THREE from '../build/three.module.js';
  13. import Stats from './jsm/libs/stats.module.js';
  14. var camera, scene, renderer, stats;
  15. init();
  16. animate();
  17. function init() {
  18. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  19. camera.position.y = 400;
  20. scene = new THREE.Scene();
  21. var object;
  22. var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
  23. scene.add( ambientLight );
  24. var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
  25. camera.add( pointLight );
  26. scene.add( camera );
  27. var map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
  28. map.wrapS = map.wrapT = THREE.RepeatWrapping;
  29. map.anisotropy = 16;
  30. var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
  31. //
  32. object = new THREE.Mesh( new THREE.SphereBufferGeometry( 75, 20, 10 ), material );
  33. object.position.set( - 300, 0, 200 );
  34. scene.add( object );
  35. object = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 75, 1 ), material );
  36. object.position.set( - 100, 0, 200 );
  37. scene.add( object );
  38. object = new THREE.Mesh( new THREE.OctahedronBufferGeometry( 75, 2 ), material );
  39. object.position.set( 100, 0, 200 );
  40. scene.add( object );
  41. object = new THREE.Mesh( new THREE.TetrahedronBufferGeometry( 75, 0 ), material );
  42. object.position.set( 300, 0, 200 );
  43. scene.add( object );
  44. //
  45. object = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ), material );
  46. object.position.set( - 300, 0, 0 );
  47. scene.add( object );
  48. object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ), material );
  49. object.position.set( - 100, 0, 0 );
  50. scene.add( object );
  51. object = new THREE.Mesh( new THREE.CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
  52. object.position.set( 100, 0, 0 );
  53. scene.add( object );
  54. object = new THREE.Mesh( new THREE.RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
  55. object.position.set( 300, 0, 0 );
  56. scene.add( object );
  57. //
  58. object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
  59. object.position.set( - 300, 0, - 200 );
  60. scene.add( object );
  61. var points = [];
  62. for ( var i = 0; i < 50; i ++ ) {
  63. points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
  64. }
  65. object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
  66. object.position.set( - 100, 0, - 200 );
  67. scene.add( object );
  68. object = new THREE.Mesh( new THREE.TorusBufferGeometry( 50, 20, 20, 20 ), material );
  69. object.position.set( 100, 0, - 200 );
  70. scene.add( object );
  71. object = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 50, 10, 50, 20 ), material );
  72. object.position.set( 300, 0, - 200 );
  73. scene.add( object );
  74. //
  75. renderer = new THREE.WebGLRenderer( { antialias: true } );
  76. renderer.setPixelRatio( window.devicePixelRatio );
  77. renderer.setSize( window.innerWidth, window.innerHeight );
  78. document.body.appendChild( renderer.domElement );
  79. stats = new Stats();
  80. document.body.appendChild( stats.dom );
  81. //
  82. window.addEventListener( 'resize', onWindowResize, false );
  83. }
  84. function onWindowResize() {
  85. camera.aspect = window.innerWidth / window.innerHeight;
  86. camera.updateProjectionMatrix();
  87. renderer.setSize( window.innerWidth, window.innerHeight );
  88. }
  89. //
  90. function animate() {
  91. requestAnimationFrame( animate );
  92. render();
  93. stats.update();
  94. }
  95. function render() {
  96. var timer = Date.now() * 0.0001;
  97. camera.position.x = Math.cos( timer ) * 800;
  98. camera.position.z = Math.sin( timer ) * 800;
  99. camera.lookAt( scene.position );
  100. scene.traverse( function ( object ) {
  101. if ( object.isMesh === true ) {
  102. object.rotation.x = timer * 5;
  103. object.rotation.y = timer * 2.5;
  104. }
  105. } );
  106. renderer.render( scene, camera );
  107. }
  108. </script>
  109. </body>
  110. </html>