Hatena::ブログ(Diary)

babu_babu_babooのごみ箱

2017-02-15

マウスで3Dモデルを回転する(クオータニオン)

| 22:46

http://jsdo.it/babu_baboo/EZt9

いつものようにライブラリなんか利用しないで書いた。

凄く勉強になるのだが、すぐに忘れてしまいそうだ。

f:id:babu_babu_baboo:20170215224833p:image:w360

<!DOCTYPE html>
<meta charset="UTF-8">
<title>N個の点を持つ球体を描画する</title>
<style>
body {
  color: #ccc; background: black;
}
canvas { border: 1px #666 solid; }
#CG ul, #CG li { margin: 0; padding: 0;}
#CG li { list-style: none; }
h4 { font-size: normal; margin: .5ex;font-weight: normal;}
#c1 {
  background: black;
  border: 1px #666 solid;
}
#CG {
  vertical-align: top;
  border: 1px #666 solid;
  width: 120px; height: 696px;
  overflow: auto;
  padding: 2px;
  display: inline-block;
}
#ctrl p {
  margin: 0; font-size: small;
  border-bottom: 1px #666 solid;
}
#CG input {
  background: transparent;
  color: #ff0;
  radius: 4px;
}
#CG input[type="button"] {
    width: 100%;
}
#CG input[type="number"] {
  width: 4em;
}
#c2 {
  width: 100%;
}
</style>

<body>
<div id="CG">
  <h4>光源</h4>
  <canvas width="100" height="100" id="c2"></canvas>

  <ul>
   <li>
    <label>半径</label><br>
    A:<input type="number" id="radius" value="100" size="5" min="30" step="30" max="210"><br>
    B:<input type="number" id="radius2" value="30" size="5" min="30" step="30" max="90">
   <li>
    <label>分割</label><br>
    A:<input type="number" id="N" value="10" min="3" max="100"><br>
    B:<input type="number" id="N2" value="10" min="3" max="100">
   <li>
    <label>面分割</label><br>
    A:<input type="number" id="split" value="0" size="5" min="0" max="5"><br>
  </ul>
  <h4>物体</h4>
  <ul>
   <li><input type="button" value="正二十面体" id="regularIcosahedron">
   <li><input type="button" value="正四面体" id="regularTetrahedron">
   <li><input type="button" value="多角錐" id="pyramid">
   <li><input type="button" value="ドーナツ" id="doughnut">

  </ul>
  <hr>

  <h4>Render</h4>
  <ul>
   <li><label><input type="checkbox" value="vertex" id="vertex">頂点</label>
   <li><label><input type="checkbox" value="wireFrame" id="wireFrame">線</label>
   <li><label><input type="checkbox" value="surface" id="surface" checked>面</label>
   <li><label><input type="checkbox" value="hiddenSurface" id="hiddenSurface" checked>隠面処理</label>
  </ul>

  <hr>
  <h4>Color</h4>
  <ul>
   <li><label><input type="checkbox" value="red" id="red" checked>赤</label>
   <li><label><input type="checkbox" value="green" id="green" checked>緑</label>
   <li><label><input type="checkbox" value="blue" id="blue" checked>青</label>
   <li><label><input type="checkbox" value="random" id="random" checked>ランダム</label>
  </ul>

</div>
<canvas width="800" height="700" id="c1"></canvas>

<script>

//___________________________________

{ //アニメーションの環境か?

  const
    win = this;

  const
    substitution =
      function (callBackFunc, that) {
        let tmpFunc = function () {
          let timestamp = +(new Date);
          callBackFunc (timestamp);
        };
        win.setTimeout (tmpFunc, Math.floor (1000/60));
      };

  if ('undefined' === typeof win.requestAnimationFrame)
    win.requestAnimationFrame =
      win.requestAnimationFrame ||
      win.webkitRequestAnimationFrame ||
      win.mozRequestAnimationFrame ||
      win.oRequestAnimationFrame ||
      win.msRequestAnimationFrame ||
      substitution;

  if ('undefined' === typeof win.cancelAnimationFrame)
    win.cancelAnimationFrame =
      win.cancelAnimationFrame ||
      win.mozCancelAnimationFrame ||
      win.webkitCancelAnimationFrame ||
      win.msCancelAnimationFrame;
}


