Vue+3D云字符

问题：PO说系统首页加个3D云字符，我寻思这也没搞过呀；于是就去大哥的博客学习了一下。当然我也是进行了一扭扭的优化，总结的也很简单粗暴，翠花上代码：

html:


        
             
     
     3D字符云     
    
     
              
     
                          
       
        {
  {tag.text}}                          //这里的style="fill:#e78c9e;"是改变文字颜色的哦

data:

//3D字符云      width:321*(window.innerWidth / 1440),      height:250*(window.innerWidth / 1440),      tagsNum:10,      RADIUS:170,      speedX:Math.PI/360,      speedY:Math.PI/360,      tagList: [],

computed:

computed:{    CX(){        return this.width/2;    },    CY(){        return this.height/2;    }  },

mounted:

//球转起来了const timer = setInterval(() =>{                          this.rotateX(this.speedX);      this.rotateY(this.speedY);      this.rotateX1(this.speedX);      this.rotateY1(this.speedY);      }, 100);

methods:

//3D字符云    rotateX(angleX){        var cos = Math.cos(angleX);        var sin = Math.sin(angleX);        for(let tag of this.tagList){            var y1 = (tag.y- this.CY) * cos - tag.z * sin  + this.CY;            var z1 = tag.z * cos + (tag.y- this.CY) * sin;            tag.y = y1;            tag.z = z1;        }     },    rotateY(angleY){      var cos = Math.cos(angleY);      var sin = Math.sin(angleY);      for(let tag of this.tagList){        var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;        var z1 = tag.z * cos + (tag.x-this.CX) * sin;        tag.x = x1;        tag.z = z1;      }     },//这个方法在html代码被调用了，你康康    listener(event){//响应鼠标移动        var x = event.clientX - this.CX;        var y = event.clientY - this.CY;        this.speedX = x*0.0001>0 ? Math.min(this.RADIUS*0.00002, x*0.0001) : Math.max(-                     this.RADIUS*0.00002, x*0.0001);        this.speedY = y*0.0001>0 ? Math.min(this.RADIUS*0.00002, y*0.0001) : Math.max(-              this.RADIUS*0.00002, y*0.0001);     },//这是个方法    getGood() {      const _this = this      axios.get('/ceshi',{params: {code: 1}})        .then(function(response) {          if(response.data.data.length>=10){            _this.tagList = response.data.data.slice(0,10)          }else{            _this.tagList = response.data.data          }          let tags=[];          for(let i = 0; i < _this.tagList.length; i++){              let tag = {};              let k = -1 + (2 * (i + 1) - 1) / _this.tagsNum;              let a = Math.acos(k);              let b = a * Math.sqrt(_this.tagsNum * Math.PI);              tag.text = _this.tagList[i].appraisa_text;              tag.x = _this.CX +  _this.RADIUS * Math.sin(a) * Math.cos(b);              tag.y = _this.CY +  _this.RADIUS * Math.sin(a) * Math.sin(b);               tag.z = _this.RADIUS * Math.cos(a);              //tag.href = 'https://imgss.github.io';              tags.push(tag);          }          _this.tagList = tags;          if (_this.tagList.length === 0) {            _this.dataTip1 = '暂无数据'          } else {            _this.dataTip1 = ''          }        })    },

视频在此，由于是测试数据，暂时不太好看；当数据丰富的时候超好；