添加

public/roll-call/css/index.css

@@ -7,6 +7,7 @@ body {
   margin: 0;
   box-sizing: border-box;
 }
+
 body {
   background-color: #000000;
   margin: 0;
@@ -60,7 +61,7 @@ a {
 
 #menu {
   position: absolute;
-  bottom: 50px;
+  bottom: 20px;
   width: 100%;
   text-align: center;
 }
@@ -78,16 +79,20 @@ a {
   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 {
+  position: absolute;
+  top: 20px;
+  left: 27px;
+  right: 0px;
+  /* font-size: 60px;
+        font-weight: bold;
+        color: rgba(255,255,255,0.75);  */
+  /* text-shadow: 0 0 10px rgba(0,255,255,0.95); */
   display: block;
   width: 98px;
   height: 98px;
@@ -96,20 +101,29 @@ a {
   border: 3px solid #4daaff;
 }
 .element .symbolBox img {
-  width: 100%;
   height: 100%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .element .details {
+  position: absolute;
+  bottom: 12px;
+  right: 0px;
   padding-top: 15px;
   font-size: 22px;
+  display: block;
   color: #374693;
   font-weight: 500;
   max-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  left: 50%;
+  margin-left: -50px;
 }
+
 #table {
   width: 171px;
   height: 69px;
@@ -190,7 +204,7 @@ a {
   position: absolute;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.9);
+  background: rgba(0, 0, 0, 0.8);
 }
 .closeBtn {
   position: absolute;

public/roll-call/index.html

@@ -43,7 +43,7 @@
 
 </html>
 <script>
-  var table = getData();
+  var table = getData()
   var tableLens = table.length;
   var camera, scene, renderer;
   var controls;
@@ -71,7 +71,7 @@
       var symbol = document.createElement('img');
       symbolBox.className = 'symbolBox';
       symbol.className = 'symbol';
-      symbol.src = table[i].img;
+      symbol.src = table[i].img + '?imageMogr2/strip/format/png/size-limit/50k!';
       symbolBox.appendChild(symbol);
       element.appendChild(symbolBox);
       // 姓名
@@ -91,26 +91,34 @@
       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;
+      switch (table.length) {
+        case 1:
+          object.position.x = 0;
+          break;
+        case 2:
+          object.position.x = (ix * 172) - (172 * 1 / 2);
+          break;
+        case 3:
+          object.position.x = (ix * 172) - (172 * 2 / 2);
+          break;
+        case 4:
+          object.position.x = (ix * 172) - (172 * 3 / 2);
+          break;
+        case 5:
+          object.position.x = (ix * 172) - (172 * 4 / 2);
+          break;
+        case 6:
+          object.position.x = (ix * 172) - (172 * 5 / 2);
+          break;
+        case 7:
+          object.position.x = (ix * 172) - (172 * 6 / 2);
+          break;
+        default:
+          var iy = Math.floor((i) / 8);
+          object.position.x = (ix * 172) - 600;
+          object.position.y = - (iy * 192) + 300;
+          break;
       }
-
       targets.table.push(object);
     }
 
@@ -125,7 +133,7 @@
     symbol.setAttribute("id", "changeImg");
     symbolBox.className = 'symbolBox2';
     symbol.className = 'symbol2';
-    symbol.src = table[0].img;
+    symbol.src = table[0].img + '?imageMogr2/strip/format/png/size-limit/50k!';
     symbolBox.appendChild(symbol);
     elements.appendChild(symbolBox);
 
@@ -185,7 +193,7 @@
     controls.maxDistance = 6000;
     controls.addEventListener('change', render);
     // 初始化
-    transform(targets.table, 500);
+    transform(targets.table, 800);
     window.addEventListener('resize', onWindowResize, false);
     cpx = camera.position.x;
     cpy = camera.position.y;
@@ -222,8 +230,10 @@
 
     // console.log(document.querySelectorAll('.element'), '1212')
     setTimeout(() => {
+      console.log(moving, type)
       if (moving || type === 2) {
         const elements = document.querySelectorAll('.element')
+        console.log(elements, 'eee')
         if (elements.length > 0) {
           elements.forEach((e, index) => {
             if (type === 2) {
@@ -285,7 +295,7 @@
     if (numsss == tableLens) {
       numsss = tableLens - 1;
     }
-    srcss = table[numsss].img;
+    srcss = table[numsss].img + '?imageMogr2/strip/format/png/size-limit/50k!';
     txtsss = table[numsss].name;
     changeImg.src = srcss;
     detailss.innerHTML = txtsss;
@@ -318,10 +328,32 @@
     vm.tableIndex = tableLens
     init();
     animate();
+  }
 
-    console.log(vm.tableIndex, 'renderData')
+  function preloadImages(imageUrls, callback) {
+    let images = {};
+    let loadedImages = 0;
+    let numImages = imageUrls.length;
+
+    // 创建一个Image对象，并设置src属性来开始加载图片
+    imageUrls.forEach((url) => {
+      images[url] = new Image();
+      images[url].onload = function () {
+        // 当图片加载完成时，更新计数器
+        loadedImages++;
+        if (loadedImages === numImages && callback) {
+          callback(images); // 所有图片都加载完毕，调用回调函数
+        }
+      };
+      images[url].onerror = function () {
+        console.error('Could not load image at ' + url);
+        loadedImages++;
+      };
+      images[url].src = url;
+    });
   }
 
+
   //点击事件及部分判断
   var vm = new Vue({
     el: '#vueBoxs',
@@ -376,8 +408,6 @@
         objectsss.scale.set(1, 1, 1);
         // 星空背景图重置
         transform(targets.table, 400, 2);
-        // music.pause();
-        // this.ckPrice();
       },
       onBack() {
         // 返回时先结束
@@ -393,6 +423,20 @@
       // init();
       // animate();
 
+      // const imageUrls = table.map(value => value.img + '?imageMogr2/strip/format/png/size-limit/50k!')
+      // console.log(imageUrls.length, 'length')
+      // console.log(imageUrls, 'imageUrls')
+      // preloadImages(imageUrls, function (images) {
+      //   // console.log('All images loaded.');
+      //   //   // 这里可以访问images对象，它是一个包含预加载图片的对象，
+      //   //   // 其中键是图片的URL，值是Image对象。
+      //   init();
+      //   animate();
+      //   setTimeout(() => {
+      //     animate();
+      //   }, 100);
+      // });
+
       // getStar();
       // this.ckPrice();
     }