//___________________________________

{ //色を定義する
  const
      MAX_COLOR   = 255,
      MAX_OPACITY = 1,
      MIN         = Math.min,
      MAX         = Math.max,
      INT         = Math.floor;


  class Color {

    constructor (r = MAX_COLOR, g = MAX_COLOR, b = MAX_COLOR, a = MAX_OPACITY) {
      this.r = MAX (0, MIN (r, MAX_COLOR));
      this.g = MAX (0, MIN (g, MAX_COLOR));
      this.b = MAX (0, MIN (b, MAX_COLOR));
      this.a = MAX (0, MIN (a, MAX_OPACITY));
    }

    //色の加算
    addColor (colorObj) {
      let {r, g, b, a} = colorObj;
      this.r = MAX (0, r * a + this.r);
      this.g = MAX (0, g * a + this.g);
      this.b = MAX (0, b * a + this.b);
    }

    //色のコピーを作る
    crone () {
      return new Color (this.r, this.g, this.b, this.a);
    }


    //乗算したコピーを作る
    multiplication (x) {
      return new Color (
        MAX (0, this.r * x),
        MAX (0, this.g * x),
        MAX (0, this.b * x),
        this.a
      );
    }


    //文字列で返す(透明度含む)
    toStringRGBA () {
      return 'rgba(' + [
        MIN (INT (this.r), MAX_COLOR),
        MIN (INT (this.g), MAX_COLOR),
        MIN (INT (this.b), MAX_COLOR),
        MIN (this.a, MAX_OPACITY)
      ].join (',') + ')';
    }


    //文字列で返す
    toSrtingRGB () {
      return 'rgb(' + [
        MIN (INT (this.r), MAX_COLOR),
        MIN (INT (this.g), MAX_COLOR),
        MIN (INT (this.b), MAX_COLOR)
      ].join (',') + ')';
    }
  }

  //__________

  this.Color = Color;
}


//___________________________________

{ //点を定義する

  const
    DEF_COLOR  = [0, 256, 0, .5],
    DEF_OPTION = {
      disabled: false,
      size    : 2
    };


  //単純な2次元の点として定義
  class Point2D {
    constructor (x = 0, y = 0) {
      this.x = x;
      this.y = y;
    }
  }


  //単純な3次元の点
  class Point3D extends Point2D {
    constructor (x, y, z = 0) {
      super (x, y);
      this.z = z;
    }
  }


  //空間に表現するための「点」
  class Point extends Point3D {

    constructor (x, y, z, color = new Color(...DEF_COLOR), option = DEF_OPTION) {
      super (x, y, z);
      this.color  = color;
      this.option = Object.assign ({ }, DEF_OPTION, option);
    }
  }

  //__________

  this.Point2D = Point2D;
  this.Point3D = Point3D;
  this.Point   = Point;
}


//___________________________________

{ //ベクトルの定義

  class Vector extends Point3D {

    constructor (x, y, z) {
      super (x, y, z);
    }


    //加算
    add ({x, y, z}) {
      this.x += x;
      this.y += y;
      this.z += z;
    }


    //内積
    innerProducts ({x, y, z}) {
      return this.x * x + this.y * y + this.z * z;
    }
  }

  //__________

  this.Vector = Vector;
}


//___________________________________

{ //面を定義する

  const
    DEF_COLOR  = [255, 255, 255,.5],
    DEF_OPTION = {
      disabled: false,
      lineColor: new Color (...DEF_COLOR)
    };


  class Surface {

    constructor (lineList = [ ], color = new Color(...DEF_COLOR), option = { }) {
      this.lineList  = lineList;
      this.lineColor = color;
      this.color     = color;
      this.option    = Object.assign ({ }, DEF_OPTION, option);
    }


    //面の3点を利用して面のベクトルを返す。面自体には点の座標の情報が無いので注意
    getVector (pointList) {
      let
        [i0, i1, i2] = this.lineList,
        {x: x0, y: y0, z: z0} = pointList[i0],
        {x: x1, y: y1, z: z1} = pointList[i1],
        {x: x2, y: y2, z: z2} = pointList[i2],

        [px, py, pz] = [x1 - x0, y1 - y0, z1 - z0], //p
        [qx, qy, qz] = [x2 - x1, y2 - y1, z2 - z1]; //q

      return new Vector (
        py * qz - pz * qy,
        pz * qx - px * qz,
        px * qy - py * qx
      );
    }


    getDistance (pointList) {
      let
        [i0, i1, i2] = this.lineList,
        {x: x0, y: y0, z: z0} = pointList[i0],
        {x: x1, y: y1, z: z1} = pointList[i1],
        {x: x2, y: y2, z: z2} = pointList[i2],

        x = (x0 + x1 + x2) / 3,
        y = (y0 + y1 + y2) / 3,
        z = (z0 + z1 + z2) / 3;

      return new Point3D (x, y, z);

    }
  }

  //__________

  this.Surface = Surface;
}


