用Three.js实现3D圆环图的思路及实例代码

<template>
  <div class="three-container" ref="container">
    <div id="three-tooltip" class="three-tooltip" :style="tooltipStyle" v-show="tooltipVisible" v-html="tooltipContent"></div>
  </div>
</template>
<script>
import * as THREE from 'three'
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { formatterAmount, floatAdd, floatSub, floatDiv, floatMul } from '@/utils/NumberFormat'
const chartColors = [
  'rgba(240, 134, 63, 0.8)',
  'rgba(55, 162, 179, 0.8)',
  'rgba(31, 91, 170, 0.8)',
  'rgba(140, 205, 241, 0.8)',
  'rgba(246, 192, 84, 0.8)',
  'rgba(255, 169, 206, 0.8)',
  'rgba(162, 133, 210, 0.8)',
  'rgba(235, 126, 101, 0.8)'
]
export default {
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    showType: {
      type: String, // 'amount' or 'rate' 用于控制标签显示格式
      default: 'amount'
    }
  },
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      labelRenderer: null,
      controls: null,
      meshGroup: null,
      raycaster: new THREE.Raycaster(),
      mouse: new THREE.Vector2(),
      hoveredIndex: -1,
      tooltipVisible: false,
      tooltipContent: '',
      tooltipStyle: {
        left: '0px',
        top: '0px'
      }
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (val && val.length) {
          this.$nextTick(() => {
            this.rebuildChart()
          })
        }
      },
      deep: true
    },
    showType() {
      // 类型切换时更新标签，不需要完全重建几何体，但为了简单起见，这里重建标签或整体
      this.rebuildChart()
    }
  },
  mounted() {
    this.initThree()
    this.rebuildChart()
    window.addEventListener('resize', this.onWindowResize)
    this.$refs.container.addEventListener('mousemove', this.onMouseMove)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onWindowResize)
    this.$refs.container.removeEventListener('mousemove', this.onMouseMove)
    this.cleanUp()
  },
  methods: {
    cleanUp() {
      if (this.renderer) {
        this.renderer.dispose()
      }
      if (this.scene) {
        this.scene.traverse((object) => {
          if (object.geometry) object.geometry.dispose()
          if (object.material) {
            if (Array.isArray(object.material)) {
              object.material.forEach(m => m.dispose())
            } else {
              object.material.dispose()
            }
          }
        })
      }
    },
    initThree() {
      const container = this.$refs.container
      const width = container.clientWidth
      const height = container.clientHeight
      // Scene
      this.scene = new THREE.Scene()
      this.scene.background = null // 透明背景
      // Camera
      this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000)
      this.camera.position.set(0, 30, 40) // 调整相机位置以获得良好的俯视 3D 视角
      this.camera.lookAt(0, 0, 0)
      // Lights - 柔和光照
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.6) // 降低环境光，避免过曝
      this.scene.add(ambientLight)
      const mainLight = new THREE.DirectionalLight(0xffffff, 0.8)
      mainLight.position.set(10, 20, 20)
      this.scene.add(mainLight)
      
      const fillLight = new THREE.DirectionalLight(0xffffff, 0.5)
      fillLight.position.set(-20, 10, -10)
      this.scene.add(fillLight)
      
      const topLight = new THREE.DirectionalLight(0xffffff, 0.3)
      topLight.position.set(0, 50, 0)
      this.scene.add(topLight)
      // WebGL Renderer
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      this.renderer.setSize(width, height)
      this.renderer.setPixelRatio(window.devicePixelRatio)
      container.appendChild(this.renderer.domElement)
      // CSS2D Renderer (Labels)
      this.labelRenderer = new CSS2DRenderer()
      this.labelRenderer.setSize(width, height)
      this.labelRenderer.domElement.style.position = 'absolute'
      this.labelRenderer.domElement.style.top = '0px'
      this.labelRenderer.domElement.style.pointerEvents = 'none' // 允许鼠标穿透到下方 Canvas
      container.appendChild(this.labelRenderer.domElement)
      this.meshGroup = new THREE.Group()
      this.scene.add(this.meshGroup)
      // OrbitControls 用于交互
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.enableDamping = true // 阻尼感
      this.controls.dampingFactor = 0.05
      this.controls.enableZoom = false // 禁用缩放，避免穿模或太远
      this.controls.autoRotate = false // 不自动旋转，由用户控制
      this.controls.minPolarAngle = 0 // 限制垂直旋转角度，避免看穿底部
      this.controls.maxPolarAngle = Math.PI / 2 // 限制只能从上方看
      this.animate()
    },
    rebuildChart() {
      if (!this.meshGroup) return
      
      // 清空旧物体
      while(this.meshGroup.children.length > 0){ 
        const child = this.meshGroup.children[0]
        this.meshGroup.remove(child)
        if (child.geometry) child.geometry.dispose()
        if (child.material) child.material.dispose()
      }
      if (!this.chartData || this.chartData.length === 0) return
      const total = this.chartData.reduce((acc, item) => floatAdd(acc, item.amount), 0)
      let startAngle = 0
      let accumulatedPercent = 0
      
      const CONFIG = {
        innerRadius: 8,
        outerRadius: 15,
        baseHeight: 2,
        heightScale: 6 // 高度差异倍数
      }
      // 找到最大值用于归一化高度
      const maxAmount = Math.max(...this.chartData.map(d => d.amount))
      this.chartData.forEach((item, index) => {
        const isLast = index === this.chartData.length - 1
        let percentVal
        
        if (isLast) {
          // 最后一个扇形：100 - 前面的总和
          // floatSub 返回的是字符串，需要转为数字
          percentVal = Number(floatSub(100, accumulatedPercent))
          // 防止浮点数误差出现负数极小值
          if (percentVal < 0) percentVal = 0
        } else {
          // 计算占比：(amount / total) * 100
          // 保留2位小数，避免精度问题导致 gap
          const ratio = floatDiv(item.amount, total)
          const p = floatMul(ratio, 100)
          percentVal = Number(p.toFixed(2))
          accumulatedPercent = floatAdd(accumulatedPercent, percentVal)
        }
        // 根据占比计算角度 ( percentVal / 100 * 2PI )
        const angleLength = (percentVal / 100) * Math.PI * 2
        
        // 最后一个扇形强制闭合到 2PI
        const endAngle = isLast ? Math.PI * 2 : startAngle + angleLength
        // 1. 创建 Shape
        const shape = new THREE.Shape()
        
        // 绘制圆环截面
        shape.absarc(0, 0, CONFIG.outerRadius, startAngle, endAngle, false)
        shape.absarc(0, 0, CONFIG.innerRadius, endAngle, startAngle, true) // 内圆反向
        // 自动闭合 shape.closePath() 被 ExtrudeGeometry 处理
        // 2. 计算挤压设置
        const itemRatio = item.amount / maxAmount
        const extrusionDepth = CONFIG.baseHeight + (itemRatio * CONFIG.heightScale)
        const extrudeSettings = {
          steps: 1,
          depth: extrusionDepth,
          bevelEnabled: false, // 禁用倒角，解决扇区交界处的重叠问题
          bevelThickness: 0.2, // 减小倒角使其看起来更锐利，像ECharts
          bevelSize: 0.2,
          bevelSegments: 2,
          curveSegments: 32 // 平滑度
        }
        const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
        geometry.computeBoundingBox()
        
        // 使用 PhysicalMaterial 增加质感
        // 移除反光，回归 ECharts 风格的哑光质感
        const material = new THREE.MeshPhongMaterial({
          color: chartColors[index % chartColors.length],
          shininess: 5, // 极低光泽度
          specular: 0x222222, // 弱高光
          flatShading: false, // 平滑着色
          transparent: true,
          opacity: 0.8,
          side: THREE.DoubleSide
        })
        const mesh = new THREE.Mesh(geometry, material)
        
        // 旋转 Mesh 使其平躺，高度方向变为 Y 轴 (原 Extrude 方向为 Z)
        mesh.rotation.x = -Math.PI / 2
        // 调整位置，使其底面位于 Y=0 (原 Z=0 变为 Y=0)
        // 此时扇形中心在 (0,0,0)
        
        mesh.userData = { 
          name: item.name, 
          value: item.amount,
          ratio: percentVal.toFixed(2) + '%',
          originalColor: material.color.getHex(),
          index: index
        }
        this.meshGroup.add(mesh)
        // 4. 添加标签
        this.addLabel(startAngle, endAngle, CONFIG.outerRadius, extrusionDepth, item, percentVal.toFixed(2) + '%')
        startAngle = endAngle
      })
      
      // 整体居中一点
      this.meshGroup.position.set(0, -5, 0)
    },
    addLabel(startAngle, endAngle, radius, height, item, ratioText) {
      // 计算角度中点
      const midAngle = startAngle + (endAngle - startAngle) / 2
      
      // 计算标签在 XZ 平面上的位置 ( Mesh 旋转前是 XY，旋转后对应 XZ )
      // 因为我们把 Mesh 绕 X 旋转了 -90度，所以原 Mesh 的 (x, y, z) -> 新的 (x, z, -y)
      // Extrude 的 Z 变成了 场景的 Y
      
      // 标签半径稍微大一点
      const labelRadius = radius + 4
      
      const x = Math.cos(midAngle) * labelRadius
      const z = Math.sin(midAngle) * labelRadius // 对应原系的 y
      const y = height + 2 // 标签高度浮在柱体上方
      // 创建 DOM
      const div = document.createElement('div')
      div.className = 'chart-label'
      
      const valueText = this.showType === 'amount' ? formatterAmount(item.amount) : ratioText
      
      // 字体颜色仿照 FundSourceCard (资金来源分布图)
      // name: rgba(44, 53, 65, 1)
      // value: rgba(2, 2, 2, 1)
      div.innerHTML = `<span class="label-name" style="color: rgba(44, 53, 65, 1)">${item.name}</span>
<span class="label-value" style="color: rgba(2, 2, 2, 1)">${valueText}</span>`
      
      div.style.textAlign = 'center'
      div.style.fontSize = '12px'
      div.style.fontFamily = 'Microsoft YaHei'
      // 增加描边效果 (halo) 以防止背景干扰
      div.style.textShadow = '1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff'
      const label = new CSS2DObject(div)
      label.position.set(
         Math.cos(midAngle) * labelRadius,
         height * 0.8, // 稍微低一点，不要浮太高
         -Math.sin(midAngle) * labelRadius
      )
      
      this.meshGroup.add(label)
      
      // 绘制引导线 (Line)
      // 从柱体中心点连到标签点
      const points = []
      // 起点：柱体顶部边缘
      const startP = new THREE.Vector3(
        Math.cos(midAngle) * radius,
        height,
        -Math.sin(midAngle) * radius
      )
      // 终点：标签位置
      const endP = label.position.clone()
      
      points.push(startP)
      points.push(endP)
      
      const lineGeo = new THREE.BufferGeometry().setFromPoints(points)
      const lineMat = new THREE.LineBasicMaterial({ color: 0x999999, transparent: true, opacity: 0.5 })
      const line = new THREE.Line(lineGeo, lineMat)
      this.meshGroup.add(line)
    },
    totalAmount() {
      return this.chartData.reduce((t, i) => t + i.amount, 0)
    },
    onWindowResize() {
      if (!this.$refs.container) return
      const width = this.$refs.container.clientWidth
      const height = this.$refs.container.clientHeight
      this.camera.aspect = width / height
      this.camera.updateProjectionMatrix()
      this.renderer.setSize(width, height)
      this.labelRenderer.setSize(width, height)
    },
    onMouseMove(event) {
      event.preventDefault()
      const rect = this.$refs.container.getBoundingClientRect()
      this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
      this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
      // 更新 Tooltip 位置
      this.tooltipStyle = {
        left: (event.clientX - rect.left + 15) + 'px',
        top: (event.clientY - rect.top + 15) + 'px'
      }
    },
    animate() {
      requestAnimationFrame(this.animate)
      if (this.controls) this.controls.update()
      // Raycaster
      this.raycaster.setFromCamera(this.mouse, this.camera)
      
      // 只检测 Mesh，排除 Line 和 CSS2DObject
      const intersects = this.raycaster.intersectObjects(
        this.meshGroup.children.filter(obj => obj.type === 'Mesh')
      )
      if (intersects.length > 0) {
        const object = intersects[0].object
        if (this.hoveredIndex !== object.userData.index) {
          // 恢复上一个
          if (this.hoveredIndex !== -1) {
             this.resetHighlight()
          }
          
          this.hoveredIndex = object.userData.index
          // 高亮当前
          object.material.emissive.setHex(0x333333)
          object.material.opacity = 0.8
          
          // 显示 Tooltip
          this.tooltipVisible = true
          const d = object.userData
          this.tooltipContent = `<div class="tooltip-title">${d.name}</div><div class="tooltip-item"><span class="marker" style="background:${this.getHexColor(object.material.color)}"></span><span class="label">金额:</span><span class="value">${formatterAmount(d.value)}元</span></div><div class="tooltip-item"><span class="marker" style="background:${this.getHexColor(object.material.color)}"></span><span class="label">占比:</span><span class="value">${d.ratio}</span></div>`
        }
      } else {
        if (this.hoveredIndex !== -1) {
          this.resetHighlight()
          this.hoveredIndex = -1
          this.tooltipVisible = false
        }
      }
      this.renderer.render(this.scene, this.camera)
      this.labelRenderer.render(this.scene, this.camera)
    },
    resetHighlight() {
      this.meshGroup.children.forEach(child => {
        if (child.type === 'Mesh') {
          // 重置时恢复原始透明度
          child.material.emissive.setHex(0x000000)
          child.material.opacity = 0.8
        }
      })
    },
    getHexColor(color) {
      return '#' + color.getHexString()
    }
  }
}
</script>
<style lang="less" scoped>
.three-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.three-tooltip {
  position: absolute;
  background-color: rgba(50, 50, 50, 0.7);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.2;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: opacity 0.2s;
  
  .tooltip-title {
    font-weight: bold;
    margin: 0 0 6px 0;
  }
  
  .tooltip-item {
    display: flex;
    align-items: center;
    margin: 0 0 4px 0;
    
    .marker {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
    }
    .label {
      margin-right: 8px;
    }
    .value {
      font-weight: 500;
    }
  }
}
</style>
<style>
/* CSS2D Object 样式 */
.chart-label {
  pointer-events: none;
  font-size: 12px;
  line-height: 1.2;
}
.label-name {
  color: #333;
  font-weight: bold;
}
.label-value {
  color: #666;
}
</style>