"Fossies" - the Fresh Open Source Software Archive

Member "three.js-r112/docs/scenes/geometry-browser.html" (27 Dec 2019, 40164 Bytes) of package /linux/www/three.js-r112.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) HTML source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 <!DOCTYPE html>
    2 <html lang="en">
    3     <head>
    4         <meta charset="utf-8">
    5         <title>Three.js Geometry Browser</title>
    6         <link rel="shortcut icon" href="../../files/favicon.ico" />
    7         <link rel="stylesheet" type="text/css" href="../../files/main.css">
    8         <style>
    9             canvas {
   10                 display: block;
   11                 width: 100%;
   12                 height: 100%;
   13             }
   14 
   15             #newWindow {
   16                 display: block;
   17                 position: absolute;
   18                 bottom: 0.3em;
   19                 left: 0.5em;
   20                 color: #fff;
   21             }
   22         </style>
   23     </head>
   24     <body>
   25 
   26         <a id='newWindow' href='./geometry-browser.html' target='_blank'>Open in New Window</a>
   27 
   28         <script type="module">
   29             import {
   30                 BoxGeometry, BoxBufferGeometry,
   31                 BufferGeometry,
   32                 CircleGeometry, CircleBufferGeometry,
   33                 Color,
   34                 ConeGeometry, ConeBufferGeometry,
   35                 Curve,
   36                 CylinderGeometry, CylinderBufferGeometry,
   37                 DodecahedronGeometry, DodecahedronBufferGeometry,
   38                 DoubleSide,
   39                 ExtrudeGeometry, ExtrudeBufferGeometry,
   40                 Float32BufferAttribute,
   41                 FontLoader,
   42                 Group,
   43                 IcosahedronGeometry, IcosahedronBufferGeometry,
   44                 LatheGeometry, LatheBufferGeometry,
   45                 LineSegments,
   46                 LineBasicMaterial,
   47                 Mesh,
   48                 MeshPhongMaterial,
   49                 OctahedronGeometry, OctahedronBufferGeometry,
   50                 ParametricGeometry, ParametricBufferGeometry,
   51                 PerspectiveCamera,
   52                 PlaneGeometry, PlaneBufferGeometry,
   53                 PointLight,
   54                 RingGeometry, RingBufferGeometry,
   55                 Scene,
   56                 Shape,
   57                 ShapeGeometry, ShapeBufferGeometry,
   58                 SphereGeometry, SphereBufferGeometry,
   59                 TetrahedronGeometry, TetrahedronBufferGeometry,
   60                 TextGeometry, TextBufferGeometry,
   61                 TorusGeometry, TorusBufferGeometry,
   62                 TorusKnotGeometry, TorusKnotBufferGeometry,
   63                 TubeGeometry, TubeBufferGeometry,
   64                 Vector2,
   65                 Vector3,
   66                 WireframeGeometry,
   67                 WebGLRenderer
   68             } from "../../build/three.module.js";
   69 
   70             import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
   71             import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
   72             import { ParametricGeometries } from '../../examples/jsm/geometries/ParametricGeometries.js';
   73 
   74             /**
   75              * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
   76              */
   77 
   78             var twoPi = Math.PI * 2;
   79 
   80             function updateGroupGeometry( mesh, geometry ) {
   81 
   82                 if ( geometry.isGeometry ) {
   83 
   84                     geometry = new BufferGeometry().fromGeometry( geometry );
   85 
   86                     console.warn( 'THREE.GeometryBrowser: Converted Geometry to BufferGeometry.' );
   87 
   88                 }
   89 
   90                 mesh.children[ 0 ].geometry.dispose();
   91                 mesh.children[ 1 ].geometry.dispose();
   92 
   93                 mesh.children[ 0 ].geometry = new WireframeGeometry( geometry );
   94                 mesh.children[ 1 ].geometry = geometry;
   95 
   96                 // these do not update nicely together if shared
   97 
   98             }
   99 
  100             function CustomSinCurve( scale ) {
  101 
  102                 Curve.call( this );
  103 
  104                 this.scale = ( scale === undefined ) ? 1 : scale;
  105 
  106             }
  107 
  108             CustomSinCurve.prototype = Object.create( Curve.prototype );
  109             CustomSinCurve.prototype.constructor = CustomSinCurve;
  110 
  111             CustomSinCurve.prototype.getPoint = function ( t ) {
  112 
  113                 var tx = t * 3 - 1.5;
  114                 var ty = Math.sin( 2 * Math.PI * t );
  115                 var tz = 0;
  116 
  117                 return new Vector3( tx, ty, tz ).multiplyScalar( this.scale );
  118 
  119             };
  120 
  121             // heart shape
  122 
  123             var x = 0, y = 0;
  124 
  125             var heartShape = new Shape();
  126 
  127             heartShape.moveTo( x + 5, y + 5 );
  128             heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
  129             heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7, x - 6, y + 7 );
  130             heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
  131             heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
  132             heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
  133             heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
  134 
  135             var guis = {
  136 
  137                 BoxBufferGeometry: function ( mesh ) {
  138 
  139                     var data = {
  140                         width: 15,
  141                         height: 15,
  142                         depth: 15,
  143                         widthSegments: 1,
  144                         heightSegments: 1,
  145                         depthSegments: 1
  146                     };
  147 
  148                     function generateGeometry() {
  149 
  150                         updateGroupGeometry( mesh,
  151                             new BoxBufferGeometry(
  152                                 data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
  153                             )
  154                         );
  155 
  156                     }
  157 
  158                     var folder = gui.addFolder( 'THREE.BoxBufferGeometry' );
  159 
  160                     folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  161                     folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  162                     folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
  163                     folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  164                     folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  165                     folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  166 
  167                     generateGeometry();
  168 
  169                 },
  170 
  171                 BoxGeometry: function ( mesh ) {
  172 
  173                     var data = {
  174                         width: 15,
  175                         height: 15,
  176                         depth: 15,
  177                         widthSegments: 1,
  178                         heightSegments: 1,
  179                         depthSegments: 1
  180                     };
  181 
  182                     function generateGeometry() {
  183 
  184                         updateGroupGeometry( mesh,
  185                             new BoxGeometry(
  186                                 data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
  187                             )
  188                         );
  189 
  190                     }
  191 
  192                     var folder = gui.addFolder( 'THREE.BoxGeometry' );
  193 
  194                     folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  195                     folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  196                     folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
  197                     folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  198                     folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  199                     folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  200 
  201                     generateGeometry();
  202 
  203                 },
  204 
  205                 CylinderBufferGeometry: function ( mesh ) {
  206 
  207                     var data = {
  208                         radiusTop: 5,
  209                         radiusBottom: 5,
  210                         height: 10,
  211                         radialSegments: 8,
  212                         heightSegments: 1,
  213                         openEnded: false,
  214                         thetaStart: 0,
  215                         thetaLength: twoPi
  216                     };
  217 
  218                     function generateGeometry() {
  219 
  220                         updateGroupGeometry( mesh,
  221                             new CylinderBufferGeometry(
  222                                 data.radiusTop,
  223                                 data.radiusBottom,
  224                                 data.height,
  225                                 data.radialSegments,
  226                                 data.heightSegments,
  227                                 data.openEnded,
  228                                 data.thetaStart,
  229                                 data.thetaLength
  230                             )
  231                         );
  232 
  233                     }
  234 
  235                     var folder = gui.addFolder( 'THREE.CylinderBufferGeometry' );
  236 
  237                     folder.add( data, 'radiusTop', 0, 30 ).onChange( generateGeometry );
  238                     folder.add( data, 'radiusBottom', 0, 30 ).onChange( generateGeometry );
  239                     folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
  240                     folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
  241                     folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
  242                     folder.add( data, 'openEnded' ).onChange( generateGeometry );
  243                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  244                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  245 
  246 
  247                     generateGeometry();
  248 
  249                 },
  250 
  251                 CylinderGeometry: function ( mesh ) {
  252 
  253                     var data = {
  254                         radiusTop: 5,
  255                         radiusBottom: 5,
  256                         height: 10,
  257                         radialSegments: 8,
  258                         heightSegments: 1,
  259                         openEnded: false,
  260                         thetaStart: 0,
  261                         thetaLength: twoPi
  262                     };
  263 
  264                     function generateGeometry() {
  265 
  266                         updateGroupGeometry( mesh,
  267                             new CylinderGeometry(
  268                                 data.radiusTop,
  269                                 data.radiusBottom,
  270                                 data.height,
  271                                 data.radialSegments,
  272                                 data.heightSegments,
  273                                 data.openEnded,
  274                                 data.thetaStart,
  275                                 data.thetaLength
  276                             )
  277                         );
  278 
  279                     }
  280 
  281                     var folder = gui.addFolder( 'THREE.CylinderGeometry' );
  282 
  283                     folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
  284                     folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
  285                     folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
  286                     folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
  287                     folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
  288                     folder.add( data, 'openEnded' ).onChange( generateGeometry );
  289                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  290                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  291 
  292 
  293                     generateGeometry();
  294 
  295                 },
  296 
  297                 ConeBufferGeometry: function ( mesh ) {
  298 
  299                     var data = {
  300                         radius: 5,
  301                         height: 10,
  302                         radialSegments: 8,
  303                         heightSegments: 1,
  304                         openEnded: false,
  305                         thetaStart: 0,
  306                         thetaLength: twoPi
  307                     };
  308 
  309                     function generateGeometry() {
  310 
  311                         updateGroupGeometry( mesh,
  312                             new ConeBufferGeometry(
  313                                 data.radius,
  314                                 data.height,
  315                                 data.radialSegments,
  316                                 data.heightSegments,
  317                                 data.openEnded,
  318                                 data.thetaStart,
  319                                 data.thetaLength
  320                             )
  321                         );
  322 
  323                     }
  324 
  325                     var folder = gui.addFolder( 'THREE.ConeBufferGeometry' );
  326 
  327                     folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
  328                     folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
  329                     folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
  330                     folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
  331                     folder.add( data, 'openEnded' ).onChange( generateGeometry );
  332                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  333                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  334 
  335 
  336                     generateGeometry();
  337 
  338                 },
  339 
  340                 ConeGeometry: function ( mesh ) {
  341 
  342                     var data = {
  343                         radius: 5,
  344                         height: 10,
  345                         radialSegments: 8,
  346                         heightSegments: 1,
  347                         openEnded: false,
  348                         thetaStart: 0,
  349                         thetaLength: twoPi
  350                     };
  351 
  352                     function generateGeometry() {
  353 
  354                         updateGroupGeometry( mesh,
  355                             new ConeGeometry(
  356                                 data.radius,
  357                                 data.height,
  358                                 data.radialSegments,
  359                                 data.heightSegments,
  360                                 data.openEnded,
  361                                 data.thetaStart,
  362                                 data.thetaLength
  363                             )
  364                         );
  365 
  366                     }
  367 
  368                     var folder = gui.addFolder( 'THREE.ConeGeometry' );
  369 
  370                     folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
  371                     folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
  372                     folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
  373                     folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
  374                     folder.add( data, 'openEnded' ).onChange( generateGeometry );
  375                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  376                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  377 
  378 
  379                     generateGeometry();
  380 
  381                 },
  382 
  383 
  384                 CircleBufferGeometry: function ( mesh ) {
  385 
  386                     var data = {
  387                         radius: 10,
  388                         segments: 32,
  389                         thetaStart: 0,
  390                         thetaLength: twoPi
  391                     };
  392 
  393                     function generateGeometry() {
  394 
  395                         updateGroupGeometry( mesh,
  396                             new CircleBufferGeometry(
  397                                 data.radius, data.segments, data.thetaStart, data.thetaLength
  398                             )
  399                         );
  400 
  401                     }
  402 
  403                     var folder = gui.addFolder( 'THREE.CircleBufferGeometry' );
  404 
  405                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  406                     folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
  407                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  408                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  409 
  410                     generateGeometry();
  411 
  412                 },
  413 
  414                 CircleGeometry: function ( mesh ) {
  415 
  416                     var data = {
  417                         radius: 10,
  418                         segments: 32,
  419                         thetaStart: 0,
  420                         thetaLength: twoPi
  421                     };
  422 
  423                     function generateGeometry() {
  424 
  425                         updateGroupGeometry( mesh,
  426                             new CircleGeometry(
  427                                 data.radius, data.segments, data.thetaStart, data.thetaLength
  428                             )
  429                         );
  430 
  431                     }
  432 
  433                     var folder = gui.addFolder( 'THREE.CircleGeometry' );
  434 
  435                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  436                     folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
  437                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  438                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  439 
  440                     generateGeometry();
  441 
  442                 },
  443 
  444                 DodecahedronGeometry: function ( mesh ) {
  445 
  446                     var data = {
  447                         radius: 10,
  448                         detail: 0
  449                     };
  450 
  451                     function generateGeometry() {
  452 
  453                         updateGroupGeometry( mesh,
  454                             new DodecahedronGeometry(
  455                                 data.radius, data.detail
  456                             )
  457                         );
  458 
  459                     }
  460 
  461                     var folder = gui.addFolder( 'THREE.DodecahedronGeometry' );
  462 
  463                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  464                     folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  465 
  466                     generateGeometry();
  467 
  468                 },
  469 
  470                 DodecahedronBufferGeometry: function ( mesh ) {
  471 
  472                     var data = {
  473                         radius: 10,
  474                         detail: 0
  475                     };
  476 
  477                     function generateGeometry() {
  478 
  479                         updateGroupGeometry( mesh,
  480                             new DodecahedronBufferGeometry(
  481                                 data.radius, data.detail
  482                             )
  483                         );
  484 
  485                     }
  486 
  487                     var folder = gui.addFolder( 'THREE.DodecahedronBufferGeometry' );
  488 
  489                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  490                     folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  491 
  492                     generateGeometry();
  493 
  494                 },
  495 
  496                 IcosahedronGeometry: function ( mesh ) {
  497 
  498                     var data = {
  499                         radius: 10,
  500                         detail: 0
  501                     };
  502 
  503                     function generateGeometry() {
  504 
  505                         updateGroupGeometry( mesh,
  506                             new IcosahedronGeometry(
  507                                 data.radius, data.detail
  508                             )
  509                         );
  510 
  511                     }
  512 
  513                     var folder = gui.addFolder( 'THREE.IcosahedronGeometry' );
  514 
  515                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  516                     folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  517 
  518                     generateGeometry();
  519 
  520                 },
  521 
  522                 IcosahedronBufferGeometry: function ( mesh ) {
  523 
  524                     var data = {
  525                         radius: 10,
  526                         detail: 0
  527                     };
  528 
  529                     function generateGeometry() {
  530 
  531                         updateGroupGeometry( mesh,
  532                             new IcosahedronBufferGeometry(
  533                                 data.radius, data.detail
  534                             )
  535                         );
  536 
  537                     }
  538 
  539                     var folder = gui.addFolder( 'THREE.IcosahedronBufferGeometry' );
  540 
  541                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  542                     folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  543 
  544                     generateGeometry();
  545 
  546                 },
  547 
  548                 LatheBufferGeometry: function ( mesh ) {
  549 
  550                     var points = [];
  551 
  552                     for ( var i = 0; i < 10; i ++ ) {
  553 
  554                         points.push( new Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
  555 
  556                     }
  557 
  558                     var data = {
  559                         segments: 12,
  560                         phiStart: 0,
  561                         phiLength: twoPi
  562                     };
  563 
  564                     function generateGeometry() {
  565 
  566                         var geometry = new LatheBufferGeometry(
  567                             points, data.segments, data.phiStart, data.phiLength
  568                         );
  569 
  570                         updateGroupGeometry( mesh, geometry );
  571 
  572                     }
  573 
  574                     var folder = gui.addFolder( 'THREE.LatheBufferGeometry' );
  575 
  576                     folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  577                     folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  578                     folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  579 
  580                     generateGeometry();
  581 
  582                 },
  583 
  584                 LatheGeometry: function ( mesh ) {
  585 
  586                     var points = [];
  587 
  588                     for ( var i = 0; i < 10; i ++ ) {
  589 
  590                         points.push( new Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
  591 
  592                     }
  593 
  594                     var data = {
  595                         segments: 12,
  596                         phiStart: 0,
  597                         phiLength: twoPi
  598                     };
  599 
  600                     function generateGeometry() {
  601 
  602                         var geometry = new LatheGeometry(
  603                             points, data.segments, data.phiStart, data.phiLength
  604                         );
  605 
  606                         updateGroupGeometry( mesh, geometry );
  607 
  608                     }
  609 
  610                     var folder = gui.addFolder( 'THREE.LatheGeometry' );
  611 
  612                     folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  613                     folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  614                     folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  615 
  616                     generateGeometry();
  617 
  618                 },
  619 
  620                 OctahedronGeometry: function ( mesh ) {
  621 
  622                     var data = {
  623                         radius: 10,
  624                         detail: 0
  625                     };
  626 
  627                     function generateGeometry() {
  628 
  629                         updateGroupGeometry( mesh,
  630                             new OctahedronGeometry(
  631                                 data.radius, data.detail
  632                             )
  633                         );
  634 
  635                     }
  636 
  637                     var folder = gui.addFolder( 'THREE.OctahedronGeometry' );
  638 
  639                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  640                     folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  641 
  642                     generateGeometry();
  643 
  644                 },
  645 
  646                 OctahedronBufferGeometry: function ( mesh ) {
  647 
  648                     var data = {
  649                         radius: 10,
  650                         detail: 0
  651                     };
  652 
  653                     function generateGeometry() {
  654 
  655                         updateGroupGeometry( mesh,
  656                             new OctahedronBufferGeometry(
  657                                 data.radius, data.detail
  658                             )
  659                         );
  660 
  661                     }
  662 
  663                     var folder = gui.addFolder( 'THREE.OctahedronBufferGeometry' );
  664 
  665                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  666                     folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  667 
  668                     generateGeometry();
  669 
  670                 },
  671 
  672                 PlaneBufferGeometry: function ( mesh ) {
  673 
  674                     var data = {
  675                         width: 10,
  676                         height: 10,
  677                         widthSegments: 1,
  678                         heightSegments: 1
  679                     };
  680 
  681                     function generateGeometry() {
  682 
  683                         updateGroupGeometry( mesh,
  684                             new PlaneBufferGeometry(
  685                                 data.width, data.height, data.widthSegments, data.heightSegments
  686                             )
  687                         );
  688 
  689                     }
  690 
  691                     var folder = gui.addFolder( 'THREE.PlaneBufferGeometry' );
  692 
  693                     folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  694                     folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  695                     folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  696                     folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  697 
  698                     generateGeometry();
  699 
  700                 },
  701 
  702                 PlaneGeometry: function ( mesh ) {
  703 
  704                     var data = {
  705                         width: 10,
  706                         height: 10,
  707                         widthSegments: 1,
  708                         heightSegments: 1
  709                     };
  710 
  711                     function generateGeometry() {
  712 
  713                         updateGroupGeometry( mesh,
  714                             new PlaneGeometry(
  715                                 data.width, data.height, data.widthSegments, data.heightSegments
  716                             )
  717                         );
  718 
  719                     }
  720 
  721                     var folder = gui.addFolder( 'THREE.PlaneGeometry' );
  722 
  723                     folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  724                     folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  725                     folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  726                     folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  727 
  728                     generateGeometry();
  729 
  730                 },
  731 
  732                 RingBufferGeometry: function ( mesh ) {
  733 
  734                     var data = {
  735                         innerRadius: 5,
  736                         outerRadius: 10,
  737                         thetaSegments: 8,
  738                         phiSegments: 8,
  739                         thetaStart: 0,
  740                         thetaLength: twoPi
  741                     };
  742 
  743                     function generateGeometry() {
  744 
  745                         updateGroupGeometry( mesh,
  746                             new RingBufferGeometry(
  747                                 data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
  748                             )
  749                         );
  750 
  751                     }
  752 
  753                     var folder = gui.addFolder( 'THREE.RingBufferGeometry' );
  754 
  755                     folder.add( data, 'innerRadius', 1, 30 ).onChange( generateGeometry );
  756                     folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
  757                     folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  758                     folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  759                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  760                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  761 
  762                     generateGeometry();
  763 
  764                 },
  765 
  766                 RingGeometry: function ( mesh ) {
  767 
  768                     var data = {
  769                         innerRadius: 5,
  770                         outerRadius: 10,
  771                         thetaSegments: 8,
  772                         phiSegments: 8,
  773                         thetaStart: 0,
  774                         thetaLength: twoPi
  775                     };
  776 
  777                     function generateGeometry() {
  778 
  779                         updateGroupGeometry( mesh,
  780                             new RingGeometry(
  781                                 data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
  782                             )
  783                         );
  784 
  785                     }
  786 
  787                     var folder = gui.addFolder( 'THREE.RingGeometry' );
  788 
  789                     folder.add( data, 'innerRadius', 1, 30 ).onChange( generateGeometry );
  790                     folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
  791                     folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  792                     folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  793                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  794                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  795 
  796                     generateGeometry();
  797 
  798                 },
  799 
  800                 SphereBufferGeometry: function ( mesh ) {
  801 
  802                     var data = {
  803                         radius: 15,
  804                         widthSegments: 8,
  805                         heightSegments: 6,
  806                         phiStart: 0,
  807                         phiLength: twoPi,
  808                         thetaStart: 0,
  809                         thetaLength: Math.PI
  810                     };
  811 
  812                     function generateGeometry() {
  813 
  814                         updateGroupGeometry( mesh,
  815                             new SphereBufferGeometry(
  816                                 data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
  817                             )
  818                         );
  819 
  820                     }
  821 
  822                     var folder = gui.addFolder( 'THREE.SphereBufferGeometry' );
  823 
  824                     folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
  825                     folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
  826                     folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
  827                     folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  828                     folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  829                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  830                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  831 
  832                     generateGeometry();
  833 
  834                 },
  835 
  836                 SphereGeometry: function ( mesh ) {
  837 
  838                     var data = {
  839                         radius: 15,
  840                         widthSegments: 8,
  841                         heightSegments: 6,
  842                         phiStart: 0,
  843                         phiLength: twoPi,
  844                         thetaStart: 0,
  845                         thetaLength: Math.PI
  846                     };
  847 
  848                     function generateGeometry() {
  849 
  850                         updateGroupGeometry( mesh,
  851                             new SphereGeometry(
  852                                 data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
  853                             )
  854                         );
  855 
  856                     }
  857 
  858                     var folder = gui.addFolder( 'THREE.SphereGeometry' );
  859 
  860                     folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
  861                     folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
  862                     folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
  863                     folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  864                     folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  865                     folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  866                     folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  867 
  868                     generateGeometry();
  869 
  870                 },
  871 
  872                 TetrahedronGeometry: function ( mesh ) {
  873 
  874                     var data = {
  875                         radius: 10,
  876                         detail: 0
  877                     };
  878 
  879                     function generateGeometry() {
  880 
  881                         updateGroupGeometry( mesh,
  882                             new TetrahedronGeometry(
  883                                 data.radius, data.detail
  884                             )
  885                         );
  886 
  887                     }
  888 
  889                     var folder = gui.addFolder( 'THREE.TetrahedronGeometry' );
  890 
  891                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  892                     folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  893 
  894                     generateGeometry();
  895 
  896                 },
  897 
  898                 TetrahedronBufferGeometry: function ( mesh ) {
  899 
  900                     var data = {
  901                         radius: 10,
  902                         detail: 0
  903                     };
  904 
  905                     function generateGeometry() {
  906 
  907                         updateGroupGeometry( mesh,
  908                             new TetrahedronBufferGeometry(
  909                                 data.radius, data.detail
  910                             )
  911                         );
  912 
  913                     }
  914 
  915                     var folder = gui.addFolder( 'THREE.TetrahedronBufferGeometry' );
  916 
  917                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  918                     folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  919 
  920                     generateGeometry();
  921 
  922                 },
  923 
  924                 TextGeometry: function ( mesh ) {
  925 
  926                     var data = {
  927                         text: "TextGeometry",
  928                         size: 5,
  929                         height: 2,
  930                         curveSegments: 12,
  931                         font: "helvetiker",
  932                         weight: "regular",
  933                         bevelEnabled: false,
  934                         bevelThickness: 1,
  935                         bevelSize: 0.5,
  936                         bevelOffset: 0.0,
  937                         bevelSegments: 3
  938                     };
  939 
  940                     var fonts = [
  941                         "helvetiker",
  942                         "optimer",
  943                         "gentilis",
  944                         "droid/droid_serif"
  945                     ];
  946 
  947                     var weights = [
  948                         "regular", "bold"
  949                     ];
  950 
  951                     function generateGeometry() {
  952 
  953                         var loader = new FontLoader();
  954                         loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
  955 
  956                             var geometry = new TextGeometry( data.text, {
  957                                 font: font,
  958                                 size: data.size,
  959                                 height: data.height,
  960                                 curveSegments: data.curveSegments,
  961                                 bevelEnabled: data.bevelEnabled,
  962                                 bevelThickness: data.bevelThickness,
  963                                 bevelSize: data.bevelSize,
  964                                 bevelOffset: data.bevelOffset,
  965                                 bevelSegments: data.bevelSegments
  966                             } );
  967                             geometry.center();
  968 
  969                             updateGroupGeometry( mesh, geometry );
  970 
  971                         } );
  972 
  973                     }
  974 
  975                     //Hide the wireframe
  976                     mesh.children[ 0 ].visible = false;
  977 
  978                     var folder = gui.addFolder( 'THREE.TextGeometry' );
  979 
  980                     folder.add( data, 'text' ).onChange( generateGeometry );
  981                     folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
  982                     folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
  983                     folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  984                     folder.add( data, 'font', fonts ).onChange( generateGeometry );
  985                     folder.add( data, 'weight', weights ).onChange( generateGeometry );
  986                     folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
  987                     folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
  988                     folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
  989                     folder.add( data, 'bevelOffset', - 0.5, 1.5 ).onChange( generateGeometry );
  990                     folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
  991 
  992                     generateGeometry();
  993 
  994                 },
  995 
  996                 TextBufferGeometry: function ( mesh ) {
  997 
  998                     var data = {
  999                         text: "TextBufferGeometry",
 1000                         size: 5,
 1001                         height: 2,
 1002                         curveSegments: 12,
 1003                         font: "helvetiker",
 1004                         weight: "regular",
 1005                         bevelEnabled: false,
 1006                         bevelThickness: 1,
 1007                         bevelSize: 0.5,
 1008                         bevelOffset: 0.0,
 1009                         bevelSegments: 3
 1010                     };
 1011 
 1012                     var fonts = [
 1013                         "helvetiker",
 1014                         "optimer",
 1015                         "gentilis",
 1016                         "droid/droid_serif"
 1017                     ];
 1018 
 1019                     var weights = [
 1020                         "regular", "bold"
 1021                     ];
 1022 
 1023                     function generateGeometry() {
 1024 
 1025                         var loader = new FontLoader();
 1026                         loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
 1027 
 1028                             var geometry = new TextBufferGeometry( data.text, {
 1029                                 font: font,
 1030                                 size: data.size,
 1031                                 height: data.height,
 1032                                 curveSegments: data.curveSegments,
 1033                                 bevelEnabled: data.bevelEnabled,
 1034                                 bevelThickness: data.bevelThickness,
 1035                                 bevelSize: data.bevelSize,
 1036                                 bevelOffset: data.bevelOffset,
 1037                                 bevelSegments: data.bevelSegments
 1038                             } );
 1039                             geometry.center();
 1040 
 1041                             updateGroupGeometry( mesh, geometry );
 1042 
 1043                         } );
 1044 
 1045                     }
 1046 
 1047                     //Hide the wireframe
 1048                     mesh.children[ 0 ].visible = false;
 1049 
 1050                     var folder = gui.addFolder( 'THREE.TextBufferGeometry' );
 1051 
 1052                     folder.add( data, 'text' ).onChange( generateGeometry );
 1053                     folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
 1054                     folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
 1055                     folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
 1056                     folder.add( data, 'font', fonts ).onChange( generateGeometry );
 1057                     folder.add( data, 'weight', weights ).onChange( generateGeometry );
 1058                     folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
 1059                     folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
 1060                     folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
 1061                     folder.add( data, 'bevelOffset', - 0.5, 1.5 ).onChange( generateGeometry );
 1062                     folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
 1063 
 1064                     generateGeometry();
 1065 
 1066                 },
 1067 
 1068                 TorusBufferGeometry: function ( mesh ) {
 1069 
 1070                     var data = {
 1071                         radius: 10,
 1072                         tube: 3,
 1073                         radialSegments: 16,
 1074                         tubularSegments: 100,
 1075                         arc: twoPi
 1076                     };
 1077 
 1078                     function generateGeometry() {
 1079 
 1080                         updateGroupGeometry( mesh,
 1081                             new TorusBufferGeometry(
 1082                                 data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
 1083                             )
 1084                         );
 1085 
 1086                     }
 1087 
 1088                     var folder = gui.addFolder( 'THREE.TorusBufferGeometry' );
 1089 
 1090                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
 1091                     folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
 1092                     folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
 1093                     folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
 1094                     folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
 1095 
 1096                     generateGeometry();
 1097 
 1098                 },
 1099 
 1100                 TorusGeometry: function ( mesh ) {
 1101 
 1102                     var data = {
 1103                         radius: 10,
 1104                         tube: 3,
 1105                         radialSegments: 16,
 1106                         tubularSegments: 100,
 1107                         arc: twoPi
 1108                     };
 1109 
 1110                     function generateGeometry() {
 1111 
 1112                         updateGroupGeometry( mesh,
 1113                             new TorusGeometry(
 1114                                 data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
 1115                             )
 1116                         );
 1117 
 1118                     }
 1119 
 1120                     var folder = gui.addFolder( 'THREE.TorusGeometry' );
 1121 
 1122                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
 1123                     folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
 1124                     folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
 1125                     folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
 1126                     folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
 1127 
 1128                     generateGeometry();
 1129 
 1130                 },
 1131 
 1132                 TorusKnotBufferGeometry: function ( mesh ) {
 1133 
 1134                     var data = {
 1135                         radius: 10,
 1136                         tube: 3,
 1137                         tubularSegments: 64,
 1138                         radialSegments: 8,
 1139                         p: 2,
 1140                         q: 3
 1141                     };
 1142 
 1143                     function generateGeometry() {
 1144 
 1145                         updateGroupGeometry( mesh,
 1146                             new TorusKnotBufferGeometry(
 1147                                 data.radius, data.tube, data.tubularSegments, data.radialSegments,
 1148                                 data.p, data.q
 1149                             )
 1150                         );
 1151 
 1152                     }
 1153 
 1154                     var folder = gui.addFolder( 'THREE.TorusKnotBufferGeometry' );
 1155 
 1156                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
 1157                     folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
 1158                     folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
 1159                     folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
 1160                     folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
 1161                     folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
 1162 
 1163                     generateGeometry();
 1164 
 1165                 },
 1166 
 1167                 TorusKnotGeometry: function ( mesh ) {
 1168 
 1169                     var data = {
 1170                         radius: 10,
 1171                         tube: 3,
 1172                         tubularSegments: 64,
 1173                         radialSegments: 8,
 1174                         p: 2,
 1175                         q: 3
 1176                     };
 1177 
 1178                     function generateGeometry() {
 1179 
 1180                         updateGroupGeometry( mesh,
 1181                             new TorusKnotGeometry(
 1182                                 data.radius, data.tube, data.tubularSegments, data.radialSegments,
 1183                                 data.p, data.q
 1184                             )
 1185                         );
 1186 
 1187                     }
 1188 
 1189                     var folder = gui.addFolder( 'THREE.TorusKnotGeometry' );
 1190 
 1191                     folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
 1192                     folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
 1193                     folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
 1194                     folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
 1195                     folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
 1196                     folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
 1197 
 1198                     generateGeometry();
 1199 
 1200                 },
 1201 
 1202                 ParametricBufferGeometry: function ( mesh ) {
 1203 
 1204                     var data = {
 1205                         slices: 25,
 1206                         stacks: 25
 1207                     };
 1208 
 1209                     function generateGeometry() {
 1210 
 1211                         updateGroupGeometry( mesh,
 1212                             new ParametricBufferGeometry( ParametricGeometries.klein, data.slices, data.stacks )
 1213                         );
 1214 
 1215                     }
 1216 
 1217                     var folder = gui.addFolder( 'THREE.ParametricBufferGeometry' );
 1218 
 1219                     folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
 1220                     folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
 1221 
 1222                     generateGeometry();
 1223 
 1224                 },
 1225 
 1226                 ParametricGeometry: function ( mesh ) {
 1227 
 1228                     var data = {
 1229                         slices: 25,
 1230                         stacks: 25
 1231                     };
 1232 
 1233                     function generateGeometry() {
 1234 
 1235                         updateGroupGeometry( mesh,
 1236                             new ParametricGeometry( ParametricGeometries.klein, data.slices, data.stacks )
 1237                         );
 1238 
 1239                     }
 1240 
 1241                     var folder = gui.addFolder( 'THREE.ParametricGeometry' );
 1242 
 1243                     folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
 1244                     folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
 1245 
 1246                     generateGeometry();
 1247 
 1248                 },
 1249 
 1250                 TubeGeometry: function ( mesh ) {
 1251 
 1252                     var data = {
 1253                         segments: 20,
 1254                         radius: 2,
 1255                         radialSegments: 8
 1256                     };
 1257 
 1258                     var path = new CustomSinCurve( 10 );
 1259 
 1260                     function generateGeometry() {
 1261 
 1262                         updateGroupGeometry( mesh,
 1263                             new TubeGeometry( path, data.segments, data.radius, data.radialSegments, false )
 1264                         );
 1265 
 1266                     }
 1267 
 1268                     var folder = gui.addFolder( 'THREE.TubeGeometry' );
 1269 
 1270                     folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
 1271                     folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
 1272                     folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
 1273 
 1274                     generateGeometry();
 1275 
 1276                 },
 1277 
 1278                 TubeBufferGeometry: function ( mesh ) {
 1279 
 1280                     var data = {
 1281                         segments: 20,
 1282                         radius: 2,
 1283                         radialSegments: 8
 1284                     };
 1285 
 1286                     var path = new CustomSinCurve( 10 );
 1287 
 1288                     function generateGeometry() {
 1289 
 1290                         updateGroupGeometry( mesh,
 1291                             new TubeBufferGeometry( path, data.segments, data.radius, data.radialSegments, false )
 1292                         );
 1293 
 1294                     }
 1295 
 1296                     var folder = gui.addFolder( 'THREE.TubeBufferGeometry' );
 1297 
 1298                     folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
 1299                     folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
 1300                     folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
 1301 
 1302                     generateGeometry();
 1303 
 1304                 },
 1305 
 1306                 ShapeGeometry: function ( mesh ) {
 1307 
 1308                     var data = {
 1309                         segments: 12
 1310                     };
 1311 
 1312                     function generateGeometry() {
 1313 
 1314                         var geometry = new ShapeGeometry( heartShape, data.segments );
 1315                         geometry.center();
 1316 
 1317                         updateGroupGeometry( mesh, geometry );
 1318 
 1319                     }
 1320 
 1321                     var folder = gui.addFolder( 'THREE.ShapeGeometry' );
 1322                     folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
 1323 
 1324                     generateGeometry();
 1325 
 1326                 },
 1327 
 1328                 ShapeBufferGeometry: function ( mesh ) {
 1329 
 1330                     var data = {
 1331                         segments: 12
 1332                     };
 1333 
 1334                     function generateGeometry() {
 1335 
 1336                         var geometry = new ShapeBufferGeometry( heartShape, data.segments );
 1337                         geometry.center();
 1338 
 1339                         updateGroupGeometry( mesh, geometry );
 1340 
 1341                     }
 1342 
 1343                     var folder = gui.addFolder( 'THREE.ShapeBufferGeometry' );
 1344                     folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
 1345 
 1346                     generateGeometry();
 1347 
 1348                 },
 1349 
 1350                 ExtrudeGeometry: function ( mesh ) {
 1351 
 1352                     var data = {
 1353                         steps: 2,
 1354                         depth: 16,
 1355                         bevelEnabled: true,
 1356                         bevelThickness: 1,
 1357                         bevelSize: 1,
 1358                         bevelOffset: 0,
 1359                         bevelSegments: 1
 1360                     };
 1361 
 1362                     var length = 12, width = 8;
 1363 
 1364                     var shape = new Shape();
 1365                     shape.moveTo( 0, 0 );
 1366                     shape.lineTo( 0, width );
 1367                     shape.lineTo( length, width );
 1368                     shape.lineTo( length, 0 );
 1369                     shape.lineTo( 0, 0 );
 1370 
 1371                     function generateGeometry() {
 1372 
 1373                         var geometry = new ExtrudeGeometry( shape, data );
 1374                         geometry.center();
 1375 
 1376                         updateGroupGeometry( mesh, geometry );
 1377 
 1378                     }
 1379 
 1380                     var folder = gui.addFolder( 'THREE.ExtrudeGeometry' );
 1381 
 1382                     folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
 1383                     folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
 1384                     folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
 1385                     folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
 1386                     folder.add( data, 'bevelOffset', - 4, 5 ).step( 1 ).onChange( generateGeometry );
 1387                     folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
 1388 
 1389                     generateGeometry();
 1390 
 1391                 },
 1392 
 1393                 ExtrudeBufferGeometry: function ( mesh ) {
 1394 
 1395                     var data = {
 1396                         steps: 2,
 1397                         depth: 16,
 1398                         bevelEnabled: true,
 1399                         bevelThickness: 1,
 1400                         bevelSize: 1,
 1401                         bevelOffset: 0,
 1402                         bevelSegments: 1
 1403                     };
 1404 
 1405                     var length = 12, width = 8;
 1406 
 1407                     var shape = new Shape();
 1408                     shape.moveTo( 0, 0 );
 1409                     shape.lineTo( 0, width );
 1410                     shape.lineTo( length, width );
 1411                     shape.lineTo( length, 0 );
 1412                     shape.lineTo( 0, 0 );
 1413 
 1414                     function generateGeometry() {
 1415 
 1416                         var geometry = new ExtrudeBufferGeometry( shape, data );
 1417                         geometry.center();
 1418 
 1419                         updateGroupGeometry( mesh, geometry );
 1420 
 1421                     }
 1422 
 1423                     var folder = gui.addFolder( 'THREE.ExtrudeBufferGeometry' );
 1424 
 1425                     folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
 1426                     folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
 1427                     folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
 1428                     folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
 1429                     folder.add( data, 'bevelOffset', - 4, 5 ).step( 1 ).onChange( generateGeometry );
 1430                     folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
 1431 
 1432                     generateGeometry();
 1433 
 1434                 }
 1435 
 1436             };
 1437 
 1438             function chooseFromHash( mesh ) {
 1439 
 1440                 var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";
 1441 
 1442                 if ( guis[ selectedGeometry ] !== undefined ) {
 1443 
 1444                     guis[ selectedGeometry ]( mesh );
 1445 
 1446                 }
 1447 
 1448                 if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) {
 1449 
 1450                     return { fixed: true };
 1451 
 1452                 }
 1453 
 1454                 //No configuration options
 1455                 return {};
 1456 
 1457             }
 1458 
 1459             //
 1460 
 1461             document.getElementById( 'newWindow' ).href += window.location.hash;
 1462 
 1463             var gui = new GUI();
 1464 
 1465             var scene = new Scene();
 1466             scene.background = new Color( 0x444444 );
 1467 
 1468             var camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
 1469             camera.position.z = 30;
 1470 
 1471             var renderer = new WebGLRenderer( { antialias: true } );
 1472             renderer.setPixelRatio( window.devicePixelRatio );
 1473             renderer.setSize( window.innerWidth, window.innerHeight );
 1474             document.body.appendChild( renderer.domElement );
 1475 
 1476             var orbit = new OrbitControls( camera, renderer.domElement );
 1477             orbit.enableZoom = false;
 1478 
 1479             var lights = [];
 1480             lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
 1481             lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
 1482             lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
 1483 
 1484             lights[ 0 ].position.set( 0, 200, 0 );
 1485             lights[ 1 ].position.set( 100, 200, 100 );
 1486             lights[ 2 ].position.set( - 100, - 200, - 100 );
 1487 
 1488             scene.add( lights[ 0 ] );
 1489             scene.add( lights[ 1 ] );
 1490             scene.add( lights[ 2 ] );
 1491 
 1492             var group = new Group();
 1493 
 1494             var geometry = new BufferGeometry();
 1495             geometry.setAttribute( 'position', new Float32BufferAttribute( [], 3 ) );
 1496 
 1497             var lineMaterial = new LineBasicMaterial( { color: 0xffffff, transparent: true, opacity: 0.5 } );
 1498             var meshMaterial = new MeshPhongMaterial( { color: 0x156289, emissive: 0x072534, side: DoubleSide, flatShading: true } );
 1499 
 1500             group.add( new LineSegments( geometry, lineMaterial ) );
 1501             group.add( new Mesh( geometry, meshMaterial ) );
 1502 
 1503             var options = chooseFromHash( group );
 1504 
 1505             scene.add( group );
 1506 
 1507             var render = function () {
 1508 
 1509                 requestAnimationFrame( render );
 1510 
 1511                 if ( ! options.fixed ) {
 1512 
 1513                     group.rotation.x += 0.005;
 1514                     group.rotation.y += 0.005;
 1515 
 1516                 }
 1517 
 1518                 renderer.render( scene, camera );
 1519 
 1520             };
 1521 
 1522             window.addEventListener( 'resize', function () {
 1523 
 1524                 camera.aspect = window.innerWidth / window.innerHeight;
 1525                 camera.updateProjectionMatrix();
 1526 
 1527                 renderer.setSize( window.innerWidth, window.innerHeight );
 1528 
 1529             }, false );
 1530 
 1531             render();
 1532 
 1533         </script>
 1534     </body>
 1535 </html>