//___________________________________

{ //モデルを定義する

  const
    DEF_COLOR  = new Color (),
    DEF_OPTION = {
      disabled: false
    };


  class Model {

    constructor (vertex = [ ], surface = [ ], option = { }) {
      this.vertex  = vertex;  //頂点
      this.surface = surface; //面
      this.option  = Object.assign ({ }, DEF_OPTION, option);
    }


    //面を追加する
    addSurface (surface) {
      let len = this.surface.length;
      this.surface.push (surface);
      return len;
    }


    //頂点リストに追加する
    addVertex (vertex) {
      let len = this.vertex.length;
      this.vertex.push (vertex);
      return len;
    }


    //頂点の色をセットする
    setVertexColor (color, no = null) {
      let i, p;

      if (null === no)
        for (i = 0; p = this.vertex[i]; i += 1)
          Object.assign (p.color, color);
      else
        if (p = this.vertex[no])
          Object.assign (p.color, color);
    }


    //面の色をセットする
    setSurfaceColor (color, no = null) {
      let p;
      if (null === no)
        for (let i = 0; p = this.surface[i]; i += 1)
          Object.assign (p.color, color);
      else
        if (p = this.surface[no])
          Object.assign (p.color, color);
    }


    //物体の頂点の配列を返す
    getViewPoint () {
      return this.vertex.map (p => [p.x, p.y, p.z]);
    }
  }

  //__________

  this.Model = Model;
}


//___________________________________
// 焦点距離(Focal Length), 画角(Field Of View)
//http://www.cyber.t.u-tokyo.ac.jp/~tani/class/mech_enshu/enshu2011mi2.pdf

{ // カメラ

  const
    FOCAL_LENGTH = 50, //mm 標準レンズの焦点距離
    DEF_POSITION = [0, 0, 1000],
    DEF_OPTION   = {
      disabled: false,
      scale: 1
    };


  class Camera  {

    constructor (position = new Point3D (...DEF_POSITION), focalLength = FOCAL_LENGTH, option = { }) {
      this.position = position;
      this.FOV      = focalLength; //2 * Math.atan ((APERTURE_X / 2) / focalLength);
      this.option   = Object.assign ({ }, DEF_OPTION, option);
      this.Z        = position.z;
      this.f0       = this.option.scale * (focalLength / (1 + focalLength / position.z))
    }


    //3次から2次へ投影
    project ({x, y, z}) {
      let {Z, f0} = this, s = f0 / (Z - z);
      return [x * s, y * s];
    }
  }

  //__________

  this.Camera = Camera;
}


//___________________________________

{ //照明(将来的に点光源など複数の照明を使えるようにするべき)

  const
    DEF_COLOR   = [255, 255, 255, 1],
    DEF_VECTOR  = [1, 1, 1], //平行光なのでベクトルだけ
    DEF_OPTION  = {
      disabled     : false,
      brightness   : 1, //明るさ
      ambientLight : 0 //環境光
    };


  class Light {
    constructor (vector = new Vector (...DEF_VECTOR), color = new Color (...DEF_COLOR), option = { }) {
      let {x, y, z} = vector;

      this.vector       = vector;
      this.color        = color;
      this.option       = Object.assign ({ }, DEF_OPTION, option);
      this.distance     = Math.sqrt (x * x + y * y + z * z); //原点までの距離を算出
    }
  }

  //__________

  this.Light = Light;
}


//___________________________________

