注意： 只有实现思路和代码，无法开箱即用。

1. 使用背景

收到个任务，制作echarts大屏，有个模块需要使用立体环图，在echarts官网找了一圈没有找到如何实现，网上资料甚少，最后只能叫设计改成普通图了。任务完成后自己学习下如何实现。

需求图：

我暂时实现的样子 - label标签还没有想到应该怎么实现，希望各位大佬知道的能分享下经验

2. 学习视频及文档

1: three.js教程-从入门到入门视频短讲解挺清楚的，开了两倍速大概了解下什么是Three.js
2. Three.js中文网比较详细
3. Three官网事例多

3. 实现流程

3.1 创建好THREE基本环境

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
//场景
const scene = new THREE.Scene()
//相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 50, 100);
//渲染器
const renderer = new THREE.WebGLRenderer()
document.querySelector('#app').appendChild(renderer.domElement)
renderer.setSize(window.innerWidth, window.innerHeight)
//控制器让画面可以拖动
const controls = new OrbitControls(camera, renderer.domElement);
//渲染场景
function render() {renderer.render(scene, camera)requestAnimationFrame(render)
}
render()

3.2 单一立体扇形实现

使用到THREE.Shape()和THREE.ExtrudeGeometry()创建。(在官方事例中进行修改)

const heartShape = new THREE.Shape();
//通过两个弧形形成一个扇形平面---具体也没明白为啥可以，就是写了之后发现竟然实现了
//外层弧形
heartShape.absarc(0, 0, 20, 0, Math.PI/2)
//内层弧形
heartShape.absarc(0, 0, 10, Math.PI/2, 0, true)const extrudeSettings = { depth: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
//使用 ExtrudeGeometry 把扇形平面拉伸成立体状
const geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );const mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );

3.3 计算每个数据所占的角度大小。

// 假设数据是这样的
const chartData = [{ label: '星期一', value: 40 },{ label: '星期二', value: 80 },{ label: '星期三', value: 20 },
]
//第一步 获取所有值的和
const max = chartData.reduce((pre, item) => { return pre + item.value }, 0)
//第二步 设置图形初始角度为0
let startdeg = 0
chartData.forEach((item, index) => {// 每一个图形的开始角度let start = startdeg// 每一个图形的结束角度 = 初始角度+所占比例的角度let end = startdeg + 2*Math.PI*(item.value/max)... 有开始角度和结束角度了 用3.2方式绘制图形 // 更新 图形初始化角度startdeg = end
})

至此立体饼状图就能出来了。

3.4 每个饼状图上的百分比标签。

使用的是CSS2DRenderer 也就是用DOM+CSS方式。

import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';const labelDiv = document.createElement('div');∂
labelDiv.innerHTML = `<div style='color: #fff'>50%</div>`
const earthLabel = new CSS2DObject(labelDiv);
earthLabel.position.set(10, 0, 0)
// earthLabel.center.set(0, 0, 0);
scene.add(earthLabel);// css2d渲染
let labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.querySelector('#app').appendChild(labelRenderer.domElement);
//把相机场景放入渲染
labelRenderer.render(scene, camera);

3.5 每个百分比标签位置

下载最后面的代码参考下吧

4. 代码分享

gitCode仓库 three实现立体环形图
代码总共100多行，后面要是有什么思路继续完善一下。

如本文对你10分帮助，就赏个10分（一毛）吧

THREEJS实现立体环图(思路版)相关推荐

简单实现有向无环图思路
给一部分带有from和to的节点组织成一个有向无环图,给from与to路径找到他们之前的连线轨迹.实现思路:遍历所有的节点,该节点如果不包含from或者to的内容且周围只有一个节点这样的节点从我们总的 ...
洛谷：P1875 佳佳的魔法药水（有向有环图 + Dijkstra变式）
相信的心是你的魔法 | 信じの心は君の魔法题意: 药水可以直接买,也可以由两种其他药水配置而来,问配置出 0号药水的最小价钱和最小价的方案数思路: 义眼拓扑,但!在题意没有明确强调有向无环 ...
数据结构（六）：图的概念、存储方式、基本操作、最小生成树、最短路径、有向无环图、关键路径 | Prim、Kruskal算法 | BFS、Dijkstra、Floyd算法 | 拓扑排序 | 求关键路径
文章目录第六章图一.图 (一)图的定义 (二)图逻辑结构的应用 (三)无向图.有向图 (四)简单图.多重图 (五)顶点的度.入度.出度 (六)顶点-顶点的关系描述 (七)连通图.强连通图 (八) ...
【图论】有向无环图的拓扑排序
1. 引言有向无环图(Directed Acyclic Graph, DAG)是有向图的一种,字面意思的理解就是图中没有环.常常被用来表示事件之间的驱动依赖关系,管理任务之间的调度.拓扑排序是对DA ...
有向无环图的拓扑排序
拓扑排序对于一个有向无环图,我们可以这样确定一个图中顶点的顺序: 对于所有的u.v,若存在有向路径u-->v,则在最后的顶点排序中u就位于v之前.这样确定的顺序就是一个图的拓扑排序. ...
第十二届湖南省赛（B - 有向无环图）（拓扑排序+思维）好题
Bobo 有一个 n 个点,m 条边的有向无环图(即对于任意点 v,不存在从点 v 开始.点 v 结束的路径). 为了方便,点用 1,2,-,n 编号. 设 count(x,y) 表示点 x 到点 y ...
LeetCode 2192. 有向无环图中一个节点的所有祖先（拓扑排序）
文章目录 1. 题目 2. 解题 1. 题目给你一个正整数 n ,它表示一个有向无环图中节点的数目,节点编号为 0 到 n - 1 (包括两者). 给你一个二维整数数组 edges ,其中 ed ...
减治法在求解拓扑排序问题中的应用（JAVA）--有向无环图
减治法在求解拓扑排序问题中的应用拓扑排序:对于一个有向无环图来说,如果我们能够按照次序列出顶点,使得对于每条边来说,边的起始顶点总是排在边的结束顶点之前,那么这个过程就称为拓扑排序,拓扑排序有解是一 ...
有向无环图中的拓扑排序
´有向无环图(DAG),指不存在环的有向图 ´点的入度,指以这个点为结束点的边数 ´点的出度,指以这个点为出发点的边数 ´拓扑序就是对于节点的一个排列使得若(u,v)∈E,那么u在排列中出现的位置一定 ...

THREEJS实现立体环图(思路版)