webglFramework/Thirdparty/three.js-master/examples/css3d_sprites.html

   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                 <style>
   8                         html, body {
   9                                 height: 100%;
  10                         }
  11
  12                         body {
  13                                 background-color: #ffffff;
  14                                 margin: 0;
  15                                 font-family: Arial;
  16                                 overflow: hidden;
  17                         }
  18
  19                         a {
  20                                 color: #8888ff;
  21                         }
  22
  23                         #info {
  24                                 position: absolute;
  25                                 width: 100%;
  26                                 color: #000000;
  27                                 padding: 5px;
  28                                 font-family: Monospace;
  29                                 font-size: 13px;
  30                                 font-weight: bold;
  31                                 text-align: center;
  32                                 z-index: 1;
  33                         }
  34                 </style>
  35         </head>
  36         <body>
  37                 <script src="../build/three.js"></script>
  38                 <script src="js/libs/tween.min.js"></script>
  39                 <script src="js/controls/TrackballControls.js"></script>
  40                 <script src="js/renderers/CSS3DRenderer.js"></script>
  41
  42                 <div id="container"></div>
  43                 <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - sprites.</div>
  44
  45                 <script>
  46
  47                         var camera, scene, renderer;
  48                         var controls;
  49
  50                         var particlesTotal = 512;
  51                         var positions = [];
  52                         var objects = [];
  53                         var current = 0;
  54
  55                         init();
  56                         animate();
  57
  58                         function init() {
  59
  60                                 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
  61                                 camera.position.set( 600, 400, 1500 );
  62                                 camera.lookAt( new THREE.Vector3() );
  63
  64                                 scene = new THREE.Scene();
  65
  66                                 var image = document.createElement( 'img' );
  67                                 image.addEventListener( 'load', function ( event ) {
  68
  69                                         for ( var i = 0; i < particlesTotal; i ++ ) {
  70
  71                                                 var object = new THREE.CSS3DSprite( image.cloneNode() );
  72                                                 object.position.x = Math.random() * 4000 - 2000,
  73                                                 object.position.y = Math.random() * 4000 - 2000,
  74                                                 object.position.z = Math.random() * 4000 - 2000;
  75                                                 scene.add( object );
  76
  77                                                 objects.push( object );
  78
  79                                         }
  80
  81                                         transition();
  82
  83                                 }, false );
  84                                 image.src = 'textures/sprite.png';
  85
  86                                 // Plane
  87
  88                                 var amountX = 16;
  89                                 var amountZ = 32;
  90                                 var separation = 150;
  91                                 var offsetX = ( ( amountX - 1 ) * separation ) / 2;
  92                                 var offsetZ = ( ( amountZ - 1 ) * separation ) / 2;
  93
  94                                 for ( var i = 0; i < particlesTotal; i ++ ) {
  95
  96                                         var x = ( i % amountX ) * separation;
  97                                         var z = Math.floor( i / amountX ) * separation;
  98                                         var y = ( Math.sin( x * 0.5 ) + Math.sin( z * 0.5 ) ) * 200;
  99
 100                                         positions.push( x - offsetX, y, z - offsetZ );
 101
 102                                 }
 103
 104                                 // Cube
 105
 106                                 var amount = 8;
 107                                 var separation = 150;
 108                                 var offset = ( ( amount - 1 ) * separation ) / 2;
 109
 110                                 for ( var i = 0; i < particlesTotal; i ++ ) {
 111
 112                                         var x = ( i % amount ) * separation;
 113                                         var y = Math.floor( ( i / amount ) % amount ) * separation;
 114                                         var z = Math.floor( i / ( amount * amount ) ) * separation;
 115
 116                                         positions.push( x - offset, y - offset, z - offset );
 117
 118                                 }
 119
 120                                 // Random
 121
 122                                 for ( var i = 0; i < particlesTotal; i ++ ) {
 123
 124                                         positions.push(
 125                                                 Math.random() * 4000 - 2000,
 126                                                 Math.random() * 4000 - 2000,
 127                                                 Math.random() * 4000 - 2000
 128                                         );
 129
 130                                 }
 131
 132                                 // Sphere
 133
 134                                 var radius = 750;
 135
 136                                 for ( var i = 0; i < particlesTotal; i ++ ) {
 137
 138                                         var phi = Math.acos( -1 + ( 2 * i ) / particlesTotal );
 139                                         var theta = Math.sqrt( particlesTotal * Math.PI ) * phi;
 140
 141                                         positions.push(
 142                                                 radius * Math.cos( theta ) * Math.sin( phi ),
 143                                                 radius * Math.sin( theta ) * Math.sin( phi ),
 144                                                 radius * Math.cos( phi )
 145                                         );
 146
 147                                 }
 148
 149                                 //
 150
 151                                 renderer = new THREE.CSS3DRenderer();
 152                                 renderer.setSize( window.innerWidth, window.innerHeight );
 153                                 renderer.domElement.style.position = 'absolute';
 154                                 document.getElementById( 'container' ).appendChild( renderer.domElement );
 155
 156                                 //
 157
 158                                 controls = new THREE.TrackballControls( camera, renderer.domElement );
 159                                 controls.rotateSpeed = 0.5;
 160
 161                                 //
 162
 163                                 window.addEventListener( 'resize', onWindowResize, false );
 164
 165                         }
 166
 167                         function onWindowResize() {
 168
 169                                 camera.aspect = window.innerWidth / window.innerHeight;
 170                                 camera.updateProjectionMatrix();
 171
 172                                 renderer.setSize( window.innerWidth, window.innerHeight );
 173
 174                         }
 175
 176                         function transition() {
 177
 178                                 var offset = current * particlesTotal * 3;
 179                                 var duration = 2000;
 180
 181                                 for ( var i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {
 182
 183                                         var object = objects[ i ];
 184
 185                                         new TWEEN.Tween( object.position )
 186                                                 .to( {
 187                                                         x: positions[ j ],
 188                                                         y: positions[ j + 1 ],
 189                                                         z: positions[ j + 2 ]
 190                                                 }, Math.random() * duration + duration )
 191                                                 .easing( TWEEN.Easing.Exponential.InOut )
 192                                                 .start();
 193
 194                                 }
 195
 196                                 new TWEEN.Tween( this )
 197                                         .to( {}, duration * 3 )
 198                                         .onComplete( transition )
 199                                         .start();
 200
 201                                 current = ( current + 1 ) % 4;
 202
 203                         }
 204
 205                         function animate() {
 206
 207                                 requestAnimationFrame( animate );
 208
 209                                 TWEEN.update();
 210                                 controls.update();
 211
 212                                 var time = performance.now();
 213
 214                                 for ( var i = 0, l = objects.length; i < l; i ++ ) {
 215
 216                                         var object = objects[ i ];
 217                                         var scale = Math.sin( ( Math.floor( object.position.x ) + time ) * 0.002 ) * 0.3 + 1;
 218                                         object.scale.set( scale, scale, scale );
 219
 220                                 }
 221
 222                                 renderer.render( scene, camera );
 223
 224                         }
 225
 226                 </script>
 227         </body>
 228 </html>