{ //マウスのドラッグ操作で配列の回転を制御(QUATERNIONによる回転)

  const
    SQRT            = Math.sqrt,
    SIN             = Math.sin,
    COS             = Math.cos,
    PI              = Math.PI,
    DEG             = PI / 180,

    TOUCH_EVENT     = ['touchstart', 'touchend', 'touchmove'],
    MOUSE_EVENT     = ['mousedown', 'mouseup', 'mousemove', 'mouseout'],
    DEF_OPTION      = {
      inertia     : true, //慣性モード有効
      sensitivity : 500,  //マウスの感度
      gain        : 0.999 //慣性移動の減速率
    };


  //ローテーションクラス本体
  class RotationController {

    constructor (element = document.body, model, option = {}) {
      this.target      = element;
      this.model       = model;
      this.option      = Object.assign ({}, DEF_OPTION, option);
      this.mouseX      = null;//マウス座標の基点
      this.mouseY      = null;//マウス座標の基点
      this.touched     = false; //ドラッグ中か?
      this.animeId     = 0;
      this.timeStamp   = null; //慣性を行うかどうかのもう一つの基準
      this.dx          = 0;//マウスの慣性移動量
      this.dy          = 0;//マウスの慣性移動量
      this.sensitivity = 1 / this.option.sensitivity; //mouse移動の感度
      this.inertia_min = 0.001; //最小の移動量で完成移動を止める

      //touchイベントがあるなら優先
      (window.TouchEvent ? TOUCH_EVENT: MOUSE_EVENT)
        .forEach (addEventType, this)
    }


    //各イベント処理
    handleEvent (event) {
      let e = event.target;
      switch (event.type) {

      // 制御終了
      case 'mouseup' :
      case 'mouseout' :
      case 'touchend' :
        if (this.touched){
          this.touched = false;
          if (event.timeStamp - this.timeStamp < 50) //mouseup から 50mm秒以内なら慣性モードへ
            if (this.option.inertia)
              inertia.call (this);//制御を慣性に移す
        }
        break;

      // 制御開始
      case 'mousedown' :
      case 'touchstart' :
        if (this.animeId) {
          cancelAnimationFrame (this.animeId);
          this.animeId = 0;
        }
        this.dx = 0;
        this.dy = 0;
        this.mouseX = event.pageX;
        this.mouseY = event.pageY;
        this.touched = true;
        break;

      // 回転制御中
      case 'mousemove' :
      case 'touchmove' :
        if (this.touched) {
          event.preventDefault ();//ipadなどでスクロールさせないため
          this.timeStamp = event.timeStamp;
          let
            {pageX, pageY} = event,
            {mouseX, mouseY, sensitivity} = this,
            sx = mouseX - pageX,
            sy = mouseY - pageY;
          if (sx || sy) {
            this.dx = sx * sensitivity;
            this.dy = sy * sensitivity;

            rotation.call (this);
            this.mouseX = pageX;
            this.mouseY = pageY;
          }
        }
        break;
      }
    }

    //quaternion rotation
    //回転の関数の独立した呼び出し
    static rotation (aryPoint3D, qx, qy, qz, qa) {
      let ql = qx * qx + qy * qy + qz * qz;

      if (ql) {
        let qh = qa * DEG * .5, s = SIN (qh) / SQRT (ql);
        product (aryPoint3D, qx * s, qy * s, qz * s, COS (qh));
      }
    }
  }


  const
    //イベントの登録
    addEventType =
      function (eventType) {
        this.target.addEventListener (eventType, this, false);
      },


    //慣性モードに移行
    inertia =
      function () {
        let gain = this.option.gain;
        this.dx *= gain;
        this.dy *= gain;
        if (this.inertia_min < rotation.call (this))
          this.animeId = requestAnimationFrame (inertia.bind (this));
      },


    //回転を行う
    rotation =
      function () {
        //画面の2次元移動量から3次元の回転量を求める
        let
          {dx, dy} = this,
          t = dx * dx + dy * dy;

        if (t) {
          // クオータニオンによる回転
          t = SQRT (t);
          let as = -SIN (t) / t;
          product (this.model.vertex, dy * as, dx * as, 0, COS (t));
        }
        return t; //移動距離を返す(慣性?)
      },


    //積(座標)の計算
    product =
      function (point, q0, q1, q2, q3) {
        for (let i = 0, p; p = point[i]; i++) {
          let
            {x, y, z} = p,
            a0 =  q3 * x + q1 * z - q2 * y,
            a1 =  q3 * y + q2 * x - q0 * z,
            a2 =  q3 * z + q0 * y - q1 * x,
            a3 = -q0 * x - q1 * y - q2 * z;

          point[i].x = a0 * q3 - a3 * q0 - a1 * q2 + a2 * q1;
          point[i].y = a1 * q3 - a3 * q1 - a2 * q0 + a0 * q2;
          point[i].z = a2 * q3 - a3 * q2 - a0 * q1 + a1 * q0;
        }
      };

  //__________

  this.RotationController = RotationController;
}


