临时添加点名

public/roll-call/css/index.css

@@ -0,0 +1,379 @@
+html,
+body {
+  height: 100%;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body {
+  background-color: #000000;
+  margin: 0;
+  font-family: Helvetica, sans-serif;
+  overflow: hidden;
+  background: url('../img/startBg2.png') no-repeat center #000000;
+  background-size: cover;
+}
+
+.pageTitle {
+  width: 217px;
+  height: 103px;
+  background: url('../img/icon-title.png') no-repeat center;
+  background-size: contain;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.iconBack {
+  width: 54px;
+  height: 54px;
+  background: url('../img/icon-back.png') no-repeat center;
+  background-size: contain;
+  position: fixed;
+  left: 36px;
+  top: 30px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+.iconBack:hover {
+  opacity: 0.9;
+  transition: opacity 0.2s ease;
+}
+
+a {
+  color: #ffffff;
+}
+
+#info {
+  position: absolute;
+  width: 100%;
+  color: #ffffff;
+  padding: 5px;
+  font-family: Monospace;
+  font-size: 13px;
+  font-weight: bold;
+  text-align: center;
+  z-index: 1;
+}
+
+#menu {
+  position: absolute;
+  bottom: 50px;
+  width: 100%;
+  text-align: center;
+}
+#menu.menuRight{
+  display: flex;
+  padding: 0 100px;
+  flex-direction: row-reverse;
+}
+#menu.menuLeft{
+  display: flex;
+  padding: 0 100px;
+}
+.bss {
+  height: 100vh;
+  width: 100%;
+}
+.element {
+  width: 152px;
+  height: 172px;
+  box-shadow: 0px 3px 7px 0px rgba(99, 171, 186, 0.53);
+  text-align: center;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  transition: all 0.2s ease;
+}
+
+.element.hide {
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.2s ease;
+}
+
+.element .symbolBox {
+  display: block;
+  width: 98px;
+  height: 98px;
+  overflow: hidden;
+  border-radius: 50%;
+  border: 3px solid #4daaff;
+}
+.element .symbolBox img {
+  width: 100%;
+  height: 100%;
+}
+
+.element .details {
+  padding-top: 15px;
+  font-size: 22px;
+  color: #374693;
+  font-weight: 500;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#table {
+  width: 171px;
+  height: 69px;
+  background: url('../img/icon-start-btn.png') no-repeat center;
+  background-size: contain;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+#table:hover {
+  opacity: 0.9;
+  transition: opacity 0.2s ease;
+}
+#table.disabled {
+  background: url('../img/icon-start-btn-disabled.png') no-repeat center;
+  background-size: contain;
+  cursor: not-allowed;
+}
+#table.disabled:hover {
+  opacity: 1;
+}
+#backBtn {
+  width: 171px;
+  height: 69px;
+  background: url('../img/back.png') no-repeat center;
+  background-size: contain;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  margin: 0 20px;
+}
+#backBtn:hover {
+  opacity: 0.9;
+  transition: opacity 0.2s ease;
+}
+#sphere {
+  width: 171px;
+  height: 69px;
+  background: url('../img/icon-over-btn.png') no-repeat center;
+  background-size: contain;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+#sphere:hover {
+  opacity: 0.9;
+  transition: opacity 0.2s ease;
+}
+
+.changeImgBoxs {
+  position: relative;
+  overflow: hidden;
+  width: 257px;
+  height: 292px;
+  background: #ffffff;
+  box-shadow: 0px 7px 16px 0px rgba(108, 200, 220, 0.53);
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.changeImgBoxs .details {
+  padding-top: 22px;
+  font-weight: 500;
+  font-size: 35px;
+  color: #374693;
+  line-height: 49px;
+  text-align: center;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.symbolBox2 {
+  width: 166px;
+  height: 166px;
+  border: 6px solid #4daaff;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+}
+.symbol2 {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: 100%;
+  transform: translateX(-50%);
+}
+
+.priceLists {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9);
+}
+.closeBtn {
+  position: absolute;
+  right: 30px;
+  top: 20px;
+  width: 40px;
+  height: 40px;
+  font-size: 38px;
+  line-height: 40px;
+  text-align: center;
+  border-radius: 50%;
+  border: 2px solid rgba(127, 255, 255, 0.75);
+  color: rgba(127, 255, 255, 0.75);
+  cursor: pointer;
+}
+
+.listBoxs {
+  width: 80%;
+  height: 80%;
+  border-radius: 20px;
+  border: 2px solid rgba(127, 255, 255, 0.75);
+  box-shadow: 0 0 20px rgba(127, 255, 255, 0.75);
+  margin: 0 auto;
+  margin-top: 80px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.listBoxs .tit {
+  height: 80px;
+  width: 100%;
+  font-size: 38px;
+  text-align: center;
+  line-height: 80px;
+  color: rgba(127, 255, 255, 0.75);
+}
+.listBoxs .listBox {
+  min-height: 80px;
+  padding: 20px;
+  display: flex;
+  align-content: center;
+  padding-left: 60px;
+}
+.listBox label {
+  font-size: 24px;
+  color: rgba(127, 255, 255, 0.75);
+  display: block;
+  width: 120px;
+  text-align: right;
+  padding-right: 20px;
+  line-height: 80px;
+}
+.listBox dl {
+  width: 110px;
+  height: 150px;
+  padding: 10px;
+  border: 2px solid rgba(127, 255, 255, 0.75);
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(127, 255, 255, 0.75);
+  background: rgba(127, 255, 255, 0.25);
+  margin-right: 20px;
+}
+.listBox dl dt {
+  width: 100%;
+  height: 80%;
+  position: relative;
+  overflow: hidden;
+}
+.listBox dl dt img {
+  height: 100%;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.listBox dl dd {
+  text-align: center;
+  font-size: 15px;
+  line-height: 40px;
+  color: rgba(127, 255, 255, 0.75);
+}
+.listBoxs .clear {
+  position: absolute;
+  left: 30px;
+  bottom: 30px;
+  width: 120px;
+  height: 50px;
+  font-size: 20px;
+  text-align: center;
+  line-height: 50px;
+  cursor: pointer;
+  color: rgba(127, 255, 255, 0.75);
+  border-radius: 5px;
+  border: 2px solid rgba(127, 255, 255, 0.75);
+  box-shadow: 0 0 10px rgba(127, 255, 255, 0.75);
+  background: rgba(127, 255, 255, 0.25);
+}
+.listBoxs .clear2 {
+  right: 30px;
+  left: auto;
+}
+.spic {
+  position: absolute;
+  right: 20px;
+  top: 70px;
+  width: 400px;
+  height: 80%;
+}
+/*特等奖*/
+.spic p {
+  color: rgba(127, 255, 255, 0.75);
+  font-size: 25px;
+  line-height: 3;
+}
+.spic dl {
+  width: 240px;
+  height: 320px;
+  padding: 20px;
+  border: 2px solid rgba(127, 255, 255, 0.75);
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(127, 255, 255, 0.75);
+  background: rgba(127, 255, 255, 0.25);
+  margin-right: 20px;
+}
+.spic dl dt {
+  width: 100%;
+  height: 83%;
+  position: relative;
+  overflow: hidden;
+}
+.spic dl dt img {
+  height: 100%;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.spic dl dd {
+  text-align: center;
+  font-size: 32px;
+  line-height: 70px;
+  color: rgba(127, 255, 255, 0.75);
+}
+
+/*礼包*/
+.imgBox {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 300px;
+  height: 400px;
+  background: rgba(0, 0, 0, 0.3);
+  margin-top: 100px;
+}
+.imgBox p {
+  height: 100px;
+  line-height: 140px;
+  color: rgba(127, 255, 255, 0.75);
+  font-size: 36px;
+  text-align: center;
+}
+.imgBox img {
+  width: 300px;
+  height: 300px;
+}

public/roll-call/index.html

@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+  <meta http-equiv="Cache-control" content="no-cache">
+  <meta http-equiv="Cache" content="no-cache">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <title>点名</title>
+  <link rel="stylesheet" href="./css/index.css">
+  <script src="js/three.min.js"></script>
+  <script src="js/tween.min.js"></script>
+  <!-- <script src="js/stats.min.js"></script> -->
+  <script src="js/TrackballControls.js"></script>
+  <script src="js/CSS3DRenderer.js"></script>
+  <script src="js/vue.min.js"></script>
+  <!-- 创建星星 -->
+  <!-- <script src="js/star.js"></script> -->
+  <!-- 数据位置 -->
+  <script src="js/data.js"></script>
+</head>
+
+<body>
+
+  <div id="container" style="pointer-events: none;"></div>
+  <div id="vueBoxs">
+    <div class="bss" @dblclick="()=>{animationStatus?closes():start()}">
+      <div class="pageTitle"></div>
+      <div v-if="platform!=='modal'"  class="iconBack" @click.stop="onBack()"></div>
+      <div id="menu" :class="[platform==='modal'?(imagePos==='right'?'menuRight':'menuLeft'):'']">
+        <button id="table" :class="tableIndex <= 1 ? 'disabled' : ''" v-show="!animationStatus"
+          @click.stop="start()"></button>
+        <button id="sphere" v-show="animationStatus" @click.stop="closes()"></button>
+        <button v-if="platform==='modal'" id="backBtn" @click.stop="onBack()"></button>
+        <!-- <button id="reset" style="margin-left:40px;" @click="resets()">照片墙</button> -->
+        <!-- <button id="lists" @click="listShow = true">中奖名单</button> -->
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
+<script>
+  var table = getData();
+  var tableLens = table.length;
+  var camera, scene, renderer;
+  var controls;
+  var objects = [];
+  var targets = { chaos: [], table: [], sphere: [], helix: [], grid: [] };
+  var ang = 0, moving = false, objectsss, starBG, isMoving = false;  //objectsss 为切换的图片的
+  var cpx = 0, cpy = 0, cpz = 0, crx = 0, cry = 0, crz = 0;
+
+  function init() {
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
+    camera.position.z = 1500;
+    scene = new THREE.Scene();
+    // table
+    for (var i = 0; i < table.length; i++) {
+      // 每个图标的盒子
+      var element = document.createElement('div');
+      element.className = 'element';
+      element.style.backgroundColor = 'rgba(255,255,255)';
+      element.style.borderRadius = '12px'
+      if (i >= 32) {
+        element.className = 'element hide'
+      }
+      // 图片
+      var symbolBox = document.createElement('div');
+      var symbol = document.createElement('img');
+      symbolBox.className = 'symbolBox';
+      symbol.className = 'symbol';
+      symbol.src = table[i].img;
+      symbolBox.appendChild(symbol);
+      element.appendChild(symbolBox);
+      // 姓名
+      var details = document.createElement('div');
+      details.className = 'details';
+      details.innerHTML = table[i].name;
+      element.appendChild(details);
+      // 图标变成3d内的对象，放入场景中
+      var object = new THREE.CSS3DObject(element);
+      object.position.x = Math.random() * 3400 - 1700;
+      object.position.y = Math.random() * 3400 - 1700;
+      object.position.z = Math.random() * 3400 - 1700;
+      object.name = table[i].name;
+      scene.add(object);
+      objects.push(object);
+      // 根据索引，定制位置
+      var object = new THREE.Object3D();
+      var ix = (i) % 8;
+      object.position.y = 300;
+      if (table.length === 1) {
+        object.position.x = 0;
+      } else if (table.length === 2) {
+        object.position.x = (ix * 172) - (172 * 1 / 2);
+      } else if (table.length === 3) {
+        object.position.x = (ix * 172) - (172 * 2 / 2);
+      } else if (table.length === 4) {
+        object.position.x = (ix * 172) - (172 * 3 / 2);
+      } else if (table.length === 5) {
+        object.position.x = (ix * 172) - (172 * 4 / 2);
+      } else if (table.length === 6) {
+        object.position.x = (ix * 172) - (172 * 5 / 2);
+      } else if (table.length === 7) {
+        object.position.x = (ix * 172) - (172 * 6 / 2);
+      } else {
+        var iy = Math.floor((i) / 8);
+        object.position.x = (ix * 172) - 600;
+        object.position.y = - (iy * 192) + 300;
+      }
+
+      targets.table.push(object);
+    }
+
+    // 创建切换图片
+    var elements = document.createElement('div');
+    elements.className = 'changeImgBoxs';
+    // element.style.backgroundImage = "url(./img/pic.png)";
+    elements.style.backgroundColor = 'rgba(255,255,255)';
+
+    var symbolBox = document.createElement('div');
+    var symbol = document.createElement('img');
+    symbol.setAttribute("id", "changeImg");
+    symbolBox.className = 'symbolBox2';
+    symbol.className = 'symbol2';
+    symbol.src = table[0].img;
+    symbolBox.appendChild(symbol);
+    elements.appendChild(symbolBox);
+
+    var details = document.createElement('div');
+    details.setAttribute("id", "detailss");
+    details.className = 'details';
+    details.innerHTML = table[0].name;
+    elements.appendChild(details);
+
+    objectsss = new THREE.CSS3DObject(elements);
+    objectsss.position.x = 0;
+    objectsss.position.y = 20000;
+    objectsss.position.z = 0;
+    scene.add(objectsss);
+    // 散乱随机位置
+    var vector = new THREE.Vector3();
+    for (var i = 0, l = objects.length; i < l; i++) {
+      var phi = Math.acos(-1 + (2 * i) / l);
+      var theta = Math.sqrt(l * Math.PI) * phi;
+      var object = new THREE.Object3D();
+      var py = Math.random() * 3400 - 1700;
+      if (py < 400 && py > -400) {    //防止停止时，图片位置不好挡住中央的图片
+        if (py < 0) {
+          py -= 400;
+        } else {
+          py += 400;
+        }
+      }
+      object.position.x = Math.random() * 3400 - 1700;
+      object.position.y = py;
+      object.position.z = Math.random() * 3400 - 1700;
+      object.lookAt(vector);
+      targets.chaos.push(object);
+    }
+    // 球
+    var vector = new THREE.Vector3();
+    for (var i = 0, l = objects.length; i < l; i++) {
+      var phi = Math.acos(-1 + (2 * i) / l);
+      var theta = Math.sqrt(l * Math.PI) * phi;
+      var object = new THREE.Object3D();
+      object.position.x = 750 * Math.cos(theta) * Math.sin(phi);
+      object.position.y = 750 * Math.sin(theta) * Math.sin(phi);
+      object.position.z = 750 * Math.cos(phi);
+      vector.copy(object.position).multiplyScalar(2);
+      object.lookAt(vector);
+      targets.sphere.push(object);
+    }
+    //渲染
+    renderer = new THREE.CSS3DRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.domElement.style.position = 'absolute';
+    document.getElementById('container').appendChild(renderer.domElement);
+    //控制器
+    controls = new THREE.TrackballControls(camera, renderer.domElement);
+    controls.rotateSpeed = 0.5;
+    controls.minDistance = 500;
+    controls.maxDistance = 6000;
+    controls.addEventListener('change', render);
+    // 初始化
+    transform(targets.table, 500);
+    window.addEventListener('resize', onWindowResize, false);
+    cpx = camera.position.x;
+    cpy = camera.position.y;
+    cpz = camera.position.z;
+
+    crx = camera.rotation.x;
+    cry = camera.rotation.y;
+    crz = camera.rotation.z;
+  }
+  // 切换状态时动画
+  function transform(targets, duration, type) {
+    var scale = 1;
+    if (type == undefined) {
+      type = 0;
+    }
+    TWEEN.removeAll();
+    for (var i = 0; i < objects.length; i++) {
+      var object = objects[i];
+      var target = targets[i];
+
+      new TWEEN.Tween(object.position)
+        .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
+        .easing(TWEEN.Easing.Exponential.InOut)
+        .start();
+      new TWEEN.Tween(object.rotation)
+        .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
+        .easing(TWEEN.Easing.Exponential.InOut)
+        .start();
+    }
+    new TWEEN.Tween(this)
+      .to({}, duration * 2)
+      .onUpdate(render)
+      .start()
+
+    // console.log(document.querySelectorAll('.element'), '1212')
+    setTimeout(() => {
+      if (moving || type === 2) {
+        const elements = document.querySelectorAll('.element')
+        if (elements.length > 0) {
+          elements.forEach((e, index) => {
+            if (type === 2) {
+              if (index >= 32) {
+                e.classList.add('hide')
+              }
+            } else {
+              e.classList.remove('hide')
+            }
+          })
+        }
+      }
+    }, 400);
+
+  }
+  // 屏幕大小适配
+  function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    render();
+  }
+  function animate() {
+    requestAnimationFrame(animate);
+    TWEEN.update();
+    // 旋转
+    if (moving) {
+      movings();
+    }
+    controls.update();
+    // 星空位置与相机位置相对
+    cpx = camera.position.x;
+    cpy = camera.position.y;
+    cpz = camera.position.z;
+
+    crx = camera.rotation.x;
+    cry = camera.rotation.y;
+    crz = camera.rotation.z;
+
+  }
+  function render() {
+    renderer.render(scene, camera);
+  }
+  var numsss = 0, srcss = '', txtsss = '';
+  function movings() {
+    // 相机旋转
+    ang += Math.PI / 50;
+    camera.position.x = Math.cos(ang) * 2000;
+    camera.position.z = Math.sin(ang) * 2000;
+    camera.position.y = 0;
+    // 相机方向重置
+    camera.up.x = 0;
+    camera.up.y = 1;
+    camera.up.z = 0;
+    // 图片方向固定
+    objectsss.rotation.y = -ang + Math.PI / 2;
+    //中间图片切换
+    numsss = Math.floor(Math.random() * tableLens);
+    if (numsss == tableLens) {
+      numsss = tableLens - 1;
+    }
+    srcss = table[numsss].img;
+    txtsss = table[numsss].name;
+    changeImg.src = srcss;
+    detailss.innerHTML = txtsss;
+  }
+  // 停止时，图片放大动画
+  function objDeal(obj, nums) {
+    var option = {
+      x: obj.scale.x,
+      y: obj.scale.y,
+      z: obj.scale.z,
+    };
+    var tween = new TWEEN.Tween(option).to({
+      x: nums,
+      y: nums,
+      z: nums,
+    }, 300).delay(100).onUpdate(function () {
+      obj.scale.x = this.x;
+      obj.scale.y = this.y;
+      obj.scale.z = this.z;
+      isMoving = true;
+    }).onComplete(function () {
+      isMoving = false;
+    }).start();
+  }
+
+  // 初始化数据
+  function renderData(data) {
+    table = data
+    tableLens = data.length
+    vm.tableIndex = tableLens
+    init();
+    animate();
+
+    console.log(vm.tableIndex, 'renderData')
+  }
+
+  //点击事件及部分判断
+  var vm = new Vue({
+    el: '#vueBoxs',
+    data: {
+      animationStatus: false,
+      tableIndex: 0,
+      listShow: false,
+      platform: "",
+      imagePos: ""
+
+    },
+    methods: {
+      keyDowns: function () {
+        this.closes();
+      },
+      //开始
+      start: function () {
+        if (this.tableIndex <= 1) {
+          return
+        }
+        moving = true;
+        this.animationStatus = true;
+        objectsss.position.y = 0;
+        transform(targets.sphere, 1000);
+        objDeal(objectsss, 1);
+        // music.play();
+        // this.ckPrice();
+      },
+      //结束
+      closes: function () {
+        // music.pause();
+        if (!moving) {
+          return;
+        }
+        // music2.play();
+        moving = false;
+        this.animationStatus = false;
+        // this.choosePerson();
+        transform(targets.chaos, 250, 1);
+        objDeal(objectsss, 1.8);
+      },
+      //回到照片墙的状态
+      resets: function () {
+        moving = false;
+        camera.position.z = 1500;
+        camera.position.x = 0;
+        camera.position.y = 0;
+        camera.up.x = 0;//相机以哪个方向为上方
+        camera.up.y = 1;
+        camera.up.z = 0;
+
+        //图片重置方向
+        objectsss.rotation.y = 0;
+        objectsss.position.y = 20000;
+        objectsss.scale.set(1, 1, 1);
+        // 星空背景图重置
+        transform(targets.table, 400, 2);
+        // music.pause();
+        // this.ckPrice();
+      },
+      onBack() {
+        // 返回时先结束
+        this.closes()
+        this.resets()
+        window.parent.postMessage({
+          api: 'callBack',
+          loading: false,
+        }, '*');
+      },
+      handleUrlParmas(){
+        const params=getUrlParams(location.href)
+        params?.platform&&(this.platform = params?.platform)
+        params?.imagePos&&(this.imagePos = params?.imagePos)
+      }
+    },
+    created: function () {
+      // init();
+      // animate();
+
+      // getStar();
+      // this.ckPrice();
+      this.handleUrlParmas()
+    }
+  })
+  function getUrlParams(url) {
+    let urlStr = url.split('?')[1]
+    const urlSearchParams = new URLSearchParams(urlStr)
+    const result = Object.fromEntries(urlSearchParams.entries())
+    return result
+  }
+</script>

public/roll-call/js/CSS2DRenderer.js

@@ -0,0 +1,173 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.CSS2DObject = function ( element ) {
+
+	THREE.Object3D.call( this );
+
+	this.element = element;
+	this.element.style.position = 'absolute';
+
+	this.addEventListener( 'removed', function ( event ) {
+
+		if ( this.element.parentNode !== null ) {
+
+			this.element.parentNode.removeChild( this.element );
+
+		}
+
+	} );
+
+};
+
+THREE.CSS2DObject.prototype = Object.create( THREE.Object3D.prototype );
+THREE.CSS2DObject.prototype.constructor = THREE.CSS2DObject;
+
+//
+
+THREE.CSS2DRenderer = function () {
+
+	console.log( 'THREE.CSS2DRenderer', THREE.REVISION );
+
+	var _width, _height;
+	var _widthHalf, _heightHalf;
+
+	var vector = new THREE.Vector3();
+	var viewMatrix = new THREE.Matrix4();
+	var viewProjectionMatrix = new THREE.Matrix4();
+
+	var cache = {
+		objects: new WeakMap()
+	};
+
+	var domElement = document.createElement( 'div' );
+	domElement.style.overflow = 'hidden';
+
+	this.domElement = domElement;
+
+	this.getSize = function () {
+
+		return {
+			width: _width,
+			height: _height
+		};
+
+	};
+
+	this.setSize = function ( width, height ) {
+
+		_width = width;
+		_height = height;
+
+		_widthHalf = _width / 2;
+		_heightHalf = _height / 2;
+
+		domElement.style.width = width + 'px';
+		domElement.style.height = height + 'px';
+
+	};
+
+	var renderObject = function ( object, camera ) {
+
+		if ( object instanceof THREE.CSS2DObject ) {
+
+			vector.setFromMatrixPosition( object.matrixWorld );
+			vector.applyMatrix4( viewProjectionMatrix );
+
+			var element = object.element;
+			var style = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';
+
+			element.style.WebkitTransform = style;
+			element.style.MozTransform = style;
+			element.style.oTransform = style;
+			element.style.transform = style;
+
+			var objectData = {
+				distanceToCameraSquared: getDistanceToSquared( camera, object )
+			};
+
+			cache.objects.set( object, objectData );
+
+			if ( element.parentNode !== domElement ) {
+
+				domElement.appendChild( element );
+
+			}
+
+		}
+
+		for ( var i = 0, l = object.children.length; i < l; i ++ ) {
+
+			renderObject( object.children[ i ], camera );
+
+		}
+
+	};
+
+	var getDistanceToSquared = function () {
+
+		var a = new THREE.Vector3();
+		var b = new THREE.Vector3();
+
+		return function ( object1, object2 ) {
+
+			a.setFromMatrixPosition( object1.matrixWorld );
+			b.setFromMatrixPosition( object2.matrixWorld );
+
+			return a.distanceToSquared( b );
+
+		};
+
+	}();
+
+	var filterAndFlatten = function ( scene ) {
+
+		var result = [];
+
+		scene.traverse( function ( object ) {
+
+			if ( object instanceof THREE.CSS2DObject ) result.push( object );
+
+		} );
+
+		return result;
+
+	};
+
+	var zOrder = function ( scene ) {
+
+		var sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
+
+			var distanceA = cache.objects.get( a ).distanceToCameraSquared;
+			var distanceB = cache.objects.get( b ).distanceToCameraSquared;
+
+			return distanceA - distanceB;
+
+		} );
+
+		var zMax = sorted.length;
+
+		for ( var i = 0, l = sorted.length; i < l; i ++ ) {
+
+			sorted[ i ].element.style.zIndex = zMax - i;
+
+		}
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		scene.updateMatrixWorld();
+
+		if ( camera.parent === null ) camera.updateMatrixWorld();
+
+		viewMatrix.copy( camera.matrixWorldInverse );
+		viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix );
+
+		renderObject( scene, camera );
+		zOrder( scene );
+
+	};
+
+};

public/roll-call/js/CSS3DRenderer.js

@@ -0,0 +1,243 @@
+/**
+ * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.CSS3DObject = function ( element ) {
+
+	THREE.Object3D.call( this );
+
+	this.element = element;
+	this.element.style.position = 'absolute';
+
+	this.addEventListener( 'removed', function ( event ) {
+
+		if ( this.element.parentNode !== null ) {
+
+			this.element.parentNode.removeChild( this.element );
+
+		}
+
+	} );
+
+};
+
+THREE.CSS3DObject.prototype = Object.create( THREE.Object3D.prototype );
+
+THREE.CSS3DSprite = function ( element ) {
+
+	THREE.CSS3DObject.call( this, element );
+
+};
+
+THREE.CSS3DSprite.prototype = Object.create( THREE.CSS3DObject.prototype );
+
+//
+
+THREE.CSS3DRenderer = function () {
+
+	console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
+
+	var _width, _height;
+	var _widthHalf, _heightHalf;
+
+	var matrix = new THREE.Matrix4();
+	
+	var cache = {
+		camera: { fov: 0, style: '' },
+		objects: {}
+	};
+
+	var domElement = document.createElement( 'div' );
+	domElement.style.overflow = 'hidden';
+
+	domElement.style.WebkitTransformStyle = 'preserve-3d';
+	domElement.style.MozTransformStyle = 'preserve-3d';
+	domElement.style.oTransformStyle = 'preserve-3d';
+	domElement.style.transformStyle = 'preserve-3d';
+
+	this.domElement = domElement;
+
+	var cameraElement = document.createElement( 'div' );
+
+	cameraElement.style.WebkitTransformStyle = 'preserve-3d';
+	cameraElement.style.MozTransformStyle = 'preserve-3d';
+	cameraElement.style.oTransformStyle = 'preserve-3d';
+	cameraElement.style.transformStyle = 'preserve-3d';
+
+	domElement.appendChild( cameraElement );
+
+	this.setClearColor = function () {
+
+	};
+
+	this.setSize = function ( width, height ) {
+
+		_width = width;
+		_height = height;
+
+		_widthHalf = _width / 2;
+		_heightHalf = _height / 2;
+
+		domElement.style.width = width + 'px';
+		domElement.style.height = height + 'px';
+
+		cameraElement.style.width = width + 'px';
+		cameraElement.style.height = height + 'px';
+
+	};
+
+	var epsilon = function ( value ) {
+
+		return Math.abs( value ) < 0.000001 ? 0 : value;
+
+	};
+
+	var getCameraCSSMatrix = function ( matrix ) {
+
+		var elements = matrix.elements;
+
+		return 'matrix3d(' +
+			epsilon( elements[ 0 ] ) + ',' +
+			epsilon( - elements[ 1 ] ) + ',' +
+			epsilon( elements[ 2 ] ) + ',' +
+			epsilon( elements[ 3 ] ) + ',' +
+			epsilon( elements[ 4 ] ) + ',' +
+			epsilon( - elements[ 5 ] ) + ',' +
+			epsilon( elements[ 6 ] ) + ',' +
+			epsilon( elements[ 7 ] ) + ',' +
+			epsilon( elements[ 8 ] ) + ',' +
+			epsilon( - elements[ 9 ] ) + ',' +
+			epsilon( elements[ 10 ] ) + ',' +
+			epsilon( elements[ 11 ] ) + ',' +
+			epsilon( elements[ 12 ] ) + ',' +
+			epsilon( - elements[ 13 ] ) + ',' +
+			epsilon( elements[ 14 ] ) + ',' +
+			epsilon( elements[ 15 ] ) +
+		')';
+
+	};
+
+	var getObjectCSSMatrix = function ( matrix ) {
+
+		var elements = matrix.elements;
+
+		return 'translate3d(-50%,-50%,0) matrix3d(' +
+			epsilon( elements[ 0 ] ) + ',' +
+			epsilon( elements[ 1 ] ) + ',' +
+			epsilon( elements[ 2 ] ) + ',' +
+			epsilon( elements[ 3 ] ) + ',' +
+			epsilon( - elements[ 4 ] ) + ',' +
+			epsilon( - elements[ 5 ] ) + ',' +
+			epsilon( - elements[ 6 ] ) + ',' +
+			epsilon( - elements[ 7 ] ) + ',' +
+			epsilon( elements[ 8 ] ) + ',' +
+			epsilon( elements[ 9 ] ) + ',' +
+			epsilon( elements[ 10 ] ) + ',' +
+			epsilon( elements[ 11 ] ) + ',' +
+			epsilon( elements[ 12 ] ) + ',' +
+			epsilon( elements[ 13 ] ) + ',' +
+			epsilon( elements[ 14 ] ) + ',' +
+			epsilon( elements[ 15 ] ) +
+		')';
+
+	};
+
+	var renderObject = function ( object, camera ) {
+
+		if ( object instanceof THREE.CSS3DObject ) {
+
+			var style;
+
+			if ( object instanceof THREE.CSS3DSprite ) {
+
+				// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
+
+				matrix.copy( camera.matrixWorldInverse );
+				matrix.transpose();
+				matrix.copyPosition( object.matrixWorld );
+				matrix.scale( object.scale );
+
+				matrix.elements[ 3 ] = 0;
+				matrix.elements[ 7 ] = 0;
+				matrix.elements[ 11 ] = 0;
+				matrix.elements[ 15 ] = 1;
+
+				style = getObjectCSSMatrix( matrix );
+
+			} else {
+
+				style = getObjectCSSMatrix( object.matrixWorld );
+
+			}
+
+			var element = object.element;
+			var cachedStyle = cache.objects[ object.id ];
+
+			if ( cachedStyle === undefined || cachedStyle !== style ) {
+
+				element.style.WebkitTransform = style;
+				element.style.MozTransform = style;
+				element.style.oTransform = style;
+				element.style.transform = style;
+
+				cache.objects[ object.id ] = style;
+
+			}
+
+			if ( element.parentNode !== cameraElement ) {
+
+				cameraElement.appendChild( element );
+
+			}
+
+		}
+
+		for ( var i = 0, l = object.children.length; i < l; i ++ ) {
+
+			renderObject( object.children[ i ], camera );
+
+		}
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height;
+
+		if ( cache.camera.fov !== fov ) {
+
+			domElement.style.WebkitPerspective = fov + "px";
+			domElement.style.MozPerspective = fov + "px";
+			domElement.style.oPerspective = fov + "px";
+			domElement.style.perspective = fov + "px";
+
+			cache.camera.fov = fov;
+
+		}
+
+		scene.updateMatrixWorld();
+
+		if ( camera.parent === undefined ) camera.updateMatrixWorld();
+
+		camera.matrixWorldInverse.getInverse( camera.matrixWorld );
+
+		var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) +
+			" translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
+
+		if ( cache.camera.style !== style ) {
+
+			cameraElement.style.WebkitTransform = style;
+			cameraElement.style.MozTransform = style;
+			cameraElement.style.oTransform = style;
+			cameraElement.style.transform = style;
+			
+			cache.camera.style = style;
+
+		}
+
+		renderObject( scene, camera );
+
+	};
+
+};

public/roll-call/js/RaytracingRenderer.js

@@ -0,0 +1,287 @@
+/**
+ * RaytracingRenderer renders by raytracing it's scene. However, it does not
+ * compute the pixels itself but it hands off and coordinates the tasks for workers.
+ * The workers compute the pixel values and this renderer simply paints it to the Canvas.
+ *
+ * @author zz85 / http://github.com/zz85
+ */
+
+THREE.RaytracingRenderer = function ( parameters ) {
+
+	console.log( 'THREE.RaytracingRenderer', THREE.REVISION );
+
+	parameters = parameters || {};
+
+	var scope = this;
+	var pool = [];
+	var renderering = false;
+
+	var canvas = document.createElement( 'canvas' );
+	var context = canvas.getContext( '2d', {
+		alpha: parameters.alpha === true
+	} );
+
+	var canvasWidth, canvasHeight;
+
+	var clearColor = new THREE.Color( 0x000000 );
+
+	this.domElement = canvas;
+
+	this.autoClear = true;
+
+	var workers = parameters.workers;
+	var blockSize = parameters.blockSize || 64;
+	this.randomize = parameters.randomize;
+
+	var toRender = [], workerId = 0, sceneId = 0;
+
+	console.log( '%cSpinning off ' + workers + ' Workers ', 'font-size: 20px; background: black; color: white; font-family: monospace;' );
+
+	this.setWorkers = function ( w ) {
+
+		workers = w || navigator.hardwareConcurrency || 4;
+
+		while ( pool.length < workers ) {
+
+			var worker = new Worker( parameters.workerPath );
+			worker.id = workerId ++;
+
+			worker.onmessage = function ( e ) {
+
+				var data = e.data;
+
+				if ( ! data ) return;
+
+				if ( data.blockSize && sceneId == data.sceneId ) { // we match sceneId here to be sure
+
+					var imagedata = new ImageData( new Uint8ClampedArray( data.data ), data.blockSize, data.blockSize );
+					context.putImageData( imagedata, data.blockX, data.blockY );
+
+					// completed
+
+					console.log( 'Worker ' + this.id, data.time / 1000, ( Date.now() - reallyThen ) / 1000 + ' s' );
+
+					if ( pool.length > workers ) {
+
+						pool.splice( pool.indexOf( this ), 1 );
+						return this.terminate();
+
+					}
+
+					renderNext( this );
+
+				}
+
+			};
+
+			worker.color = new THREE.Color().setHSL( Math.random(), 0.8, 0.8 ).getHexString();
+			pool.push( worker );
+
+			updateSettings( worker );
+
+			if ( renderering ) {
+
+				worker.postMessage( {
+					scene: sceneJSON,
+					camera: cameraJSON,
+					annex: materials,
+					sceneId: sceneId
+				} );
+
+				renderNext( worker );
+
+			}
+
+		}
+
+		if ( ! renderering ) {
+
+			while ( pool.length > workers ) {
+
+				pool.pop().terminate();
+
+			}
+
+		}
+
+	};
+
+	this.setWorkers( workers );
+
+	this.setClearColor = function ( color /*, alpha */ ) {
+
+		clearColor.set( color );
+
+	};
+
+	this.setPixelRatio = function () {};
+
+	this.setSize = function ( width, height ) {
+
+		canvas.width = width;
+		canvas.height = height;
+
+		canvasWidth = canvas.width;
+		canvasHeight = canvas.height;
+
+		context.fillStyle = 'white';
+
+		pool.forEach( updateSettings );
+
+	};
+
+	this.setSize( canvas.width, canvas.height );
+
+	this.clear = function () {
+
+	};
+
+	//
+
+	var totalBlocks, xblocks, yblocks;
+
+	function updateSettings( worker ) {
+
+		worker.postMessage( {
+
+			init: [ canvasWidth, canvasHeight ],
+			worker: worker.id,
+			// workers: pool.length,
+			blockSize: blockSize
+
+		} );
+
+	}
+
+	function renderNext( worker ) {
+
+		if ( ! toRender.length ) {
+
+			renderering = false;
+			return scope.dispatchEvent( { type: "complete" } );
+
+		}
+
+		var current = toRender.pop();
+
+		var blockX = ( current % xblocks ) * blockSize;
+		var blockY = ( current / xblocks | 0 ) * blockSize;
+
+		worker.postMessage( {
+			render: true,
+			x: blockX,
+			y: blockY,
+			sceneId: sceneId
+		} );
+
+		context.fillStyle = '#' + worker.color;
+
+		context.fillRect( blockX, blockY, blockSize, blockSize );
+
+	}
+
+	var materials = {};
+
+	var sceneJSON, cameraJSON, reallyThen;
+
+	// additional properties that were not serialize automatically
+
+	var _annex = {
+
+		mirror: 1,
+		reflectivity: 1,
+		refractionRatio: 1,
+		glass: 1
+
+	};
+
+	function serializeObject( o ) {
+
+		var mat = o.material;
+
+		if ( ! mat || mat.uuid in materials ) return;
+
+		var props = {};
+		for ( var m in _annex ) {
+
+			if ( mat[ m ] !== undefined ) {
+
+				props[ m ] = mat[ m ];
+
+			}
+
+		}
+
+		materials[ mat.uuid ] = props;
+
+	}
+
+	this.render = function ( scene, camera ) {
+
+		renderering = true;
+
+		// update scene graph
+
+		if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
+
+		// update camera matrices
+
+		if ( camera.parent === null ) camera.updateMatrixWorld();
+
+
+		sceneJSON = scene.toJSON();
+		cameraJSON = camera.toJSON();
+		++ sceneId;
+
+		scene.traverse( serializeObject );
+
+		pool.forEach( function ( worker ) {
+
+			worker.postMessage( {
+				scene: sceneJSON,
+				camera: cameraJSON,
+				annex: materials,
+				sceneId: sceneId
+			} );
+
+		} );
+
+		context.clearRect( 0, 0, canvasWidth, canvasHeight );
+		reallyThen = Date.now();
+
+		xblocks = Math.ceil( canvasWidth / blockSize );
+		yblocks = Math.ceil( canvasHeight / blockSize );
+		totalBlocks = xblocks * yblocks;
+
+		toRender = [];
+
+		for ( var i = 0; i < totalBlocks; i ++ ) {
+
+			toRender.push( i );
+
+		}
+
+
+		// Randomize painting :)
+
+		if ( scope.randomize ) {
+
+			for ( var i = 0; i < totalBlocks; i ++ ) {
+
+				var swap = Math.random() * totalBlocks | 0;
+				var tmp = toRender[ swap ];
+				toRender[ swap ] = toRender[ i ];
+				toRender[ i ] = tmp;
+
+			}
+
+		}
+
+
+		pool.forEach( renderNext );
+
+	};
+
+};
+
+Object.assign( THREE.RaytracingRenderer.prototype, THREE.EventDispatcher.prototype );

public/roll-call/js/TrackballControls.js

@@ -0,0 +1,611 @@
+/**
+ * @author Eberhard Graether / http://egraether.com/
+ * @author Mark Lundin 	/ http://mark-lundin.com
+ */
+
+THREE.TrackballControls = function ( object, domElement ) {
+
+	var _this = this;
+	var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
+
+	this.object = object;
+	this.domElement = ( domElement !== undefined ) ? domElement : document;
+
+	// API
+
+	this.enabled = true;
+
+	this.screen = { left: 0, top: 0, width: 0, height: 0 };
+
+	this.rotateSpeed = 1.0;
+	this.zoomSpeed = 1.2;
+	this.panSpeed = 0.3;
+
+	this.noRotate = false;
+	this.noZoom = false;
+	this.noPan = false;
+	this.noRoll = false;
+
+	this.staticMoving = false;
+	this.dynamicDampingFactor = 0.2;
+
+	this.minDistance = 0;
+	this.maxDistance = Infinity;
+
+	this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
+
+	// internals
+
+	this.target = new THREE.Vector3();
+
+	var EPS = 0.000001;
+
+	var lastPosition = new THREE.Vector3();
+
+	var _state = STATE.NONE,
+	_prevState = STATE.NONE,
+
+	_eye = new THREE.Vector3(),
+
+	_rotateStart = new THREE.Vector3(),
+	_rotateEnd = new THREE.Vector3(),
+
+	_zoomStart = new THREE.Vector2(),
+	_zoomEnd = new THREE.Vector2(),
+
+	_touchZoomDistanceStart = 0,
+	_touchZoomDistanceEnd = 0,
+
+	_panStart = new THREE.Vector2(),
+	_panEnd = new THREE.Vector2();
+
+	// for reset
+
+	this.target0 = this.target.clone();
+	this.position0 = this.object.position.clone();
+	this.up0 = this.object.up.clone();
+
+	// events
+
+	var changeEvent = { type: 'change' };
+	var startEvent = { type: 'start'};
+	var endEvent = { type: 'end'};
+
+
+	// methods
+
+	this.handleResize = function () {
+
+		if ( this.domElement === document ) {
+
+			this.screen.left = 0;
+			this.screen.top = 0;
+			this.screen.width = window.innerWidth;
+			this.screen.height = window.innerHeight;
+
+		} else {
+
+			var box = this.domElement.getBoundingClientRect();
+			// adjustments come from similar code in the jquery offset() function
+			var d = this.domElement.ownerDocument.documentElement;
+			this.screen.left = box.left + window.pageXOffset - d.clientLeft;
+			this.screen.top = box.top + window.pageYOffset - d.clientTop;
+			this.screen.width = box.width;
+			this.screen.height = box.height;
+
+		}
+
+	};
+
+	this.handleEvent = function ( event ) {
+
+		if ( typeof this[ event.type ] == 'function' ) {
+
+			this[ event.type ]( event );
+
+		}
+
+	};
+
+	var getMouseOnScreen = ( function () {
+
+		var vector = new THREE.Vector2();
+
+		return function ( pageX, pageY ) {
+
+			vector.set(
+				( pageX - _this.screen.left ) / _this.screen.width,
+				( pageY - _this.screen.top ) / _this.screen.height
+			);
+
+			return vector;
+
+		};
+
+	}() );
+
+	var getMouseProjectionOnBall = ( function () {
+
+		var vector = new THREE.Vector3();
+		var objectUp = new THREE.Vector3();
+		var mouseOnBall = new THREE.Vector3();
+
+		return function ( pageX, pageY ) {
+
+			mouseOnBall.set(
+				( pageX - _this.screen.width * 0.5 - _this.screen.left ) / (_this.screen.width*.5),
+				( _this.screen.height * 0.5 + _this.screen.top - pageY ) / (_this.screen.height*.5),
+				0.0
+			);
+
+			var length = mouseOnBall.length();
+
+			if ( _this.noRoll ) {
+
+				if ( length < Math.SQRT1_2 ) {
+
+					mouseOnBall.z = Math.sqrt( 1.0 - length*length );
+
+				} else {
+
+					mouseOnBall.z = .5 / length;
+					
+				}
+
+			} else if ( length > 1.0 ) {
+
+				mouseOnBall.normalize();
+
+			} else {
+
+				mouseOnBall.z = Math.sqrt( 1.0 - length * length );
+
+			}
+
+			_eye.copy( _this.object.position ).sub( _this.target );
+
+			vector.copy( _this.object.up ).setLength( mouseOnBall.y )
+			vector.add( objectUp.copy( _this.object.up ).cross( _eye ).setLength( mouseOnBall.x ) );
+			vector.add( _eye.setLength( mouseOnBall.z ) );
+
+			return vector;
+
+		};
+
+	}() );
+
+	this.rotateCamera = (function(){
+
+		var axis = new THREE.Vector3(),
+			quaternion = new THREE.Quaternion();
+
+
+		return function () {
+
+			var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
+
+			if ( angle ) {
+
+				axis.crossVectors( _rotateStart, _rotateEnd ).normalize();
+
+				angle *= _this.rotateSpeed;
+
+				quaternion.setFromAxisAngle( axis, -angle );
+
+				_eye.applyQuaternion( quaternion );
+				_this.object.up.applyQuaternion( quaternion );
+
+				_rotateEnd.applyQuaternion( quaternion );
+
+				if ( _this.staticMoving ) {
+
+					_rotateStart.copy( _rotateEnd );
+
+				} else {
+
+					quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
+					_rotateStart.applyQuaternion( quaternion );
+
+				}
+
+			}
+		}
+
+	}());
+
+	this.zoomCamera = function () {
+
+		if ( _state === STATE.TOUCH_ZOOM_PAN ) {
+
+			var factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
+			_touchZoomDistanceStart = _touchZoomDistanceEnd;
+			_eye.multiplyScalar( factor );
+
+		} else {
+
+			var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
+
+			if ( factor !== 1.0 && factor > 0.0 ) {
+
+				_eye.multiplyScalar( factor );
+
+				if ( _this.staticMoving ) {
+
+					_zoomStart.copy( _zoomEnd );
+
+				} else {
+
+					_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
+
+				}
+
+			}
+
+		}
+
+	};
+
+	this.panCamera = (function(){
+
+		var mouseChange = new THREE.Vector2(),
+			objectUp = new THREE.Vector3(),
+			pan = new THREE.Vector3();
+
+		return function () {
+
+			mouseChange.copy( _panEnd ).sub( _panStart );
+
+			if ( mouseChange.lengthSq() ) {
+
+				mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
+
+				pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
+				pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );
+
+				_this.object.position.add( pan );
+				_this.target.add( pan );
+
+				if ( _this.staticMoving ) {
+
+					_panStart.copy( _panEnd );
+
+				} else {
+
+					_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
+
+				}
+
+			}
+		}
+
+	}());
+
+	this.checkDistances = function () {
+
+		if ( !_this.noZoom || !_this.noPan ) {
+
+			if ( _eye.lengthSq() > _this.maxDistance * _this.maxDistance ) {
+
+				_this.object.position.addVectors( _this.target, _eye.setLength( _this.maxDistance ) );
+
+			}
+
+			if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {
+
+				_this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );
+
+			}
+
+		}
+
+	};
+
+	this.update = function () {
+
+		_eye.subVectors( _this.object.position, _this.target );
+
+		if ( !_this.noRotate ) {
+
+			_this.rotateCamera();
+
+		}
+
+		if ( !_this.noZoom ) {
+
+			_this.zoomCamera();
+
+		}
+
+		if ( !_this.noPan ) {
+
+			_this.panCamera();
+
+		}
+
+		_this.object.position.addVectors( _this.target, _eye );
+
+		_this.checkDistances();
+
+		_this.object.lookAt( _this.target );
+
+		if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
+
+			_this.dispatchEvent( changeEvent );
+
+			lastPosition.copy( _this.object.position );
+
+		}
+
+	};
+
+	this.reset = function () {
+
+		_state = STATE.NONE;
+		_prevState = STATE.NONE;
+
+		_this.target.copy( _this.target0 );
+		_this.object.position.copy( _this.position0 );
+		_this.object.up.copy( _this.up0 );
+
+		_eye.subVectors( _this.object.position, _this.target );
+
+		_this.object.lookAt( _this.target );
+
+		_this.dispatchEvent( changeEvent );
+
+		lastPosition.copy( _this.object.position );
+
+	};
+
+	// listeners
+
+	function keydown( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		window.removeEventListener( 'keydown', keydown );
+
+		_prevState = _state;
+
+		if ( _state !== STATE.NONE ) {
+
+			return;
+
+		} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && !_this.noRotate ) {
+
+			_state = STATE.ROTATE;
+
+		} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && !_this.noZoom ) {
+
+			_state = STATE.ZOOM;
+
+		} else if ( event.keyCode === _this.keys[ STATE.PAN ] && !_this.noPan ) {
+
+			_state = STATE.PAN;
+
+		}
+
+	}
+
+	function keyup( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		_state = _prevState;
+
+		window.addEventListener( 'keydown', keydown, false );
+
+	}
+
+	function mousedown( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		if ( _state === STATE.NONE ) {
+
+			_state = event.button;
+
+		}
+
+		if ( _state === STATE.ROTATE && !_this.noRotate ) {
+
+			_rotateStart.copy( getMouseProjectionOnBall( event.pageX, event.pageY ) );
+			_rotateEnd.copy( _rotateStart );
+
+		} else if ( _state === STATE.ZOOM && !_this.noZoom ) {
+
+			_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+			_zoomEnd.copy(_zoomStart);
+
+		} else if ( _state === STATE.PAN && !_this.noPan ) {
+
+			_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+			_panEnd.copy(_panStart)
+
+		}
+		// bai
+//		document.addEventListener( 'mousemove', mousemove, false );
+//		document.addEventListener( 'mouseup', mouseup, false );
+
+		_this.dispatchEvent( startEvent );
+
+	}
+
+	function mousemove( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		if ( _state === STATE.ROTATE && !_this.noRotate ) {
+
+			_rotateEnd.copy( getMouseProjectionOnBall( event.pageX, event.pageY ) );
+
+		} else if ( _state === STATE.ZOOM && !_this.noZoom ) {
+			
+			_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+
+		} else if ( _state === STATE.PAN && !_this.noPan ) {
+			//把右键位移关掉了
+//			_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+
+		}
+
+	}
+
+	function mouseup( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		_state = STATE.NONE;
+
+		document.removeEventListener( 'mousemove', mousemove );
+		document.removeEventListener( 'mouseup', mouseup );
+		_this.dispatchEvent( endEvent );
+
+	}
+
+	function mousewheel( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		var delta = 0;
+
+		if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9
+
+			delta = event.wheelDelta / 40;
+
+		} else if ( event.detail ) { // Firefox
+
+			delta = - event.detail / 3;
+
+		}
+
+		_zoomStart.y += delta * 0.01;
+		_this.dispatchEvent( startEvent );
+		_this.dispatchEvent( endEvent );
+
+	}
+
+	function touchstart( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		switch ( event.touches.length ) {
+
+			case 1:
+				_state = STATE.TOUCH_ROTATE;
+				_rotateStart.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
+				_rotateEnd.copy( _rotateStart );
+				break;
+
+			case 2:
+				_state = STATE.TOUCH_ZOOM_PAN;
+				var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
+				var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+				_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
+
+				var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
+				var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
+				_panStart.copy( getMouseOnScreen( x, y ) );
+				_panEnd.copy( _panStart );
+				break;
+
+			default:
+				_state = STATE.NONE;
+
+		}
+		_this.dispatchEvent( startEvent );
+
+
+	}
+
+	function touchmove( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		switch ( event.touches.length ) {
+
+			case 1:
+				_rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
+				break;
+
+			case 2:
+				var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
+				var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+				_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
+
+				var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
+				var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
+				_panEnd.copy( getMouseOnScreen( x, y ) );
+				break;
+
+			default:
+				_state = STATE.NONE;
+
+		}
+
+	}
+
+	function touchend( event ) {
+
+		if ( _this.enabled === false ) return;
+
+		switch ( event.touches.length ) {
+
+			case 1:
+				_rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
+				_rotateStart.copy( _rotateEnd );
+				break;
+
+			case 2:
+				_touchZoomDistanceStart = _touchZoomDistanceEnd = 0;
+
+				var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
+				var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
+				_panEnd.copy( getMouseOnScreen( x, y ) );
+				_panStart.copy( _panEnd );
+				break;
+
+		}
+
+		_state = STATE.NONE;
+		_this.dispatchEvent( endEvent );
+
+	}
+
+	this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
+
+	this.domElement.addEventListener( 'mousedown', mousedown, false );
+	// bai
+	// this.domElement.addEventListener( 'mousewheel', mousewheel, false );
+	// this.domElement.addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox
+
+	this.domElement.addEventListener( 'touchstart', touchstart, false );
+	this.domElement.addEventListener( 'touchend', touchend, false );
+	this.domElement.addEventListener( 'touchmove', touchmove, false );
+
+//	window.addEventListener( 'keydown', keydown, false );
+//	window.addEventListener( 'keyup', keyup, false );
+
+	this.handleResize();
+
+	// force an update at start
+	this.update();
+
+};
+
+THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );

