liushengqiang
/
classroom-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
							<!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'):'']">
        <div id="table" :class="tableIndex <= 1 ? 'disabled' : ''" v-show="!animationStatus"
          @click.stop="start()"></div>
        <div id="sphere" v-show="animationStatus" @click.stop="closes()"></div>
        <div v-if="platform==='modal'" id="backBtn" @click.stop="onBack()"></div>
      </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>