//___________________________________

{// Canvas コントローラー

  const
    DEF_OPTION = {
      surface     : true,
      hiddenSurface: true,
      lighting    : true,
      wireFrame   : false,
      vertex      : false,
      clsColor    : 'rgb(0,0,0)'
    },
    PI2 = Math.PI * 2;


  class Controller {

    constructor (canvas, camera, light, option = { }) {
      this.canvas = canvas;
      this.ctx    = canvas.getContext ('2d');
      this.camera = camera;
      this.light  = light;
      this.option = Object.assign ({}, DEF_OPTION, option);
      this.width  = canvas.width;
      this.height = canvas.height;
      this.centerX= canvas.width  * 0.5 + 0.5;
      this.centerY= canvas.height * 0.5 + 0.5;
    }


    //CANVASを塗りつぶす
    clsScreen (rgba = this.option.clsColor) {
      let {ctx, width, height} = this;
      ctx.fillStyle = rgba;
      ctx.fillRect (0, 0, width, height);
    }


    //model を描く
    draw (model) {
      let
        cos  = Math.cos,
        acos = Math.acos,
        sqrt = Math.sqrt,
        max  = Math.max,
        {ctx, centerX, centerY, light, camera, option} = this,
        {vertex, surface} = model,
        zbuf = [ ],
        {distance, option: {brightness: lb, ambientLight: la}, vector: {x: lx, y: ly, z: lz}} = light,
        distance2 = distance * distance;


      //カメラからの投影結果をxy[]に保存
      let xy = vertex.map (s => {
        let [px, py] = camera.project (s);
        return [centerX + px, centerY - py];
      });

      //面の構成が左回りを利用して2次元上で裏の向きを省く
      if (option.hiddenSurface) {
        let
          {x: cx, y: cy, z: cz} = camera.position,
          hbuf = surface.reduce ((a, b) => {
            let
              [p0, p2, p1] = b.lineList,//3点からベクトルの外積
              [[x0, y0], [x1, y1], [x2, y2]] = [xy[p0], xy[p1], xy[p2]];
            if ((x2 - x1) * (y0 - y1) - (y2 - y1) * (x0 - x1) > 0)
              a.push (b);
            return a;
          }, []);


        //距離でソート
        zbuf = hbuf.map (s => {
          let
            {x, y, z} = s.getDistance (vertex),
            dx = x - cx, dy = y - cy, dz = cz -z;
          return [dx*dx + dy*dy + dz*dz, s];
        })
          .sort ((a, b) => a[0] < b[0])
          .map ((a)=> a[1]);
      }
      else
        zbuf = surface;


      //面の描画
      if (option.surface) {
        let brightness = 1;
        zbuf.forEach (s => {
          let P = s.lineList;
          if (option.lighting) {
            let
              {x, y, z} = s.getVector (vertex),
              len = (x*lx + y*ly + z*lz) / (distance * sqrt (x*x + y*y + z*z));
            brightness = la + max (0, len * lb);
          }

          ctx.fillStyle = s.color.multiplication (brightness).toStringRGBA ();
          ctx.beginPath ();
          ctx.moveTo (...xy[P[0]]);
          P.forEach ((p, i) => { ctx.lineTo (...xy[P[i]]) });
          ctx.fill ();
        });
      }


      //線を表示する(ワイヤーフレーム)
      if (this.option.wireFrame) {
        zbuf.forEach (s => {
          let
            {lineList: P, color: C} = s,
            xy0 = xy[P[0]];
          if (C) {
            ctx.strokeStyle = C.toStringRGBA ();
            ctx.beginPath();
            ctx.moveTo (...xy0);
            P.forEach ((p) => ctx.lineTo (...xy[p]));
            ctx.lineTo (...xy0);
            ctx.stroke ();
          }
        });
      }


      //点を表示する
      if (this.option.vertex) {
        let pi2 = PI2;
        if (option.hiddenSurface)
          zbuf.forEach (s => {
            s.lineList.forEach ((k) => {
              let {color: C, option: O} = vertex[k];
              if (C) {
                ctx.fillStyle = C.toStringRGBA ();
                if (O) {
                  ctx.beginPath ();
                  ctx.arc (...xy[k], O.size, 0, pi2);
                  ctx.fill ();
              }}
            });
          });
        else
          //単純点描画処理
          vertex.forEach ((p, i) => {
            let {color: C, option: O} = p;
            if (C) {
              ctx.fillStyle = C.toStringRGBA ();
              if (O) {
                ctx.beginPath ();
                ctx.arc (...xy[i], O.size, 0, pi2);
                ctx.fill ();
            }}
          });
      }

    }
  }

  //__________

  this.CTX = Controller;
}