public/roll-call/js/data.js

@@ -0,0 +1,11 @@
+function getData() {
+  return (data = [
+    { name: '小白', img: './img/1.webp' },
+    { img: './img/2.webp', name: '小黑' },
+    { img: './img/2.webp', name: '小黑' },
+    { img: './img/3.webp', name: '小明' },
+    { img: './img/4.webp', name: '晓得' },
+    { img: './img/4.webp', name: '晓得' },
+    { img: './img/5.webp', name: '小李' }
+  ]);
+}

public/roll-call/js/star.js

@@ -0,0 +1,128 @@
+function getStar() {
+  var canvas = document.createElement('canvas'),
+    ctx = canvas.getContext('2d'),
+    w = (canvas.width = window.innerWidth * 2),
+    h = (canvas.height = window.innerHeight * 2),
+    hue = 217,
+    stars = [],
+    count = 0,
+    maxStars = 350; //星星数量
+
+  //放背景图
+
+  var canvas2 = document.createElement('canvas'),
+    ctx2 = canvas2.getContext('2d');
+  canvas2.width = 100;
+  canvas2.height = 100;
+  var half = canvas2.width / 2,
+    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
+  gradient2.addColorStop(0.025, '#CCC');
+  gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
+  gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
+  gradient2.addColorStop(1, 'transparent');
+
+  ctx2.fillStyle = gradient2;
+  ctx2.beginPath();
+  ctx2.arc(half, half, half, 0, Math.PI * 2);
+  ctx2.fill();
+
+  // End cache
+
+  function random(min, max) {
+    if (arguments.length < 2) {
+      max = min;
+      min = 0;
+    }
+
+    if (min > max) {
+      var hold = max;
+      max = min;
+      min = hold;
+    }
+
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  function maxOrbit(x, y) {
+    var max = Math.max(x, y),
+      diameter = Math.round(Math.sqrt(max * max + max * max));
+    return diameter / 2;
+    //星星移动范围，值越大范围越小，
+  }
+
+  var Star = function () {
+    this.orbitRadius = random(maxOrbit(w, h));
+    this.radius = random(60, this.orbitRadius) / 8;
+    //星星大小
+    this.orbitX = w / 2;
+    this.orbitY = h / 2;
+    this.timePassed = random(0, maxStars);
+    this.speed = random(this.orbitRadius) / 150000;
+    //星星移动速度
+    this.alpha = random(2, 10) / 10;
+
+    count++;
+    stars[count] = this;
+  };
+
+  Star.prototype.draw = function () {
+    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
+      y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
+      twinkle = random(10);
+
+    if (twinkle === 1 && this.alpha > 0) {
+      this.alpha -= 0.05;
+    } else if (twinkle === 2 && this.alpha < 1) {
+      this.alpha += 0.05;
+    }
+
+    ctx.globalAlpha = this.alpha;
+    ctx.drawImage(
+      canvas2,
+      x - this.radius / 2,
+      y - this.radius / 2,
+      this.radius,
+      this.radius
+    );
+    this.timePassed += this.speed;
+  };
+
+  for (var i = 0; i < maxStars; i++) {
+    new Star();
+  }
+
+  function animation() {
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.globalAlpha = 0.5; //尾巴
+    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
+    ctx.fillRect(0, 0, w, h);
+
+    ctx.globalCompositeOperation = 'lighter';
+    for (var i = 1, l = stars.length; i < l; i++) {
+      stars[i].draw();
+    }
+
+    window.requestAnimationFrame(animation);
+  }
+
+  var canvasBoxs = document.createElement('div');
+  var images = document.createElement('img');
+  images.src = './img/starBg.jpg';
+  images.style.opacity = '0.4';
+  images.style.width = '100%';
+  images.style.height = '1280px';
+  images.style.zIndex = '22';
+  images.style.position = 'absolute';
+  images.style.background = '#000';
+  canvasBoxs.appendChild(images);
+  canvas.style.zIndex = '23';
+  canvasBoxs.appendChild(canvas);
+  starBG = new THREE.CSS3DObject(canvasBoxs);
+  starBG.position.x = 0;
+  starBG.position.y = 0;
+  starBG.position.z = -5000;
+  var scal = (window.innerWidth + 10000) / window.innerWidth / 2;
+  starBG.scale.set(scal, scal, scal);
+  scene.add(starBG);
+  animation();
+}

public/roll-call/js/stats.min.js

@@ -0,0 +1,5 @@
+// stats.js - http://github.com/mrdoob/stats.js
+var Stats=function(){function h(a){c.appendChild(a.dom);return a}function k(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();k(++l%c.children.length)},!1);var g=(performance||Date).now(),e=g,a=0,r=h(new Stats.Panel("FPS","#0ff","#002")),f=h(new Stats.Panel("MS","#0f0","#020"));
+if(self.performance&&self.performance.memory)var t=h(new Stats.Panel("MB","#f08","#201"));k(0);return{REVISION:16,dom:c,addPanel:h,showPanel:k,begin:function(){g=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();f.update(c-g,200);if(c>e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}};
+Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f,
+v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats);

public/roll-call/js/tween.min.js

@@ -0,0 +1,13 @@
+// tween.js - http://github.com/sole/tween.js
+'use strict';var TWEEN=TWEEN||function(){var a=[];return{REVISION:"7",getAll:function(){return a},removeAll:function(){a=[]},add:function(c){a.push(c)},remove:function(c){c=a.indexOf(c);-1!==c&&a.splice(c,1)},update:function(c){if(0===a.length)return!1;for(var b=0,d=a.length,c=void 0!==c?c:Date.now();b<d;)a[b].update(c)?b++:(a.splice(b,1),d--);return!0}}}();
+TWEEN.Tween=function(a){var c={},b={},d=1E3,e=0,f=null,h=TWEEN.Easing.Linear.None,r=TWEEN.Interpolation.Linear,k=[],l=null,m=!1,n=null,p=null;this.to=function(a,c){null!==c&&(d=c);b=a;return this};this.start=function(d){TWEEN.add(this);m=!1;f=void 0!==d?d:Date.now();f+=e;for(var g in b)if(null!==a[g]){if(b[g]instanceof Array){if(0===b[g].length)continue;b[g]=[a[g]].concat(b[g])}c[g]=a[g]}return this};this.stop=function(){TWEEN.remove(this);return this};this.delay=function(a){e=a;return this};this.easing=
+function(a){h=a;return this};this.interpolation=function(a){r=a;return this};this.chain=function(){k=arguments;return this};this.onStart=function(a){l=a;return this};this.onUpdate=function(a){n=a;return this};this.onComplete=function(a){p=a;return this};this.update=function(e){if(e<f)return!0;!1===m&&(null!==l&&l.call(a),m=!0);var g=(e-f)/d,g=1<g?1:g,i=h(g),j;for(j in c){var s=c[j],q=b[j];a[j]=q instanceof Array?r(q,i):s+(q-s)*i}null!==n&&n.call(a,i);if(1==g){null!==p&&p.call(a);g=0;for(i=k.length;g<
+i;g++)k[g].start(e);return!1}return!0}};
+TWEEN.Easing={Linear:{None:function(a){return a}},Quadratic:{In:function(a){return a*a},Out:function(a){return a*(2-a)},InOut:function(a){return 1>(a*=2)?0.5*a*a:-0.5*(--a*(a-2)-1)}},Cubic:{In:function(a){return a*a*a},Out:function(a){return--a*a*a+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*a:0.5*((a-=2)*a*a+2)}},Quartic:{In:function(a){return a*a*a*a},Out:function(a){return 1- --a*a*a*a},InOut:function(a){return 1>(a*=2)?0.5*a*a*a*a:-0.5*((a-=2)*a*a*a-2)}},Quintic:{In:function(a){return a*a*a*
+a*a},Out:function(a){return--a*a*a*a*a+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*a*a*a:0.5*((a-=2)*a*a*a*a+2)}},Sinusoidal:{In:function(a){return 1-Math.cos(a*Math.PI/2)},Out:function(a){return Math.sin(a*Math.PI/2)},InOut:function(a){return 0.5*(1-Math.cos(Math.PI*a))}},Exponential:{In:function(a){return 0===a?0:Math.pow(1024,a-1)},Out:function(a){return 1===a?1:1-Math.pow(2,-10*a)},InOut:function(a){return 0===a?0:1===a?1:1>(a*=2)?0.5*Math.pow(1024,a-1):0.5*(-Math.pow(2,-10*(a-1))+2)}},Circular:{In:function(a){return 1-
+Math.sqrt(1-a*a)},Out:function(a){return Math.sqrt(1- --a*a)},InOut:function(a){return 1>(a*=2)?-0.5*(Math.sqrt(1-a*a)-1):0.5*(Math.sqrt(1-(a-=2)*a)+1)}},Elastic:{In:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return-(b*Math.pow(2,10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4))},Out:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return b*Math.pow(2,-10*a)*Math.sin((a-c)*
+2*Math.PI/0.4)+1},InOut:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return 1>(a*=2)?-0.5*b*Math.pow(2,10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4):0.5*b*Math.pow(2,-10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4)+1}},Back:{In:function(a){return a*a*(2.70158*a-1.70158)},Out:function(a){return--a*a*(2.70158*a+1.70158)+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*(3.5949095*a-2.5949095):0.5*((a-=2)*a*(3.5949095*a+2.5949095)+2)}},Bounce:{In:function(a){return 1-
+TWEEN.Easing.Bounce.Out(1-a)},Out:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+0.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+0.9375:7.5625*(a-=2.625/2.75)*a+0.984375},InOut:function(a){return 0.5>a?0.5*TWEEN.Easing.Bounce.In(2*a):0.5*TWEEN.Easing.Bounce.Out(2*a-1)+0.5}}};
+TWEEN.Interpolation={Linear:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),f=TWEEN.Interpolation.Utils.Linear;return 0>c?f(a[0],a[1],d):1<c?f(a[b],a[b-1],b-d):f(a[e],a[e+1>b?b:e+1],d-e)},Bezier:function(a,c){var b=0,d=a.length-1,e=Math.pow,f=TWEEN.Interpolation.Utils.Bernstein,h;for(h=0;h<=d;h++)b+=e(1-c,d-h)*e(c,h)*a[h]*f(d,h);return b},CatmullRom:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),f=TWEEN.Interpolation.Utils.CatmullRom;return a[0]===a[b]?(0>c&&(e=Math.floor(d=b*(1+c))),f(a[(e-
+1+b)%b],a[e],a[(e+1)%b],a[(e+2)%b],d-e)):0>c?a[0]-(f(a[0],a[0],a[1],a[1],-d)-a[0]):1<c?a[b]-(f(a[b],a[b],a[b-1],a[b-1],d-b)-a[b]):f(a[e?e-1:0],a[e],a[b<e+1?b:e+1],a[b<e+2?b:e+2],d-e)},Utils:{Linear:function(a,c,b){return(c-a)*b+a},Bernstein:function(a,c){var b=TWEEN.Interpolation.Utils.Factorial;return b(a)/b(c)/b(a-c)},Factorial:function(){var a=[1];return function(c){var b=1,d;if(a[c])return a[c];for(d=c;1<d;d--)b*=d;return a[c]=b}}(),CatmullRom:function(a,c,b,d,e){var a=0.5*(b-a),d=0.5*(d-c),f=
+e*e;return(2*c-2*b+a+d)*e*f+(-3*c+3*b-2*a-d)*f+a*e+c}}};