lex
/
classroom-instruments


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
							<!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">
    <!-- @keypress.space="keyDowns()" -->
    <div class="bss">
      <div id="menu">
        <button id="table" @click="start()">开始</button>
        <button id="sphere" @click="closes()">结束</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 / 2;
  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 music = document.getElementById('music');
  // var music2 = document.getElementById('music2');
  var cpx = 0, cpy = 0, cpz = 0, crx = 0, cry = 0, crz = 0;

  function init() {
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 2000;
    scene = new THREE.Scene();
    // table
    for (var i = 0; i < table.length; i += 2) {
      // 每个图标的盒子
      var element = document.createElement('div');
      element.className = 'element';
      element.style.backgroundColor = 'rgba(255,255,255)';
      element.style.borderRadius = '12px'
      // 索引
      // var number = document.createElement('div');
      // number.className = 'number';
      // number.textContent = (i / 2) + 1;
      // element.appendChild(number);
      // 图片
      var symbolBox = document.createElement('div');
      var symbol = document.createElement('img');
      symbolBox.className = 'symbolBox';
      symbol.className = 'symbol';
      symbol.src = table[i];
      symbolBox.appendChild(symbol);
      element.appendChild(symbolBox);
      // 姓名
      var details = document.createElement('div');
      details.className = 'details';
      details.innerHTML = table[i + 1];
      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 + 1];
      scene.add(object);
      objects.push(object);
      // 根据索引，定制位置
      var object = new THREE.Object3D();
      var iy = Math.floor((i / 2) / 8);
      var ix = (i / 2) % 8;
      object.position.x = (ix * 120) - 540;
      object.position.y = - (iy * 155) + 480;
      targets.table.push(object);
    }

    // 创建切换图片
    var elements = document.createElement('div');
    elements.className = 'changeImgBoxs';
    // element.style.backgroundImage = "url(./img/pic.png)";
    elements.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';

    var symbolBox = document.createElement('div');
    var symbol = document.createElement('img');
    symbol.setAttribute("id", "changeImg");
    symbolBox.className = 'symbolBox2';
    symbol.className = 'symbol2';
    symbol.src = table[0];
    symbolBox.appendChild(symbol);
    elements.appendChild(symbolBox);

    var details = document.createElement('div');
    details.setAttribute("id", "detailss");
    details.className = 'details';
    details.innerHTML = table[1];
    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, 1000);
    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();
  }
  // 屏幕大小适配
  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;

    // if (starBG.position.x + cpx * 5 / 2 > 1 || (starBG.position.x + cpx * 5 / 2 < -1)) {
    //   starBG.position.x = -cpx * 5 / 2;
    //   starBG.position.z = -cpz * 5 / 2;
    //   starBG.position.y = -cpy * 5 / 2;
    //   starBG.rotation.x = crx;
    //   starBG.rotation.z = crz;
    //   starBG.rotation.y = cry;
    // }
  }
  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 * 2];
    txtsss = table[numsss * 2 + 1];
    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();
  }
  //点击事件及部分判断
  var vm = new Vue({
    el: '#vueBoxs',
    data: {
      listShow: false,
      spic: {
        img: '',
        name: ''
      },
      price1: [],//一等奖        // {name:'白富友3',img:'./img/pic.jpg'}
      price2: [],//二等奖
      price3: [],//三等奖
      lens: [3, 4, 5],   //奖励名额
      priceNow: '三等奖'
    },
    methods: {
      keyDowns: function () {
        this.closes();
      },
      //判断奖品登记
      ckPrice: function () {
        var res = '三等奖';
        var len1 = this.price1.length;
        var len2 = this.price2.length;
        var len3 = this.price3.length;
        var lens = this.lens;
        if (lens[2] <= len3) {
          if (lens[1] <= len2) {
            if (lens[0] <= len1) {
              if (this.spic.img != '') {
                res = '特等奖';
              } else {
                res = '特等奖';
              }
            } else {
              res = '一等奖';
            }
          } else {
            res = '二等奖';
          }
        }
        this.priceNow = res;
      },
      //开始
      start: function () {
        if (vm.spic.img != '') {
          alert("抽完咯~~~完咯~~~咯~~~,在中奖名单中清空，再来一次？");
          return;
        }
        moving = 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.choosePerson();
        transform(targets.chaos, 250, 1);
        objDeal(objectsss, 1.8);
      },
      //回到照片墙的状态
      resets: function () {
        moving = false;
        camera.position.z = 2000;
        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);
        // music.pause();
        this.ckPrice();
      },
      // 判断是否已经得过奖
      ckIsIn: function (img) {
        var res = true;
        var cps = '';
        this.price3.map(function (v, i) {
          if (v.img == img) {
            res = false;
          }
        });
        this.price2.map(function (v, i) {
          if (v.img == img) {
            res = false;
          }
        });
        this.price1.map(function (v, i) {
          if (v.img == img) {
            res = false;
          }
        });
        if (this.spic.img == img) {
          res = false;
        }
        return res;
      },
      // 储存得奖名单
      choosePerson: function () {
        var img = document.getElementById('changeImg').src;
        var txt = document.getElementById("detailss").innerHTML;

        var img2 = document.getElementById('changeImg');
        var txt2 = document.getElementById("detailss");

        // var isFalse = this.ckIsIn(img);
        // if (!isFalse) {
        //   //重复了···再随机一次
        //   var nums = Math.floor(Math.random() * tableLens);
        //   if (nums == tableLens) {
        //     nums = tableLens - 1;
        //   }
        //   var src = table[nums * 2];
        //   var txts = table[nums * 2 + 1];

        //   img2.src = src;
        //   txt2.innerHTML = txts;
        //   this.choosePerson();
        //   return;
        // }
        var obj = {
          img: img,
          name: txt
        };
        var len3 = this.price3.length;
        var len2 = this.price2.length;
        var len1 = this.price1.length;
        if (len3 < this.lens[2]) {
          this.price3.push(obj);
        } else {
          if (len2 < this.lens[1]) {
            this.price2.push(obj);
          } else {
            if (len1 < this.lens[0]) {
              this.price1.push(obj);
            } else {
              if (this.spic.img == '') {
                this.spic = obj;
              } else {
                alert("抽完咯，完咯~~咯~~~");
              }
            }
          }
        }
        var json = JSON.stringify([this.price1, this.price2, this.price3, this.spic]);
        localStorage.setItem('pricesListm', json);
      },

    },
    created: function () {
      var json = localStorage.getItem('pricesListm');
      if (json) {
        var attrs = JSON.parse(json);
        this.price1 = attrs[0];
        this.price2 = attrs[1];
        this.price3 = attrs[2];
        this.spic = attrs[3];
      }
      init();
      // getStar();
      animate();

      this.ckPrice();
    }
  })
</script>