//___________________________________

{ //物体の定義
  const
    PI     = Math.PI,
    ACOS   = Math.acos,
    ATAN2  = Math.atan2,
    SQRT   = Math.sqrt,
    SIN    = Math.sin,
    COS    = Math.cos,

    createObject = function (arg) { return new this (...arg); },
    createObject2 = function (arg) { return new this (arg); },

    RegularIcosahedron_option = {
      pointColor: new Color ()
    }
    //正二十面体を定義する
    RegularIcosahedron = function (option) {
      let
        r  = option.radius,
        gr = (1 + SQRT (5)) / 2,
        a = r / SQRT (1 + gr * gr),
        b = a * gr,

        point = [ //物体の頂点
          [ 0,-a,-b], [ 0, a,-b], [ 0,-a, b], [0, a, b],
          [-b, 0,-a], [-b, 0, a], [ b, 0,-a], [b, 0, a],
          [-a,-b, 0], [ a,-b, 0], [-a, b, 0], [a, b, 0]
        ].map (a => new Point (...a, option.pointColor)),

        surface = [//辺の順序が面を現す
            [ 0, 1, 6], [ 1, 0, 4], [ 2, 3, 5], [ 3, 2, 7],
            [ 4, 5,10], [ 5, 4, 8], [ 6, 7, 9], [ 7, 6,11],
            [ 8, 9, 2], [ 9, 8, 0], [10,11, 1], [11,10, 3],
            [ 0, 6, 9], [ 0, 8, 4], [ 1, 4,10], [ 1,11, 6],
            [ 2, 5, 8], [ 2, 9, 7], [ 3, 7,11], [ 3,10, 5]
        ].map (createObject2, Surface);

      return new Model (point, surface, option);
    },


  //正四面体を定義する
  RegularTetrahedron =
    function (option = { radius: 1}) {
      let
        r  = option.radius,
        a = 1/SQRT(3/8) * r,
        h = SQRT(2/3)*a,
        b = -h + r,

        point = [ //物体の頂点
          [0, r, 0], [0, b, r], [a / 2, b, b], [-a/2, b, b]
        ].map (createObject, Point),

        surface = [//辺の順序が面を現す(先に登録された頂点の番号)
          [ 0, 1, 2], [ 0, 2, 3], [ 0, 3, 1], [ 3, 2, 1],
        ].map (createObject2, Surface);

      return new Model (point, surface, option);
    },


    //ドーナツの定義
    Doughnut = function (option) {
      let
        {radius, N, radius2, N2} = option,
        pi2 = PI + PI,
        ringStep = pi2 / N, cStep = pi2 / N2,
        all = N * N2,
        point = [ ], surface = [ ];

      for (let i = 0; i < N; i += 1) {
        let
          angle = ringStep * i,
          idx = i * N2,
          idx2 = (idx + N2) % all;

        for (let j = 0; j < N2; j += 1) {
          let
            cAngle = cStep * j,
            r = radius + SIN (cAngle) * radius2;

          point.push (new Point (
            SIN (angle) * r,
            COS (cAngle) * radius2,
            COS (angle) * r
          ));

          surface.push (new Surface ([
            idx + j,
            idx + (j + 1) % N2,
            idx2 + (j + 1) % N2,
            idx2 + j
          ]));
        }
      }

      return new Model (point, surface, option);
    },


     //多角推
     Pyramid_option = {
       N: 3, radius: 1, radius2: 1, color: new Color (255,0,0, .7),
       offsetX: 0, offsetY: 0, offsetZ: 0
     },

     Pyramid = function (option = { }) {
         option = Object.assign ({}, Pyramid_option, option);
       let
         {N, radius, radius2, color, offsetX, offsetY, offsetZ } = option;
         pi2 = PI + PI, cStep = pi2 / N,
         point = [ ], surface = [ ], base = [ ];

       for (let i = 0; i < N; i += 1) {
         let angle = cStep * i;
         point.push (new Point (
           offsetX + SIN (angle) * radius,
           offsetY,
           offsetZ + COS (angle) * radius
         ));
         surface.push (new Surface ([N, i, (i + 1) % N], color, option));
         base.push (i);
      }
      point.push (new Point (offsetX, radius2 + offsetY, offsetZ));
      surface.push (new Surface (base.reverse (), color, option));

      return new Model (point, surface, option);
    },


    //2つのベクトルの中間を返す
    createPoint = function (a, b, r) {
      let
        { x: ax, y: ay, z: az } = a,
        { x: bx, y: by, z: bz } = b;
        cx = (ax + bx) * .5, cy = (ay + by) * .5, cz = (az + bz) * .5,
        d = cx * cx + cy * cy + cz * cz, d2 = d * 2,
        e = SQRT (r * 2 * d2) / d2;
      return new Point (cx * e, cy * e, cz * e);
    },


    //三角形を4分割する
    SplitTriangle = function () {
      let
        {surface, vertex, option} = this,
        r = option.radius, rr = r * r;

      //三角形abc の 線分acの中点をd, 線分bcの中点をe, 線分caの中点をfとする
      surface.forEach (s => {
        let
          {lineList, color, option} = s,
          [p0, p1, p2] = lineList,
          [ a,  b,  c] = [vertex[p0], vertex[p1], vertex[p2]],
          [ d,  e,  f] = [createPoint (a, b, rr), createPoint (b, c, rr), createPoint (c, a, rr)],
          [dn, en, fn] = [this.addVertex (d), this.addVertex (e), this.addVertex (f)];

        //従来の三角形を4分割した中央の三角形にする
        s.lineList = [dn, en, fn];
        [vertex[dn], vertex[en], vertex[fn]] = [d, e, f];
        //他の3つの三角形の面を追加する
        this.addSurface (new Surface ([p0, dn, fn], color, option));
        this.addSurface (new Surface ([p1, en, dn], color, option));
        this.addSurface (new Surface ([p2, fn, en], color, option));
      });
    };

  //________________________

  const Modeler = function (type, option) {
    let model;

    switch (type) {
    case 'regularIcosahedron' : //正二十面体
      model = RegularIcosahedron (option);
      for (let i = 0; i < option.split; i += 1)
        SplitTriangle.call (model);
      break;

    case 'regularTetrahedron' : //正四面体
      model = RegularTetrahedron (option);
      for (let i = 0; i < option.split; i += 1)
        SplitTriangle.call (model);
      break;

    case 'doughnut' : //ドーナツ
      model = Doughnut (option);
      break;

    case 'pyramid' : //多角推
      model = Pyramid (option);
      break;
    }

    return model;
  }

  //__________

  this.Modeler = Modeler;
}


