<!doctype html>
<html>
  <head>
    <title>Color cones</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: 300px;
          display: block;
          margin: 10px auto;
      }
    </style>
  </head>
<body>

  <h1>Color cones</h1>
  
  <p>When we press the vertices of primary and secondary colors in the color cube flat into a hexagon, this means that the full 3D space is a pair of “hexcones,” as demonstrated by this Three.js program. </p>
  
  <p>The first hexcone has a lightness value that goes from 0 (completely black) at the apex to 0.5. The second hexcode has a lightness value that goes from 0.5 to 1 (completely white) at the apex.
</p>

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

// ====================================================================
// globals for callbacks.

var numWedges = 6;
var bothCones = true;

var cone0, cone1;

function createCones(scene) {
    cone0 = TW.createHLSPyramid(numWedges, 0);
    scene.add(cone0);
    cone1 = TW.createHLSPyramid(numWedges, 1);
    scene.add(cone1);
    cone1.visible = bothCones;
}

createCones(scene);

// ================================================================
var renderer = new THREE.WebGLRenderer();

TW.mainInit(renderer,scene);

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

// ================================================================
// keyboard callbacks. Put it after the camera setup, so that we can
// use TW.render()

function removeCones(scene) {
    scene.remove(cone0);
    scene.remove(cone1);
}

TW.setKeyboardCallback('1',function () { cone1.visible = bothCones =false; TW.render()},'one cone');
TW.setKeyboardCallback('2',function () { cone1.visible = bothCones = true; TW.render()},'two cones');
TW.setKeyboardCallback('+',function () { removeCones(scene);
                                         ++numWedges;
                                         createCones(scene);
                                         TW.render(); },
                       'more wedges');
TW.setKeyboardCallback('-',function () { removeCones(scene);
                                         --numWedges;
                                         createCones(scene);
                                         TW.render(); },
                       'fewer wedges');

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