简介：这是一份面向Web前端开发者与数据可视化学习者的Three.js三维图形图表特效源码包，适合具备一定JavaScript基础、希望将二维图表升级为立体交互效果的进阶练习者。压缩包共9个文件，约500KB，以7个js脚本为核心，搭配1个htm说明与1个html页面，涵盖Three.js主库、ECharts、dat.gui、OrbitControls、stats等依赖，便于直接运行与二次修改。内容围绕场景、相机、几何体、材质与光源等基础概念展开，并给出三维柱状图、饼图、散点图与线图的实现思路，同时演示与D3.js及React、Vue等框架的集成方式。已有972人学习，读者可借此理解三维图表的渲染流程、动画更新与交互控制，掌握WebGL可视化项目的搭建与调试方法。
1. 从一份 three.js 三维图形图表特效源码说起：它到底能解决什么
前端可视化做到一定阶段，二维图表基本满足不了需求了。ECharts 能画折线柱状饼图，但一旦产品经理说“要那种能转起来、有科技感的三维效果”，二维库就顶不住了。这份 three.js 三维图形图表特效源码，解决的就是这个场景：用 WebGL 在浏览器里渲染出带旋转、发光、粒子、生长动画的三维图形和图表，不依赖后端出图，纯前端跑。它适合两类人：一类是手里有可视化需求、想快速拿到能改的代码底子的前端；另一类是刚接触 three.js、想通过一个完整特效案例把场景、相机、渲染器、动画循环这套东西串起来的人。源码包里通常是 HTML 加 JS 的独立页面，打开就能看效果，改参数就能换样式，不用配构建工具。下面我按“先搞懂它在干什么，再动手跑起来，最后把坑填上”的顺序拆一遍。
2. three.js 三维图表特效的渲染链路：场景、相机、渲染器怎么搭
2.1 为什么三维图表比二维多一层“渲染循环”
二维图表库的思维是“给数据，它出图”，你不需要关心每一帧怎么画。three.js 不一样，它是渲染引擎，你得自己搭一条链路：场景（Scene）装物体，相机（Camera）决定从哪看，渲染器（Renderer）把场景画到 canvas 上，然后靠 requestAnimationFrame 一帧一帧地重画。三维图表特效里那些旋转、呼吸、粒子飘动，本质都是每帧改一下物体的属性再重绘。理解这一点，后面调参数才不会懵——你改的不是“图表配置”，是“每一帧的状态”。
常见做法是先把这条最小链路跑通，再往里塞图表几何体。下面这段是特效源码里最核心的骨架，几乎所有三维图表页面都长这样：
// 场景：所有三维物体的容器 const scene = new THREE.Scene(); // 相机：透视相机，模拟人眼近大远小 // 参数依次是：视野角度、宽高比、近裁剪面、远裁剪面 const camera = new THREE.PerspectiveCamera( 45, // fov，视野角度，越小越"长焦" window.innerWidth / window.innerHeight, // aspect，跟随窗口 0.1, // near，太近的物体不渲染 1000 // far，太远的物体不渲染 ); camera.position.set(0, 5, 15); // 相机位置，决定初始视角 camera.lookAt(0, 0, 0); // 让相机看向场景中心 // 渲染器：把场景画到页面上的 canvas const renderer = new THREE.WebGLRenderer({ antialias: true, // 抗锯齿，边缘更顺滑，代价是性能 alpha: true // 背景透明，方便叠在页面背景上 }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 限制像素比，防止高分屏卡顿 document.body.appendChild(renderer.domElement); // 动画循环：每帧调用一次，是特效"动起来"的根源 function animate() { requestAnimationFrame(animate); // 这里改物体属性，比如旋转 // mesh.rotation.y += 0.01; renderer.render(scene, camera); } animate();逻辑说明：Scene是空容器，光有它什么都看不到；PerspectiveCamera决定观察方式，position和lookAt一起决定你第一眼看到的角度；WebGLRenderer负责实际绘制，setPixelRatio那行是血泪经验——不限制的话，在 4K 屏或手机高分屏上像素比能到 3 甚至 4，渲染量翻几倍，页面直接卡成幻灯片。参数说明：fov一般 45 到 75，太小画面压抑，太大边缘畸变；near和far别乱设，范围拉太大（比如 0.0001 到 100000）会丢深度精度，物体闪烁。
2.2 三维图表几何体怎么选：柱状、环形、粒子各用什么
特效源码里常见的三维图表形态有三类，选型逻辑不一样。柱状类用BoxGeometry或CylinderGeometry，每个数据点对应一根柱子，高度映射数值，这是最接近传统柱状图的表达。环形或饼图类用TorusGeometry或自定义Shape挤出，适合占比展示。粒子类用Points配合BufferGeometry，适合做背景氛围或大量数据点的散点，性能比一堆独立 mesh 好得多。
拿柱状图举例，数据映射的核心是把数值归一化到高度区间：
const data = [12, 35, 28, 50, 42]; // 原始数据 const maxVal = Math.max(...data); // 取最大值做归一化基准 const barWidth = 1.2; // 柱子宽度 const gap = 0.6; // 柱子间距 data.forEach((val, i) => { // 高度 = 数值占比 * 最大高度，保证最高柱不超过 8 const height = (val / maxVal) * 8; const geometry = new THREE.BoxGeometry(barWidth, height, barWidth); const material = new THREE.MeshStandardMaterial({ color: 0x2f7bff, metalness: 0.3, // 金属度，越高越像金属 roughness: 0.4 // 粗糙度，越低越光滑反光 }); const bar = new THREE.Mesh(geometry, material); // 柱子默认以中心为原点，要往上抬 height/2 才能"站"在地面上 bar.position.set(i * (barWidth + gap), height / 2, 0); scene.add(bar); });逻辑说明：BoxGeometry的默认原点在几何体中心，所以position.y要设成height / 2，否则柱子会一半埋在地面下，这是新手最常见的翻车点。参数说明：metalness和roughness是MeshStandardMaterial的两个关键参数，想要科技感就金属度调高、粗糙度调低，但这两个参数只有在场景里有光源时才生效，没打光的话柱子是纯黑的。所以别急着调材质，先把灯加上。
2.3 光照与材质：为什么你的三维图表一片死黑
很多人第一次跑 three.js，场景里物体是黑的，以为是代码错了，其实是没加光源。MeshStandardMaterial、MeshPhysicalMaterial这类基于物理的材质必须有光才可见。特效源码里一般会配环境光加方向光或点光：
// 环境光：均匀照亮所有物体，没有方向，防止背光面全黑 const ambient = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambient); // 方向光：有方向，产生明暗对比和阴影感 const dirLight = new THREE.DirectionalLight(0xffffff, 1.2); dirLight.position.set(5, 10, 7); scene.add(dirLight); // 点光：从某一点向四周发散，适合做局部高光 const pointLight = new THREE.PointLight(0x66ccff, 1, 50); pointLight.position.set(-5, 8, 5); scene.add(pointLight);逻辑说明：环境光负责“保底亮度”，方向光负责“立体感”，点光负责“氛围色”。参数说明：环境光强度别超过 1，否则画面发灰没对比；方向光强度 1 到 2 之间比较自然；点光的第三个参数是照射距离，超过这个距离就衰减没了。如果用了MeshBasicMaterial，它不受光照影响，永远显示材质本身的颜色，适合做纯色背景或不需要立体感的元素，但也就没有明暗层次了。
3. 把特效跑起来并改成自己的：初始化、动画与交互参数
3.1 本地跑通源码：目录结构与启动方式
拿到源码包，先别急着改。常见结构是一个 HTML 入口加一个或多个 JS 文件，three.js 库可能是本地引入也可能是 CDN。稳妥做法是本地起一个静态服务，因为有些浏览器对file://协议下的模块加载和纹理读取有限制，直接双击 HTML 可能白屏。
# 在源码目录下起一个静态服务，任选一种 python3 -m http.server 8080 # 或者 npx serve .启动后浏览器打开http://localhost:8080，按 F12 看控制台。如果报Failed to load module或纹理 404，多半是路径问题，检查 HTML 里 script 的 src 和纹理图片的相对路径。参数说明：端口别用 80 或已被占用的，8080、3000、5173 都行。这一步的目的是排除环境干扰，确认源码本身能跑，再动代码。
3.2 动画循环里改什么：旋转、缩放、生长动画的实现
特效的“动”分几种。持续旋转最简单，每帧给rotation加一个固定值。呼吸效果是让scale按正弦函数波动。生长动画是让柱子高度从 0 涨到目标值，常用于入场。生长动画的关键是用一个进度变量做插值：
let progress = 0; // 0 到 1 的进度 const duration = 1.5; // 动画时长（秒） const clock = new THREE.Clock(); // 计时器 function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); // 距上一帧的秒数 progress = Math.min(progress + delta / duration, 1); // 累加并封顶到 1 bars.forEach((bar, i) => { const targetH = bar.userData.targetHeight; // 存好的目标高度 // 用缓动函数让动画不那么机械 const eased = 1 - Math.pow(1 - progress, 3); bar.scale.y = eased; // 从 0 缩放到 1 bar.position.y = (targetH * eased) / 2; // 同步位置，保持贴地 }); renderer.render(scene, camera); }逻辑说明：clock.getDelta()拿到的是真实时间差，用它驱动进度，动画速度就和帧率无关，60 帧和 30 帧看起来一样快。1 - Math.pow(1 - progress, 3)是缓出函数，开头快结尾慢，比线性自然。参数说明：duration控制快慢，1 到 2 秒比较舒服；scale.y缩放时position.y必须同步改，否则柱子会从中心缩放，看起来像陷进地里。这里把目标高度存在userData里，是 three.js 里挂自定义数据的标准做法，别用全局变量硬记。
3.3 鼠标交互与相机控制：让图表能转能缩放
静态特效看久了会腻，加上鼠标交互体验立刻不一样。最省事的是引入OrbitControls，几行代码就能拖拽旋转、滚轮缩放：
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // 开启惯性，拖动后有余韵 controls.dampingFactor = 0.05; // 阻尼系数，越小越"滑" controls.minDistance = 5; // 最近能拉多近 controls.maxDistance = 40; // 最远能拉多远 controls.maxPolarAngle = Math.PI / 2; // 限制不能转到地面以下 // 注意：开了 damping 后，animate 里每帧要调 controls.update() function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }逻辑说明：OrbitControls接管了相机的位置和朝向，你不用再手动改camera.position。参数说明：enableDamping必须配合每帧controls.update()才生效，忘了调就是拖一下停一下，没有惯性；maxPolarAngle设成Math.PI / 2能防止用户把相机转到地面下方看到穿帮。如果源码里没有交互，加上这段基本就能满足大部分演示需求。
4. 性能与兼容性避坑：三维图表卡顿、贴图不显示怎么排查
4.1 页面卡顿：draw call 太多和像素比过高
现象：页面能跑但很卡，滚动或旋转时掉帧明显，尤其在笔记本和手机上。原因通常有两个，一是独立 mesh 太多，每个 mesh 一次 draw call，几百根柱子就是几百次绘制；二是setPixelRatio没限制，高分屏上渲染分辨率翻倍。解决：柱子多的时候用InstancedMesh合并绘制，或者用Points代替；像素比限制到 2 以内。另外antialias在低端设备上也是负担，可以按设备能力动态关掉。
4.2 贴图开始不显示：路径、跨域和加载时机
现象：模型或柱子上该有的纹理是纯色或黑色，控制台可能报 404 或 CORS。原因有三类：路径写错，纹理图片没跟着源码一起放对位置；跨域，纹理来自别的域名而服务器没开 CORS；加载时机，纹理还没加载完就开始渲染。解决：纹理放本地同目录，用相对路径；跨域的话让服务端加响应头，或者把图下载到本地；用TextureLoader的onLoad回调，加载完再渲染，别在纹理没就绪时就render。
4.3 移动端适配：尺寸、触摸和性能三件事
现象：桌面正常，手机上要么画面被裁，要么触摸没反应，要么直接卡死。原因：canvas 尺寸写死了没跟窗口变化；触摸事件没处理；移动端 GPU 性能弱。解决：监听resize更新相机宽高比和渲染器尺寸；OrbitControls本身支持触摸，但要确保 canvas 没被其他元素挡住；移动端降低像素比、减少粒子数量、关掉抗锯齿。
window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); // 改了相机参数必须调这个，否则不生效 renderer.setSize(window.innerWidth, window.innerHeight); });逻辑说明：updateProjectionMatrix()是高频翻车点，改了aspect、fov、near、far之后不调它，画面比例就是错的。参数说明：移动端可以把setPixelRatio的上限压到 1.5，肉眼差别不大但性能提升明显。
4.4 版本与模块引入：three.js 新旧写法混用的坑
现象：照着老教程写的代码报错，比如THREE.Geometry未定义，或者import报模块找不到。原因：three.js 从 r125 之后逐步废弃了Geometry，改用BufferGeometry；模块引入方式也分 CDN 全局变量和 ES module 两种。解决：确认源码用的哪个版本，别把import写法和THREE.xxx全局写法混着用；老代码里的Geometry换成BufferGeometry，大部分 API 名字一样。
5. 进阶：把这份特效源码改成可复用的图表组件
5.1 数据驱动：把写死的柱子换成配置生成
源码里的柱子往往是写死的，要复用得把数据抽出来。核心思路是写一个createBarChart(data, options)函数，内部清空旧物体、按数据重建、返回更新方法。这样换一组数据只要重新调一次，不用改渲染逻辑。
function createBarChart(scene, data, options = {}) { const group = new THREE.Group(); // 用 Group 统一管理，方便整体清理 const maxVal = Math.max(...data); const maxHeight = options.maxHeight || 8; const color = options.color || 0x2f7bff; data.forEach((val, i) => { const h = (val / maxVal) * maxHeight; const geo = new THREE.BoxGeometry(1.2, h, 1.2); const mat = new THREE.MeshStandardMaterial({ color, metalness: 0.3, roughness: 0.4 }); const bar = new THREE.Mesh(geo, mat); bar.position.set(i * 1.8, h / 2, 0); group.add(bar); }); scene.add(group); // 返回销毁方法，切换数据前调用，避免内存泄漏 return { group, dispose() { group.traverse(obj => { if (obj.geometry) obj.geometry.dispose(); if (obj.material) obj.material.dispose(); }); scene.remove(group); } }; }逻辑说明：用Group把一组柱子打包，销毁时遍历释放geometry和material，这是 three.js 内存管理的关键——不手动dispose，反复创建会吃光显存。参数说明：options里可以扩展颜色、间距、最大高度，做成配置项后复用性大幅提升。
5.2 验证改动是否生效：三个必看指标
改完代码别只看“好像动了”。第一看控制台有没有报错和警告，尤其是dispose相关的内存警告；第二看帧率，用浏览器 Performance 面板录一段，稳定 60 帧或接近屏幕刷新率才算合格；第三看内存，反复切换数据几次，内存应该回落而不是一路涨，涨了就是没释放干净。我一般改完特效会强制走一遍这三步，尤其是内存那条，吃过亏——页面开着一下午，标签页直接崩了，回头查就是几何体没释放。
5.3 一个具体技巧：用雾效和背景色提升纵深感
三维图表容易显得“平”，加一层雾效立刻有纵深。scene.fog让远处物体渐隐，配合深色背景，科技感就出来了：
scene.background = new THREE.Color(0x0a0e1a); // 深色背景 scene.fog = new THREE.Fog(0x0a0e1a, 20, 60); // 颜色和背景一致，20 到 60 之间渐隐逻辑说明：雾的颜色必须和背景色一致，否则远处会出现一条突兀的色带。参数说明：前两个数字是雾的起止距离，起点太近会糊成一片，一般设在相机到主体距离的两倍开外。这个技巧成本极低但观感提升明显，从那以后我每次做三维图表都先把背景和雾定下来，再调其他参数。希望帮到你。
本文还有配套的精品资源，点击获取
