简介面向 Web 前端与数据可视化开发者这份 Three.js 三维图形图表特效源码包基于开源 Three.js 库实现包含三维柱状图、饼图、散点图、线图等动态图表可快速搭建交互式可视化页面适合有一定前端基础的学习者。压缩包共 9 个文件由 7 个 JavaScript 脚本、1 个 htm 和 1 个 html 组成整体仅 500KBJS 脚本中涵盖图表核心逻辑、三维场景与相机控制、辅助数据图表库、交互调试面板及性能监控等模块html 为可直接运行的示例页面htm 则为详细的说明文档介绍场景、相机、几何体、材质、光源及动画更新的完整流程。示例页面支持直接打开浏览也可在源码中调整数据与样式并能与 D3.js、ECharts 或 React、Vue 集成扩展适合开发数据大屏、教学演示或产品展示。目前已有 971 人学习或下载体量轻、结构清晰是快速掌握 WebGL 三维图表制作的不错选择。 做数据可视化这几年我越来越觉得二维图表不够味。最近一个后台管理项目里我直接用three.js把三维图形、图表和特效揉在一起做了一个带3D柱状图、曲线路径、粒子玫瑰和火箭发射动画的数据看板。这个“three.js三维图形图表特效”组合方案不仅效果好而且能脱离node.js环境直接跑对想快速出效果的开发者来说非常实用。这篇文章就把它从思路到实操完整拆一遍适合有基础前端能力、想做三维可视化或游戏化特效的朋友。先说明一点three.js不是一个图表库它更像一个“造物主工具箱”。你可以用它从零搭出任何几何体、粒子、光效和材质图表只是它其中一个应用场景。但恰恰是这一点让它在数据展示赛道上跟ECharts、Highcharts拉开了差距。下面我会从选型、搭建、绘图、特效、排查五个部分把这个项目完整讲透。1. 为什么用Three.js做三维图表特效1.1 传统图表库的边界到底在哪ECharts做2D图表确实效率很高一个option传进去折线图、柱状图、饼图全都出来了。但如果想要有景深、可以旋转视角、加粒子背景和光晕ECharts就比较吃力。它底层是canvas或svg并不是真正的3D渲染管线虽然有扩展的gl版本但可定制空间始终有限。three.js则完全开放你能直接控制顶点坐标、着色器、材质、光照甚至可以把数字映射成一座城市。我见过不少项目都是双轨并行用ECharts做常规报表再用three.js负责核心大屏的视觉冲击。两者不冲突关键看内容的阅读密度。1.2 什么业务场景值得上3D可视化不是所有数据都适合做成三维图表我的判断标准很简单你是想让大家一眼记住还是想看一整天分析。前者适合上3D后者老老实实做表格。场景是否推荐原因品牌宣传大屏推荐视觉冲击力强适合展示核心指标数字孪生/设备状态推荐空间位置和关系本身就有3D属性游戏化数据报告推荐粒子、火箭动画能提升叙事感后台运营明细表不推荐信息密度高3D只会增加阅读负担Excel数据分析报表不推荐重点在准确对比2D图表效率更高记住三维图表的价值不是“看起来高级”而是“让数据在空间上有了新的表达维度”。想清楚这一点后面所有实现才有方向。2. 搭建环境单文件启动和Vue2集成2.1 无需Node.js的单文件启动器很多初学者以为three.js必须配webpack、vite这类工程化工具其实官方多年来一直支持CDN直引。在HTML里加一行script再写脚本就能启动。这也是“单文件 three.js 粒子玫瑰启动器无需 node.js”能流行起来的原因。script srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js/script script const scene new THREE.Scene(); const camera new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); camera.position.set(0, 2, 8); camera.lookAt(0, 0, 0); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); /script这里的r128是个稳定版本兼容性好很多老项目都在用。用这个模板你可以直接把HTML文件拉到浏览器里运行不需要安装任何东西。我平时做快速原型验证都习惯用这种方式而不是一上来就建工程。2.2 在Vue2项目里优雅接入如果你的项目是Vue2推荐用npm安装three然后在组件里做初始化。这里有两个容易踩的坑一是renderer创建后必须挂到当前组件的DOM节点上挂到body会导致组件样式混乱二是在组件销毁前要取消动画帧并释放渲染器。import * as THREE from three; export default { methods: { initThree() { this.scene new THREE.Scene(); this.camera new THREE.PerspectiveCamera( 60, this.$refs.chart.clientWidth / this.$refs.chart.clientHeight, 0.1, 1000 ); this.renderer new THREE.WebGLRenderer({ antialias: true, alpha: true }); this.renderer.setSize(this.$refs.chart.clientWidth, this.$refs.chart.clientHeight); this.$refs.chart.appendChild(this.renderer.domElement); this.animate(); }, animate() { this.raf requestAnimationFrame(this.animate); this.renderer.render(this.scene, this.camera); } }, mounted() { this.initThree(); }, beforeDestroy() { cancelAnimationFrame(this.raf); this.renderer.dispose(); this.scene.traverse(obj { if (obj.geometry) obj.geometry.dispose(); if (obj.material) obj.material.dispose(); }); } }在beforeDestroy里做资源回收是我踩过内存泄漏坑之后养成的习惯。不要以为刷新页面就没事组件频繁切换时泄漏会很严重。2.3 低代码封装把Three.js变成可配置组件如果要在团队里推广不要直接把three.js裸暴露给业务方。我习惯参照ECharts的option写法做一个“低代码可编辑ECharts图表”风格的组件让业务人员只传data、type、colors就能生成3D图表。组件内部按type分流type为bar时创建3D柱状体type为line时创建样条曲线type为rose时创建粒子玫瑰。这样既保留了three.js的表现力又让不会图形学的人也能上手。现在很多低代码平台的三维图表模块本质上都是这个思路。3. 从零手写三维图表核心几何3.1 3D柱状图BoxGeometry批量生成柱状图是3D图表里最容易的一个。每个柱子就是一个BoxGeometry长宽固定高度用数据映射。关键点在于默认几何体的中心在原点直接position.set(0, value, 0)会让柱子一半埋在地下必须改成value / 2让柱底落在地面上。const data [2.3, 4.1, 3.6, 5.2, 1.8]; const gap 2; data.forEach((value, index) { const height value * 1.5; const geo new THREE.BoxGeometry(1, height, 1); const mat new THREE.MeshPhongMaterial({ color: new THREE.Color().setHSL(index / data.length, 0.8, 0.5) }); const mesh new THREE.Mesh(geo, mat); mesh.position.set(index * gap, height / 2, 0); scene.add(mesh); });使用MeshPhongMaterial需要场景里有光源否则柱体会是黑的。我一般加一个DirectionalLight和一个AmbientLight这样柱体的明暗层次和棱角都能出来比纯色平面更有体积感。3.2 3D曲线样条曲线加管状光带如果数据是连续序列3D折线比2D更能体现空间趋势。用CatmullRomCurve3把数据点转成样条曲线再通过getPoints取点生成管线配合发光材质就是一条科技感很强的光带。const points data.map((v, i) new THREE.Vector3(i * gap, v * 1.5, 0)); const curve new THREE.CatmullRomCurve3(points); const tubeGeo new THREE.TubeGeometry(curve, 64, 0.12, 8, false); const tubeMat new THREE.MeshBasicMaterial({ color: 0x00ccff }); const tube new THREE.Mesh(tubeGeo, tubeMat); scene.add(tube);这里用MeshBasicMaterial而不是PhongMaterial是因为BasicMaterial不受光照影响颜色会更鲜艳适合科技感大屏。如果你想让光带更柔和可以把透明度调低并叠加一层半透明的第二根管子模拟外发光效果。3.3 粒子玫瑰数学公式驱动花形点阵粒子玫瑰是这次项目里观感最惊艳的一幕也是很多热词里提到的“粒子玫瑰启动器”。它本质上是用玫瑰线公式 r a * cos(k * theta) 来生成点坐标其中k控制花瓣数。遍历theta角度在花瓣曲线上撒点再通过THREE.Points一次性渲染。const positions []; const count 20000; const k 5; const a 3; for (let i 0; i count; i) { const theta (i / count) * Math.PI * 2 * k * 2; const r a * Math.cos(k * theta); const x r * Math.cos(theta); const y r * Math.sin(theta); const z Math.sin(theta * 8) * 0.6; positions.push(x, y, z); } const geo new THREE.BufferGeometry(); geo.setAttribute(position, new THREE.Float32BufferAttribute(positions, 3)); const mat new THREE.PointsMaterial({ color: 0xff66cc, size: 0.05, transparent: true, opacity: 0.8 }); const rose new THREE.Points(geo, mat); scene.add(rose);theta范围多乘k*2是为了让曲线在极坐标下闭合完整。z轴加入正弦波动后花形粒子就不再是一个平面而是有了立体浮动感。实际调参时count不建议超过2万否则低端手机容易卡size也建议小于0.1否则点会糊成一片。4. 特效动画与交互性能优化4.1 火箭发射动画特效怎么做大屏总喜欢来一个点睛动画我这里做了一个3D火箭发射特效。火箭主体用CylinderGeometry加ConeGeometry拼装尾焰用粒子系统模拟。发射过程就是在动画循环里改变火箭的position.y同时让尾焰粒子从尾部向下喷射。const rocket new THREE.Group(); rocket.add(new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.3, 1.2), bodyMat)); rocket.add(new THREE.Mesh(new THREE.ConeGeometry(0.3, 0.5, 6), headMat)); scene.add(rocket); function animate() { requestAnimationFrame(animate); rocket.position.y 0.03; tailParticles.position.set(rocket.position.x, rocket.position.y - 0.7, rocket.position.z); renderer.render(scene, camera); }火箭到达目标位置后可以触发一个回调把旁边的柱状图或粒子玫瑰依次显示出来。这种“先发射后展开”的节奏比一屏内容全部同时出现更有叙事感。项目里不要急着加载glb模型用基本几何体组合体积小、加载快效果也不差。4.2 OrbitControls加Raycaster让图表可点击3D图表不能光好看还要能交互。我引入OrbitControls让用户旋转视角再用Raycaster做点击拾取。点击柱子时射线从相机出发经过鼠标位置与场景中的网格求交命中的对象就是你要的柱子。const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); window.addEventListener(click, (e) { mouse.x (e.clientX / innerWidth) * 2 - 1; mouse.y -(e.clientY / innerHeight) * 2 1; raycaster.setFromCamera(mouse, camera); const hits raycaster.intersectObjects(chartGroup.children); if (hits.length 0) { console.log(hits[0].object.userData.value); } });在每个柱子创建时把原始数据存进mesh.userData.value点击时直接取出来比额外维护一个数组更清爽。OrbitControls和click事件不会冲突因为旋转操作本身不触发点击请求需要长按拖动还是短按点击浏览器会自行区分。4.3 性能优化把帧率稳住才是真功夫3D图表最重要的不是花哨是稳。60fps和10fps的观感天差地别。我总结了几条务实的优化经验设置renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))高分屏不会过载。同类型的柱子大量出现时合并几何体或用InstancedMesh大幅减少draw call。粒子数量控制在2万到5万之间用BufferGeometry代替旧的Geometry。动画循环里避免频繁创建临时Vector3、Color对象能复用就复用。如果Chrome性能面板里帧率还是不稳优先看draw call数量和粒子覆盖范围。把相机远近裁面拉近一点也能减少无效渲染。5. 避坑记录的排查手记5.1 渲染模糊和尺寸丢失问题最常见的坑是用Vue组件时容器宽高为0。this.$refs.chart.clientWidth在mounted早期拿不到真实数值导致renderer.setSize传进去的是0。解决方法是用$nextTick再读或者在resize事件里重新读取并更新。window.addEventListener(resize, () { camera.aspect this.$refs.chart.clientWidth / this.$refs.chart.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(this.$refs.chart.clientWidth, this.$refs.chart.clientHeight); });另一个坑是只改了size忘了更新camera.aspect结果图像被横向拉伸。这两行必须同时出现缺一不可。事件监听器在组件销毁时也要移除不然会重复触发报错。5.2 数据更新后场景不刷新和内存泄漏three.js没有响应式系统数据变化后不会自动重绘。我踩过的坑是直接给旧几何体设置新的position结果画面没变而且内存越占越大。正确做法是替换mesh之前先调用geometry.dispose()和material.dispose()再从场景中删除旧对象。function updateChart(newData) { chartGroup.children.forEach(mesh { mesh.geometry.dispose(); mesh.material.dispose(); chartGroup.remove(mesh); }); buildChart(newData); }如果整个图表刷新频率很高最省事的方式是清空chartGroup再重新构建。虽然会重建几何体但配合dispose之后内存是稳定的。还有一个细节动画循环里创建的临时对象不要太多尽量复用避免每帧触发垃圾回收造成掉帧。5.3 WebGL/three.js 岗位需求多吗值不值得学最后回应一下很多同学关心的问题。现在数字孪生、3D大屏、低代码可视化平台越来越多会three.js的岗位需求确实在涨。但岗位要求不只看API调用更看重你对图形学基础、渲染性能、数学建模的理解。如果只会套demo竞争力有限但如果你能独立完成三维图表特效、粒子系统和性能优化这类岗位的薪资普遍高于普通前端。我自己就是从ECharts转three.js的最大的体会是别怕数学三角函数才是三维可视化的好朋友。遇到项目先想清楚用哪种几何体表达数据剩下的交给像素。本文还有配套的精品资源点击获取