//___________________________________

{ //demo

  const
    R      = 130,
    CANVAS = document.querySelectorAll ('canvas'),
    CAMERA = new Camera (new Point3D (0, 0, 700), 50, {scale: 20})

  //光源用の設定
  const
    LCtrl_MODEL_OPT = { radius: 10, split: 1, N:8, radius2: 60, offsetY: -20},
    LCtrl_MODEL     = Modeler ('pyramid', LCtrl_MODEL_OPT),
    LCtrl_ROTE_OPT  = {sensitivity: 80, gain: 0};
    LCtrl_ROTE      = new RotationController (CANVAS[0], LCtrl_MODEL, LCtrl_ROTE_OPT),
    LCtrl_LIGHT_OPT = {ambientLight: 0.5},
    LCtrl_LIGHT     = new Light (new Vector (0, 1, 1), new Color (), LCtrl_LIGHT_OPT),
    LCtrl_CTX_OPT   = {vertex: false, wireFrame: true, surface: true, hiddenSurface: true},
    LCtrl_CTX       = new CTX (CANVAS[0], CAMERA, LCtrl_LIGHT, LCtrl_CTX_OPT);

  //モデル用の設定
  const
    MCtrl_MODEL_OPT = { radius: R, N: 36, radius2: 30, N2: 24},
    MCtrl_MODEL     = Modeler ('doughnut', MCtrl_MODEL_OPT),
    MCtrl_ROTE_OPT  = {gain:1},
    MCtrl_ROTE      = new RotationController (CANVAS[1], MCtrl_MODEL, MCtrl_ROTE_OPT),
    MCtrl_LIGHT_OPT = {ambientLight: 0.3},
    MCtrl_LIGHT     = new Light (new Vector (0,1, 0), new Color (), MCtrl_LIGHT_OPT),
    MCtrl_CTX_OPT   = {vertex: false, wireFrame: false, surface: true, hiddenSurface: true},
    MCtrl_CTX       = new CTX (CANVAS[1], CAMERA, MCtrl_LIGHT, MCtrl_CTX_OPT);



  const
    OPACITY = 0.7,

    rnd =
      function () { return Math.floor (Math.random() * 128+128); },


    setRandomColor =
      function (model) {
        let i, surface;

        for (i = 0; surface = model.surface[i]; i++)
          surface.color = new Color (rnd (), rnd (), rnd (), OPACITY);
      },


    setColor =
      function (model, doc) {
        inp = doc.querySelectorAll ('#red, #green, #blue, #random');
        inp = Array.prototype.slice.call (inp);
        if (inp[3].checked) {
          model.surface.forEach (s => s.color = new Color (
            (inp[0].checked ? rnd () : 0),
            (inp[1].checked ? rnd () : 0),
            (inp[2].checked ? rnd () : 0),
            OPACITY
          ));
        }
        else {
          let col = new Color (255*inp[0].checked, 255*inp[1].checked, 255*inp[2].checked, OPACITY);
          model.surface.forEach (s => s.color = col);
        }
      },


    handler =
      function (event) {
        let
          e     = event.target,
          model = null, inp;

        if ('INPUT' !== e.tagName) return;

        switch (e.id) {

        case 'regularIcosahedron' : //正二十面体
        case 'regularTetrahedron' : //正四面体
        case 'doughnut' : //ドーナツ
        case 'pyramid' : //多角推
          inp = e.ownerDocument.querySelectorAll ('#radius, #radius2, #N, #N2, #split');
          inp = Array.prototype.slice.call (inp);
          let model_opt = inp.reduce ((a,b) => {a[b.id]=parseInt(b.value,10); return a}, {});
          model = Modeler (e.id, model_opt);
          Object.assign (MCtrl_MODEL, model);
          setColor (MCtrl_MODEL, e.ownerDocument);
          break;



        case 'vertex' : case 'surface': case 'wireFrame' : case 'hiddenSurface' :
          inp = e.ownerDocument.querySelectorAll ('#vertex, #surface, #wireFrame, #hiddenSurface');
          inp = Array.prototype.slice.call (inp);
          let ctx_opt = inp.reduce ((a,b) => {a[b.id]=b.checked; return a}, {});
          Object.assign (MCtrl_CTX.option, ctx_opt);
          break;

        case 'red': case 'green' : case 'blue' : case 'random' :
          setColor (MCtrl_MODEL, e.ownerDocument);
          break;
        }

      },


    loop = function loop () {
      LCtrl_CTX.clsScreen ();
      LCtrl_CTX.draw (LCtrl_MODEL);

      MCtrl_CTX.clsScreen ();
      MCtrl_CTX.draw (MCtrl_MODEL);

      requestAnimationFrame (loop);
    };


  //モデル用の光源ベクトルを、光源用のモデルの頂点に追加する
  LCtrl_MODEL.addVertex (MCtrl_LIGHT.vector);

  //モデルの表面をランダムな色にする
  setRandomColor (MCtrl_MODEL);

  //イベントの登録
  document.addEventListener ('click',      handler, false);
  document.addEventListener ('touchStart', handler, false);

  this.demo = loop;
}

//___________________________________

demo ();

</script>