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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - geometry - shapes</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                                 font-family: Monospace;
  10                                 background-color: #f0f0f0;
  11                                 margin: 0px;
  12                                 overflow: hidden;
  13                         }
  14                 </style>
  15         </head>
  16         <body>
  17
  18                 <script src="../build/three.js"></script>
  19                 <script src="js/libs/stats.min.js"></script>
  20
  21                 <script>
  22
  23                         var container, stats;
  24
  25                         var camera, scene, renderer;
  26
  27                         var group;
  28
  29                         var targetRotation = 0;
  30                         var targetRotationOnMouseDown = 0;
  31
  32                         var mouseX = 0;
  33                         var mouseXOnMouseDown = 0;
  34
  35                         var windowHalfX = window.innerWidth / 2;
  36
  37                         init();
  38                         animate();
  39
  40                         function init() {
  41
  42                                 container = document.createElement( 'div' );
  43                                 document.body.appendChild( container );
  44
  45                                 var info = document.createElement( 'div' );
  46                                 info.style.position = 'absolute';
  47                                 info.style.top = '10px';
  48                                 info.style.width = '100%';
  49                                 info.style.textAlign = 'center';
  50                                 info.innerHTML = 'Simple procedurally-generated shapes<br/>Drag to spin';
  51                                 container.appendChild( info );
  52
  53                                 scene = new THREE.Scene();
  54                                 scene.background = new THREE.Color( 0xf0f0f0 );
  55
  56                                 camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
  57                                 camera.position.set( 0, 150, 500 );
  58                                 scene.add( camera );
  59
  60                                 var light = new THREE.PointLight( 0xffffff, 0.8 );
  61                                 camera.add( light );
  62
  63                                 group = new THREE.Group();
  64                                 group.position.y = 50;
  65                                 scene.add( group );
  66
  67                                 var loader = new THREE.TextureLoader();
  68                                 var texture = loader.load( "textures/UV_Grid_Sm.jpg" );
  69
  70                                 // it's necessary to apply these settings in order to correctly display the texture on a shape geometry
  71
  72                                 texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  73                                 texture.repeat.set( 0.008, 0.008 );
  74
  75                                 function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {
  76
  77                                         // flat shape with texture
  78                                         // note: default UVs generated by ShapeBufferGeometry are simply the x- and y-coordinates of the vertices
  79
  80                                         var geometry = new THREE.ShapeBufferGeometry( shape );
  81
  82                                         var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) );
  83                                         mesh.position.set( x, y, z - 175 );
  84                                         mesh.rotation.set( rx, ry, rz );
  85                                         mesh.scale.set( s, s, s );
  86                                         group.add( mesh );
  87
  88                                         // flat shape
  89
  90                                         var geometry = new THREE.ShapeBufferGeometry( shape );
  91
  92                                         var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color, side: THREE.DoubleSide } ) );
  93                                         mesh.position.set( x, y, z - 125 );
  94                                         mesh.rotation.set( rx, ry, rz );
  95                                         mesh.scale.set( s, s, s );
  96                                         group.add( mesh );
  97
  98                                         // extruded shape
  99
 100                                         var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
 101
 102                                         var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color } ) );
 103                                         mesh.position.set( x, y, z - 75 );
 104                                         mesh.rotation.set( rx, ry, rz );
 105                                         mesh.scale.set( s, s, s );
 106                                         group.add( mesh );
 107
 108                                         addLineShape( shape, color, x, y, z, rx, ry, rz, s );
 109
 110                                 }
 111
 112                                 function addLineShape( shape, color, x, y, z, rx, ry, rz, s ) {
 113
 114                                         // lines
 115
 116                                         shape.autoClose = true;
 117                                         var points = shape.createPointsGeometry();
 118                                         var spacedPoints = shape.createSpacedPointsGeometry( 50 );
 119
 120                                         // solid line
 121
 122                                         var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, linewidth: 3 } ) );
 123                                         line.position.set( x, y, z - 25 );
 124                                         line.rotation.set( rx, ry, rz );
 125                                         line.scale.set( s, s, s );
 126                                         group.add( line );
 127
 128                                         // line from equidistance sampled points
 129
 130                                         var line = new THREE.Line( spacedPoints, new THREE.LineBasicMaterial( { color: color, linewidth: 3 } ) );
 131                                         line.position.set( x, y, z + 25 );
 132                                         line.rotation.set( rx, ry, rz );
 133                                         line.scale.set( s, s, s );
 134                                         group.add( line );
 135
 136                                         // vertices from real points
 137
 138                                         var particles = new THREE.Points( points, new THREE.PointsMaterial( { color: color, size: 4 } ) );
 139                                         particles.position.set( x, y, z + 75 );
 140                                         particles.rotation.set( rx, ry, rz );
 141                                         particles.scale.set( s, s, s );
 142                                         group.add( particles );
 143
 144                                         // equidistance sampled points
 145
 146                                         var particles = new THREE.Points( spacedPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
 147                                         particles.position.set( x, y, z + 125 );
 148                                         particles.rotation.set( rx, ry, rz );
 149                                         particles.scale.set( s, s, s );
 150                                         group.add( particles );
 151
 152                                 }
 153
 154
 155                                 // California
 156
 157                                 var californiaPts = [];
 158
 159                                 californiaPts.push( new THREE.Vector2( 610, 320 ) );
 160                                 californiaPts.push( new THREE.Vector2( 450, 300 ) );
 161                                 californiaPts.push( new THREE.Vector2( 392, 392 ) );
 162                                 californiaPts.push( new THREE.Vector2( 266, 438 ) );
 163                                 californiaPts.push( new THREE.Vector2( 190, 570 ) );
 164                                 californiaPts.push( new THREE.Vector2( 190, 600 ) );
 165                                 californiaPts.push( new THREE.Vector2( 160, 620 ) );
 166                                 californiaPts.push( new THREE.Vector2( 160, 650 ) );
 167                                 californiaPts.push( new THREE.Vector2( 180, 640 ) );
 168                                 californiaPts.push( new THREE.Vector2( 165, 680 ) );
 169                                 californiaPts.push( new THREE.Vector2( 150, 670 ) );
 170                                 californiaPts.push( new THREE.Vector2(  90, 737 ) );
 171                                 californiaPts.push( new THREE.Vector2(  80, 795 ) );
 172                                 californiaPts.push( new THREE.Vector2(  50, 835 ) );
 173                                 californiaPts.push( new THREE.Vector2(  64, 870 ) );
 174                                 californiaPts.push( new THREE.Vector2(  60, 945 ) );
 175                                 californiaPts.push( new THREE.Vector2( 300, 945 ) );
 176                                 californiaPts.push( new THREE.Vector2( 300, 743 ) );
 177                                 californiaPts.push( new THREE.Vector2( 600, 473 ) );
 178                                 californiaPts.push( new THREE.Vector2( 626, 425 ) );
 179                                 californiaPts.push( new THREE.Vector2( 600, 370 ) );
 180                                 californiaPts.push( new THREE.Vector2( 610, 320 ) );
 181
 182                                 for( var i = 0; i < californiaPts.length; i ++ ) californiaPts[ i ].multiplyScalar( 0.25 );
 183
 184                                 var californiaShape = new THREE.Shape( californiaPts );
 185
 186
 187                                 // Triangle
 188
 189                                 var triangleShape = new THREE.Shape();
 190                                 triangleShape.moveTo( 80, 20 );
 191                                 triangleShape.lineTo( 40, 80 );
 192                                 triangleShape.lineTo( 120, 80 );
 193                                 triangleShape.lineTo( 80, 20 ); // close path
 194
 195
 196                                 // Heart
 197
 198                                 var x = 0, y = 0;
 199
 200                                 var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
 201
 202                                 heartShape.moveTo( x + 25, y + 25 );
 203                                 heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
 204                                 heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
 205                                 heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
 206                                 heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
 207                                 heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
 208                                 heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
 209
 210
 211                                 // Square
 212
 213                                 var sqLength = 80;
 214
 215                                 var squareShape = new THREE.Shape();
 216                                 squareShape.moveTo( 0, 0 );
 217                                 squareShape.lineTo( 0, sqLength );
 218                                 squareShape.lineTo( sqLength, sqLength );
 219                                 squareShape.lineTo( sqLength, 0 );
 220                                 squareShape.lineTo( 0, 0 );
 221
 222
 223                                 // Rectangle
 224
 225                                 var rectLength = 120, rectWidth = 40;
 226
 227                                 var rectShape = new THREE.Shape();
 228                                 rectShape.moveTo( 0, 0 );
 229                                 rectShape.lineTo( 0, rectWidth );
 230                                 rectShape.lineTo( rectLength, rectWidth );
 231                                 rectShape.lineTo( rectLength, 0 );
 232                                 rectShape.lineTo( 0, 0 );
 233
 234
 235                                 // Rounded rectangle
 236
 237                                 var roundedRectShape = new THREE.Shape();
 238
 239                                 ( function roundedRect( ctx, x, y, width, height, radius ) {
 240
 241                                         ctx.moveTo( x, y + radius );
 242                                         ctx.lineTo( x, y + height - radius );
 243                                         ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
 244                                         ctx.lineTo( x + width - radius, y + height );
 245                                         ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
 246                                         ctx.lineTo( x + width, y + radius );
 247                                         ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
 248                                         ctx.lineTo( x + radius, y );
 249                                         ctx.quadraticCurveTo( x, y, x, y + radius );
 250
 251                                 } )( roundedRectShape, 0, 0, 50, 50, 20 );
 252
 253
 254                                 // Track
 255
 256                                 var trackShape = new THREE.Shape();
 257
 258                                 trackShape.moveTo( 40, 40 );
 259                                 trackShape.lineTo( 40, 160 );
 260                                 trackShape.absarc( 60, 160, 20, Math.PI, 0, true );
 261                                 trackShape.lineTo( 80, 40 );
 262                                 trackShape.absarc( 60, 40, 20, 2 * Math.PI, Math.PI, true );
 263
 264
 265                                 // Circle
 266
 267                                 var circleRadius = 40;
 268                                 var circleShape = new THREE.Shape();
 269                                 circleShape.moveTo( 0, circleRadius );
 270                                 circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
 271                                 circleShape.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius );
 272                                 circleShape.quadraticCurveTo( - circleRadius, - circleRadius, - circleRadius, 0 );
 273                                 circleShape.quadraticCurveTo( - circleRadius, circleRadius, 0, circleRadius );
 274
 275
 276                                 // Fish
 277
 278                                 var x = y = 0;
 279
 280                                 var fishShape = new THREE.Shape();
 281
 282                                 fishShape.moveTo( x, y );
 283                                 fishShape.quadraticCurveTo( x + 50, y - 80, x + 90, y - 10 );
 284                                 fishShape.quadraticCurveTo( x + 100, y - 10, x + 115, y - 40 );
 285                                 fishShape.quadraticCurveTo( x + 115, y, x + 115, y + 40 );
 286                                 fishShape.quadraticCurveTo( x + 100, y + 10, x + 90, y + 10 );
 287                                 fishShape.quadraticCurveTo( x + 50, y + 80, x, y );
 288
 289
 290                                 // Arc circle
 291
 292                                 var arcShape = new THREE.Shape();
 293                                 arcShape.moveTo( 50, 10 );
 294                                 arcShape.absarc( 10, 10, 40, 0, Math.PI * 2, false );
 295
 296                                 var holePath = new THREE.Path();
 297                                 holePath.moveTo( 20, 10 );
 298                                 holePath.absarc( 10, 10, 10, 0, Math.PI * 2, true );
 299                                 arcShape.holes.push( holePath );
 300
 301
 302                                 // Smiley
 303
 304                                 var smileyShape = new THREE.Shape();
 305                                 smileyShape.moveTo( 80, 40 );
 306                                 smileyShape.absarc( 40, 40, 40, 0, Math.PI * 2, false );
 307
 308                                 var smileyEye1Path = new THREE.Path();
 309                                 smileyEye1Path.moveTo( 35, 20 );
 310                                 smileyEye1Path.absellipse( 25, 20, 10, 10, 0, Math.PI * 2, true );
 311
 312                                 smileyShape.holes.push( smileyEye1Path );
 313
 314                                 var smileyEye2Path = new THREE.Path();
 315                                 smileyEye2Path.moveTo( 65, 20 );
 316                                 smileyEye2Path.absarc( 55, 20, 10, 0, Math.PI * 2, true );
 317                                 smileyShape.holes.push( smileyEye2Path );
 318
 319                                 var smileyMouthPath = new THREE.Path();
 320                                 smileyMouthPath.moveTo( 20, 40 );
 321                                 smileyMouthPath.quadraticCurveTo( 40, 60, 60, 40 );
 322                                 smileyMouthPath.bezierCurveTo( 70, 45, 70, 50, 60, 60 );
 323                                 smileyMouthPath.quadraticCurveTo( 40, 80, 20, 60 );
 324                                 smileyMouthPath.quadraticCurveTo( 5, 50, 20, 40 );
 325
 326                                 smileyShape.holes.push( smileyMouthPath );
 327
 328
 329                                 // Spline shape
 330
 331                                 var splinepts = [];
 332                                 splinepts.push( new THREE.Vector2( 70, 20 ) );
 333                                 splinepts.push( new THREE.Vector2( 80, 90 ) );
 334                                 splinepts.push( new THREE.Vector2( - 30, 70 ) );
 335                                 splinepts.push( new THREE.Vector2( 0, 0 ) );
 336
 337                                 var splineShape = new THREE.Shape();
 338                                 splineShape.moveTo( 0, 0 );
 339                                 splineShape.splineThru( splinepts );
 340
 341                                 var extrudeSettings = { amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
 342
 343                                 // addShape( shape, color, x, y, z, rx, ry,rz, s );
 344
 345                                 addShape( californiaShape,  extrudeSettings, 0xf08000, -300, -100, 0, 0, 0, 0, 1 );
 346                                 addShape( triangleShape,    extrudeSettings, 0x8080f0, -180,    0, 0, 0, 0, 0, 1 );
 347                                 addShape( roundedRectShape, extrudeSettings, 0x008000, -150,  150, 0, 0, 0, 0, 1 );
 348                                 addShape( trackShape,       extrudeSettings, 0x008080,  200, -100, 0, 0, 0, 0, 1 );
 349                                 addShape( squareShape,      extrudeSettings, 0x0040f0,  150,  100, 0, 0, 0, 0, 1 );
 350                                 addShape( heartShape,       extrudeSettings, 0xf00000,   60,  100, 0, 0, 0, Math.PI, 1 );
 351                                 addShape( circleShape,      extrudeSettings, 0x00f000,  120,  250, 0, 0, 0, 0, 1 );
 352                                 addShape( fishShape,        extrudeSettings, 0x404040, - 60,  200, 0, 0, 0, 0, 1 );
 353                                 addShape( smileyShape,      extrudeSettings, 0xf000f0, -200,  250, 0, 0, 0, Math.PI, 1 );
 354                                 addShape( arcShape,         extrudeSettings, 0x804000,  150,    0, 0, 0, 0, 0, 1 );
 355                                 addShape( splineShape,      extrudeSettings, 0x808080, - 50, -100, 0, 0, 0, 0, 1 );
 356
 357                                 addLineShape( arcShape.holes[ 0 ], 0x804000, 150, 0, 0, 0, 0, 0, 1 );
 358
 359                                 for ( var i = 0; i < smileyShape.holes.length; i += 1 ) {
 360
 361                                         addLineShape( smileyShape.holes[ i ], 0xf000f0, - 200, 250, 0, 0, 0, Math.PI, 1 );
 362
 363                                 }
 364
 365                                 //
 366
 367                                 renderer = new THREE.WebGLRenderer( { antialias: true } );
 368                                 renderer.setPixelRatio( window.devicePixelRatio );
 369                                 renderer.setSize( window.innerWidth, window.innerHeight );
 370                                 container.appendChild( renderer.domElement );
 371
 372                                 stats = new Stats();
 373                                 container.appendChild( stats.dom );
 374
 375                                 document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 376                                 document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 377                                 document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 378
 379                                 //
 380
 381                                 window.addEventListener( 'resize', onWindowResize, false );
 382
 383                         }
 384
 385                         function onWindowResize() {
 386
 387                                 camera.aspect = window.innerWidth / window.innerHeight;
 388                                 camera.updateProjectionMatrix();
 389
 390                                 renderer.setSize( window.innerWidth, window.innerHeight );
 391
 392                         }
 393
 394                         //
 395
 396                         function onDocumentMouseDown( event ) {
 397
 398                                 event.preventDefault();
 399
 400                                 document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 401                                 document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 402                                 document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 403
 404                                 mouseXOnMouseDown = event.clientX - windowHalfX;
 405                                 targetRotationOnMouseDown = targetRotation;
 406
 407                         }
 408
 409                         function onDocumentMouseMove( event ) {
 410
 411                                 mouseX = event.clientX - windowHalfX;
 412
 413                                 targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 414
 415                         }
 416
 417                         function onDocumentMouseUp( event ) {
 418
 419                                 document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 420                                 document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 421                                 document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 422
 423                         }
 424
 425                         function onDocumentMouseOut( event ) {
 426
 427                                 document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 428                                 document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 429                                 document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 430
 431                         }
 432
 433                         function onDocumentTouchStart( event ) {
 434
 435                                 if ( event.touches.length == 1 ) {
 436
 437                                         event.preventDefault();
 438
 439                                         mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
 440                                         targetRotationOnMouseDown = targetRotation;
 441
 442                                 }
 443
 444                         }
 445
 446                         function onDocumentTouchMove( event ) {
 447
 448                                 if ( event.touches.length == 1 ) {
 449
 450                                         event.preventDefault();
 451
 452                                         mouseX = event.touches[ 0 ].pageX - windowHalfX;
 453                                         targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
 454
 455                                 }
 456
 457                         }
 458
 459                         //
 460
 461                         function animate() {
 462
 463                                 requestAnimationFrame( animate );
 464
 465                                 render();
 466                                 stats.update();
 467
 468                         }
 469
 470                         function render() {
 471
 472                                 group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 473                                 renderer.render( scene, camera );
 474
 475                         }
 476
 477                 </script>
 478
 479         </body>
 480 </html>