vue实现3D词云

1：定义数组存放展示的文字 

 

 

 2：页面

补充：调节旋转方向<div class="wordCloud__home">

      <el-button type="danger" @click="handleSpeed('slow')">降低速度</el-button>

      <el-button type="primary" @click="handleRotate('-1')">横向顺时针</el-button>

      <el-button type="primary" @click="handleRotate('1')">横向逆时针</el-button>

      <el-button type="primary" @click="handleRotate('-2')">纵向顺时针</el-button>

      <el-button type="primary" @click="handleRotate('2')">纵向逆时针</el-button>

      <el-button type="danger" @click="handleSpeed('fast')">增加速度</el-button>

    </div>

 

 

 3:

 

 4：

 

 5：   rotateY () {

 

      const angleY = ['-2', '2'].includes(this.direction)

        ? Math.PI / Infinity

        : Math.PI / (Number(this.direction) * Number(this.speed))

      const cos = Math.cos(angleY)

      const sin = Math.sin(angleY)

      this.contentEle = this.contentEle.map(t => {

        const x1 = t.x * cos - t.z * sin

        const z1 = t.z * cos + t.x * sin

        return {

          ...t,

          x: x1,

          z: z1

        }

      })

    },

    move () {

      const CX = this.width / 2

      const CY = this.height / 2

      this.contentEle = this.contentEle.map(singleEle => {

        const { x, y, z } = singleEle

        const fallLength = 500

        const RADIUS = (this.width - 50) / 2

        const scale = fallLength / (fallLength - z)

        const alpha = (z + RADIUS) / (2 * RADIUS)

        const left = `${x + CX - 15}px`

        const top = `${y + CY - 15}px`

        const transform = `translate(${left}, ${top}) scale(${scale})`

        const style = {

          ...singleEle.style,

          opacity: alpha + 0.5,

          zIndex: parseInt(scale * 100, 10),

          transform

        }

        return {

          x,

          y,

          z,

          style

        }

      })

    },

    handleRotate (value) {

      this.direction = value

    },

    handleSpeed (value) {

      const speedObj = {

        fast: -50,

        slow: 50

      }

      this.speed += speedObj[value]

      if (this.speed === 0) {

        this.speed = 50

      }

    }

 6：css

 .tagBall {

  margin: 50px auto;

  position: relative;

  background: url('./image1.png');

  background-position: center;

  background-repeat: no-repeat;

  background-size: contain;

}

.wordCloud__tag {

  display: block;

  position: absolute;

  left: 0px;

  top: 0px;

  color: green;

  text-decoration: none;

  font-size: 14px;

  font-family: '微软雅黑';

  font-weight: bold;

}

.wordCloud__home {

  display: flex;

  justify-content: center;

}

 

contentEle