css3d_sprites.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>three.js css3d - sprites</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. <style>
  9. body {
  10. background-color: #fff;
  11. color: #000;
  12. }
  13. a {
  14. color: #48f;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sprites</div>
  20. <div id="container"></div>
  21. <!-- Import maps polyfill -->
  22. <!-- Remove this when import maps will be widely supported -->
  23. <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  24. <script type="importmap">
  25. {
  26. "imports": {
  27. "three": "../build/three.module.js",
  28. "three/addons/": "./jsm/"
  29. }
  30. }
  31. </script>
  32. <script type="module">
  33. import * as THREE from 'three';
  34. import { TWEEN } from 'three/addons/libs/tween.module.min.js';
  35. import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
  36. import { CSS3DRenderer, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';
  37. let camera, scene, renderer;
  38. let controls;
  39. const particlesTotal = 512;
  40. const positions = [];
  41. const objects = [];
  42. let current = 0;
  43. init();
  44. animate();
  45. function init() {
  46. camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
  47. camera.position.set( 600, 400, 1500 );
  48. camera.lookAt( 0, 0, 0 );
  49. scene = new THREE.Scene();
  50. const image = document.createElement( 'img' );
  51. image.addEventListener( 'load', function () {
  52. for ( let i = 0; i < particlesTotal; i ++ ) {
  53. const object = new CSS3DSprite( image.cloneNode() );
  54. object.position.x = Math.random() * 4000 - 2000,
  55. object.position.y = Math.random() * 4000 - 2000,
  56. object.position.z = Math.random() * 4000 - 2000;
  57. scene.add( object );
  58. objects.push( object );
  59. }
  60. transition();
  61. } );
  62. image.src = 'textures/sprite.png';
  63. // Plane
  64. const amountX = 16;
  65. const amountZ = 32;
  66. const separationPlane = 150;
  67. const offsetX = ( ( amountX - 1 ) * separationPlane ) / 2;
  68. const offsetZ = ( ( amountZ - 1 ) * separationPlane ) / 2;
  69. for ( let i = 0; i < particlesTotal; i ++ ) {
  70. const x = ( i % amountX ) * separationPlane;
  71. const z = Math.floor( i / amountX ) * separationPlane;
  72. const y = ( Math.sin( x * 0.5 ) + Math.sin( z * 0.5 ) ) * 200;
  73. positions.push( x - offsetX, y, z - offsetZ );
  74. }
  75. // Cube
  76. const amount = 8;
  77. const separationCube = 150;
  78. const offset = ( ( amount - 1 ) * separationCube ) / 2;
  79. for ( let i = 0; i < particlesTotal; i ++ ) {
  80. const x = ( i % amount ) * separationCube;
  81. const y = Math.floor( ( i / amount ) % amount ) * separationCube;
  82. const z = Math.floor( i / ( amount * amount ) ) * separationCube;
  83. positions.push( x - offset, y - offset, z - offset );
  84. }
  85. // Random
  86. for ( let i = 0; i < particlesTotal; i ++ ) {
  87. positions.push(
  88. Math.random() * 4000 - 2000,
  89. Math.random() * 4000 - 2000,
  90. Math.random() * 4000 - 2000
  91. );
  92. }
  93. // Sphere
  94. const radius = 750;
  95. for ( let i = 0; i < particlesTotal; i ++ ) {
  96. const phi = Math.acos( - 1 + ( 2 * i ) / particlesTotal );
  97. const theta = Math.sqrt( particlesTotal * Math.PI ) * phi;
  98. positions.push(
  99. radius * Math.cos( theta ) * Math.sin( phi ),
  100. radius * Math.sin( theta ) * Math.sin( phi ),
  101. radius * Math.cos( phi )
  102. );
  103. }
  104. //
  105. renderer = new CSS3DRenderer();
  106. renderer.setSize( window.innerWidth, window.innerHeight );
  107. document.getElementById( 'container' ).appendChild( renderer.domElement );
  108. //
  109. controls = new TrackballControls( camera, renderer.domElement );
  110. //
  111. window.addEventListener( 'resize', onWindowResize );
  112. }
  113. function onWindowResize() {
  114. camera.aspect = window.innerWidth / window.innerHeight;
  115. camera.updateProjectionMatrix();
  116. renderer.setSize( window.innerWidth, window.innerHeight );
  117. }
  118. function transition() {
  119. const offset = current * particlesTotal * 3;
  120. const duration = 2000;
  121. for ( let i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {
  122. const object = objects[ i ];
  123. new TWEEN.Tween( object.position )
  124. .to( {
  125. x: positions[ j ],
  126. y: positions[ j + 1 ],
  127. z: positions[ j + 2 ]
  128. }, Math.random() * duration + duration )
  129. .easing( TWEEN.Easing.Exponential.InOut )
  130. .start();
  131. }
  132. new TWEEN.Tween( this )
  133. .to( {}, duration * 3 )
  134. .onComplete( transition )
  135. .start();
  136. current = ( current + 1 ) % 4;
  137. }
  138. function animate() {
  139. requestAnimationFrame( animate );
  140. TWEEN.update();
  141. controls.update();
  142. const time = performance.now();
  143. for ( let i = 0, l = objects.length; i < l; i ++ ) {
  144. const object = objects[ i ];
  145. const scale = Math.sin( ( Math.floor( object.position.x ) + time ) * 0.002 ) * 0.3 + 1;
  146. object.scale.set( scale, scale, scale );
  147. }
  148. renderer.render( scene, camera );
  149. }
  150. </script>
  151. </body>
  152. </html>