<!doctype html>
<html>
  <head>
    <title>Polygonal sphere</title>
    <style>
      body { max-width: 100%; }
      /* feel free to style the canvas any way you want. If you want it to
      use the entire window, set width: 100% and height: 100%. */
      
      canvas {
          width: 80%;
          height: 500px;
          display: block;
          margin: 10px auto;
      }
    </style>
  </head>
<body>

  <h1>Polygonal sphere</h1>
  
  <p></p>

</body>
</html>
var scene = new THREE.Scene();

var sphere;

var parameters = {
    widthSegments: 6,
    heightSegments: 8
};

function addSphere() {
    w = parameters.widthSegments;
    h = parameters.heightSegments;
    sphere = TW.createMesh( new THREE.SphereGeometry(2,w,h) );
    scene.add(sphere);
}
addSphere();

var renderer = new THREE.WebGLRenderer();

TW.cameraSetup(renderer,
               scene,
               {minx: -2, maxx: 2,
                miny: -2, maxy: 2,
                minz: -2, maxz: 2});

function redraw() {
    scene.remove(sphere);
    addSphere();
    TW.render();
}

var gui = new dat.GUI();
gui.add(parameters,'widthSegments',3,30).step(1).onChange(redraw);
gui.add(parameters,'heightSegments',2,30).step(1).onChange(redraw);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/three.min.js
  2. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/OrbitControls.js
  3. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/tw.js
  4. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/dat.gui.min.js