3D词云球体旋转

<template>
  <div
    class="tagBall"
    ref="tagBall"
    @mouseover.self.stop="mouseOver"
    @mouseleave.self.stop="mouseLeave"
  >
    <div v-for="(item, index) in list" :key="index" class="tag">{{ item.name }}<span>({{ item.value }})</span></div>
  </div>
</template>

<script setup>
import {reactive,ref,onMounted } from 'vue'
const list=reactive([{
            "name": "3",
            // 'symbol':'image://data:image/png;base64,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',
            "value": 10,
        }, {
            "name": "2",
            "value": 61,
        }, {
            "name": "6",
            "value": 43,
        }, {
            "name": "3",
            "value": 45,
        }, {
            "name": "6",
            "value": 24,
        }, {
            "name": "12",
            "value": 22,
        }, {
            "name": "43",
            "value": 18,
        }, {
            "name": "23",
            "value": 14,
        }, {
            "name": "432",
            "value": 11,
        }, {
            "name": "423",
            "value": 9,
        }, {
            "name": "42",
            "value": 9,
        },  {
            "name": "2",
            "value": 61,
        }, {
            "name": "6",
            "value": 43,
        }, {
            "name": "3",
            "value": 45,
        }, {
            "name": "6",
            "value": 24,
        }, {
            "name": "12",
            "value": 22,
        }, {
            "name": "43",
            "value": 18,
        }, {
            "name": "23",
            "value": 14,
        }, {
            "name": "432",
            "value": 11,
        }, {
            "name": "423",
            "value": 9,
        }, {
            "name": "42",
            "value": 9,
        }, 
        
         ])
const tagEle=ref("") 
const paper=ref("") 
const RADIUS=ref(105)//大小
const fallLength=ref(500)
const tags=ref([])
const angleX=ref(Math.PI / 500)
const angleY=ref(Math.PI / 500)
const CX=ref("")
const CY=ref("")
const EX=ref("")
const EY=ref("")
const timing=ref(null)
const tagBall=ref()
onMounted(() => {
    tagEle.value = tagBall.value.children;
    paper.value = tagBall.value;
    CX.value = paper.value.offsetWidth / 2;
    CY.value = paper.value.offsetHeight / 2;
    EX.value =
      paper.value.offsetLeft +
      document.body.scrollLeft +
      document.documentElement.scrollLeft;
    EY.value =
      paper.value.offsetTop +
      document.body.scrollTop +
      document.documentElement.scrollTop;
    innit();
    animate();
 
});
   const innit=()=> {
      for (var i = 0; i < tagEle.value.length; i++) {
        var a, b;
        var k = (2 * (i + 1) - 1) / tagEle.value.length - 1;
        var a = Math.acos(k);
        var b = a * Math.sqrt(tagEle.value.length * Math.PI);
        var x = RADIUS.value * Math.sin(a) * Math.cos(b);
        var y = RADIUS.value * Math.sin(a) * Math.sin(b);
        var z = RADIUS.value * Math.cos(a);
        
        tagEle.value[i].style.color =
          "rgb(" +
          parseInt(Math.random() * 255) +
          "," +
          parseInt(Math.random() * 255) +
          "," +
          parseInt(Math.random() * 255) +
          ")";
        tags.value.push({ ele: tagEle.value[i], x, y, z });
      }
    };
    const tag=({ ele, x, y, z })=>{
      var scale = fallLength.value / (fallLength.value- z);
      var alpha = (z + RADIUS.value) / (2 * RADIUS.value);
      ele.style.fontSize = 15 * scale + "px";
      ele.style.opacity = alpha + 0.5;
      ele.style.filter = "alpha(opacity = " + (alpha + 0.5) * 100 + ")";
      ele.style.zIndex = parseInt(scale * 100);
      ele.style.left = x + CX.value - ele.offsetWidth / 2 + "px";
      ele.style.top = y + CY.value - ele.offsetHeight / 2 + "px";
    }
   const animate=()=>{
    timing.value= setInterval(() => {
        rotateX();
        rotateY();
       tags.value.forEach((item) => {
          tag(item);
        });
      }, 20);
    }
    const rotateX=()=>{
      var cos = Math.cos(angleX.value);
      var sin = Math.sin(angleX.value);
      tags.value.forEach((item) => {
        var y1 = item.y * cos - item.z * sin;
        var z1 = item.z * cos + item.y * sin;
        item.y = y1;
        item.z = z1;
      });
    }
      const rotateY=()=>{
      var cos = Math.cos(angleY.value);
      var sin = Math.sin(angleY.value);
      tags.value.forEach((item) => {
        var x1 = item.x * cos - item.z * sin;
        var z1 = item.z * cos + item.x * sin;
        item.x = x1;
        item.z = z1;
      });
    }
    const mouseOver=(event)=>{
      var x = event.clientX - EX.value - CX.value;
      var y = event.clientY - EY.value - CY.value;
      // console.log(x, y);
      angleY.value = x * 0.000001;
      angleX.value = y * 0.000001;
      if (!timing.value) animate();
    }
    const mouseLeave=(event)=>{
      var x = event.clientX - EX.value - CX.value;
      var y = event.clientY - EY.value - CY.value;
      angleY.value = x * 0.00001;
      angleX.value = y * 0.00001;
    }
    const cheMouseOver=()=>{
      clearInterval(timing.value);
      timing.value = null;
    }
</script>
<style lang='scss' scoped>
.tagBall {
  width: 100%;
  height: 90%;
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}
.tag {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  color: #000;
  text-decoration: none;
  font-size: 15px;
  font-family: "微软雅黑";
  font-weight: bold;
  span{
    font-size: 12px;
  }
}
 
</style>