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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js software - lines - splines</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                         body {
   9                                 background-color: #000000;
  10                                 margin: 0px;
  11                                 overflow: hidden;
  12                         }
  13
  14                         a {
  15                                 color:#0078ff;
  16                         }
  17
  18                         #info {
  19                                 position: absolute;
  20                                 top: 10px; width: 100%;
  21                                 color: #ffffff;
  22                                 padding: 5px;
  23                                 font-family: Monospace;
  24                                 font-size: 13px;
  25                                 text-align: center;
  26                                 z-index:100;
  27                         }
  28
  29                         a {
  30                                 color: orange;
  31                                 text-decoration: none;
  32                         }
  33
  34                         a:hover {
  35                                 color: #0080ff;
  36                         }
  37
  38                 </style>
  39         </head>
  40         <body>
  41
  42                 <div id="info">
  43                         <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - splines Software demo
  44                         [<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
  45                 </div>
  46
  47                 <script src="../build/three.js"></script>
  48
  49                 <script src="js/geometries/hilbert3D.js"></script>
  50
  51                 <script src="js/Detector.js"></script>
  52                 <script src="js/libs/stats.min.js"></script>
  53                 <script src="js/renderers/Projector.js"></script>
  54                 <script src="js/renderers/SoftwareRenderer.js"></script>
  55
  56                 <script>
  57
  58                         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  59
  60                         var mouseX = 0, mouseY = 0,
  61
  62                         windowHalfX = window.innerWidth / 2,
  63                         windowHalfY = window.innerHeight / 2,
  64
  65                         camera, scene, renderer, material;
  66
  67                         init();
  68                         animate();
  69
  70                         function init() {
  71
  72                                 var i, n_sub, container;
  73
  74                                 container = document.createElement( 'div' );
  75                                 document.body.appendChild( container );
  76
  77                                 camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
  78                                 camera.position.z = 700;
  79
  80                                 scene = new THREE.Scene();
  81
  82                                 renderer = new THREE.SoftwareRenderer();
  83                                 renderer.setSize( window.innerWidth, window.innerHeight );
  84
  85                                 container.appendChild( renderer.domElement );
  86
  87                                 var geometry = new THREE.Geometry(),
  88                                 geometry2 = new THREE.Geometry(),
  89                                 geometry3 = new THREE.Geometry(),
  90                                 points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 ),
  91                                 colors = [], colors2 = [], colors3 = [];
  92
  93                                 n_sub = 6;
  94
  95                                 var position, index;
  96
  97                                 var spline = new THREE.CatmullRomCurve3( points );
  98
  99                                 for ( i = 0; i < points.length * n_sub; i ++ ) {
 100
 101                                         index = i / ( points.length * n_sub );
 102                                         position = spline.getPoint( index );
 103
 104                                         geometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
 105
 106                                         colors[ i ] = new THREE.Color( 0xffffff );
 107                                         colors[ i ].setHSL( 0.6, 1.0, Math.max( 0, - position.x / 200 ) + 0.5 );
 108
 109                                         colors2[ i ] = new THREE.Color( 0xffffff );
 110                                         colors2[ i ].setHSL( 0.9, 1.0, Math.max( 0, - position.y / 200 ) + 0.5 );
 111
 112                                         colors3[ i ] = new THREE.Color( 0xffffff );
 113                                         colors3[ i ].setHSL( i / ( points.length * n_sub ), 1.0, 0.5 );
 114
 115                                 }
 116
 117                                 geometry2.vertices = geometry3.vertices = geometry.vertices;
 118
 119                                 geometry.colors = colors;
 120                                 geometry2.colors = colors2;
 121                                 geometry3.colors = colors3;
 122
 123                                 // lines
 124
 125                                 material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
 126
 127                                 var line, p, scale = 0.3, d = 225;
 128                                 var parameters =  [
 129                                         [ material, scale*1.5, [-d,0,0],  geometry ],
 130                                         [ material, scale*1.5, [0,0,0],  geometry2 ],
 131                                         [ material, scale*1.5, [d,0,0],  geometry3 ]
 132                                 ];
 133
 134                                 for ( i = 0; i < parameters.length; ++ i ) {
 135
 136                                         p = parameters[ i ];
 137                                         line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 138                                         line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
 139                                         line.position.x = p[ 2 ][ 0 ];
 140                                         line.position.y = p[ 2 ][ 1 ];
 141                                         line.position.z = p[ 2 ][ 2 ];
 142                                         scene.add( line );
 143
 144                                 }
 145
 146                                 stats = new Stats();
 147
 148                                 document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 149                                 document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 150                                 document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 151
 152                                 window.addEventListener( 'resize', onWindowResize, false );
 153
 154                         }
 155
 156                         function onWindowResize() {
 157
 158                                 windowHalfX = window.innerWidth / 2;
 159                                 windowHalfY = window.innerHeight / 2;
 160
 161                                 camera.aspect = window.innerWidth / window.innerHeight;
 162                                 camera.updateProjectionMatrix();
 163
 164                                 renderer.setSize( window.innerWidth, window.innerHeight );
 165
 166                         }
 167
 168                         function onDocumentMouseMove( event ) {
 169
 170                                 mouseX = event.clientX - windowHalfX;
 171                                 mouseY = event.clientY - windowHalfY;
 172                         }
 173
 174                         function onDocumentTouchStart( event ) {
 175
 176                                 if ( event.touches.length > 1 ) {
 177
 178                                         event.preventDefault();
 179
 180                                         mouseX = event.touches[ 0 ].pageX - windowHalfX;
 181                                         mouseY = event.touches[ 0 ].pageY - windowHalfY;
 182                                 }
 183                         }
 184
 185                         function onDocumentTouchMove( event ) {
 186
 187                                 if ( event.touches.length == 1 ) {
 188
 189                                         event.preventDefault();
 190
 191                                         mouseX = event.touches[ 0 ].pageX - windowHalfX;
 192                                         mouseY = event.touches[ 0 ].pageY - windowHalfY;
 193                                 }
 194
 195                         }
 196
 197                         function animate() {
 198
 199                                 requestAnimationFrame( animate );
 200                                 render();
 201
 202                         }
 203
 204                         function render() {
 205
 206                                 camera.position.x += ( mouseX - camera.position.x ) * .05;
 207                                 camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 208
 209                                 camera.lookAt( scene.position );
 210
 211                                 var time = Date.now() * 0.0005;
 212
 213                                 for ( var i = 0; i < scene.children.length; i ++ ) {
 214
 215                                         var object = scene.children[ i ];
 216
 217                                         if ( object instanceof THREE.Line ) {
 218
 219                                                 object.rotation.y = time * ( i % 2 ? 1 : -1 );
 220
 221                                         }
 222
 223                                 }
 224
 225                                 renderer.render( scene, camera );
 226
 227                         }
 228
 229
 230                 </script>
 231         </body>
 232 </html>