简介Three.js三维图形图表特效资源包面向Web前端开发与数据可视化场景为希望掌握三维图表制作的开发者提供一套可直接运行的源码示例尤其适合零基础或有一定JavaScript经验的读者。压缩包共9个文件其中7个JavaScript脚本负责核心逻辑与工具模块结合1个HTML页面展示三维效果另有1个HTM说明文档详细解释运行步骤、场景搭建、相机设置、几何体创建、材质应用、光源添加以及动画更新等自定义方法整体仅500KB结构紧凑、便于快速上手。已有971人学习参考覆盖从基础概念到项目实践的完整链路。资源内含可直接调用的图表封装模块整合主流可视化库实现柱状图、饼图、散点图、线图等多种三维图表。并辅以视角控制、交互调试、性能监控等配套工具能帮助读者直观理解场景、相机、几何体、材质与光源在真实项目中的协作方式是练习WebGL和交互可视化的实用素材可直接修改扩展以接入业务数据。 聊一个我最近反复折腾的话题把业务图表从平面搬到三维空间顺便加上用three.js撑起来的动态特效。之前做数据可视化项目时甲方提了个需求——图表要立体、要炫、要有冲击力传统ECharts、Highcharts虽然图表种类齐全但视觉上限摆在那里做来做去还是2D平面那一套。后来我把柱状图、散点图、粒子动画都塞进了Three.js的场景里效果直接拉升了一个档次。这篇文章不聊配置项不抄文档就说说我从零开始搭建一个three.js三维图形图表特效时踩过的坑、沉淀下来的方案以及可以直接复用的代码片段。这篇内容适合的读者也很明确用过一点Three.js但没做过完整可视化项目的人或者是想从ECharts转向WebGL可视化、又不知道怎么下手的人。我会从技术选型讲到核心实现再到特效方案和性能调优全程覆盖最后附上排查记录保证你看完能动手做出来。1. 为什么要把图表搬进3D世界先解决一个底层问题图表为什么要做成三维的答案不只是好看。当数据维度超过两个2D平面的表达能力就非常有限比如同时展示销售额、增长率、市场占有率、时间周期这四五个字段平面图表只能靠颜色、大小做映射读起来吃力很多时候还得来回切换视图。三维空间天然多了一个坐标轴再加上灯光、材质、视角变换数据的层次感和空间关系一下子就能表达清楚。另外Three.js带来的特效性能是普通图表库比不了的。ECharts做动画效果实际上是在Canvas/SVG层面模拟粒子数量稍多、过渡复杂一些帧率就开始下降。Three.js跑在WebGL上GPU直接参与渲染几万个粒子、几十个动态几何体完全无压力。我测试过同一台机器上ECharts散点图吃到3000个点就开始卡Three.js扛到5万个点还能稳定在50帧以上。如果你的业务里需要大量数据点实时刷新这个差距是决定性的。当然3D图表也不是没有代价。它的开发成本明显更高交互方式、坐标轴标注、视觉层次都得自己设计。所以我的建议是适合在汇报大屏、产品介绍页、数据展示厅这类对视觉要求极高的场景用如果只是内部报表后台2D图表仍然是效率最好的选择。这就是为什么我在项目里通常采用混合方案——常规表格和明细数据用ECharts核心指标、品牌展示页用三维图表。2. 技术选型与基础场景搭建很多人一上来就纠结用什么框架、配什么构建工具其实Three.js项目本身没有这么复杂。我先说选型思路再给你一套最省事的环境搭建方案。2.1 核心库选型思路Three.js本身自然是首选它有完整的几何体、材质、灯光、相机系统生态也是最成熟的。辅助库方面我重点用这几个OrbitControls场景旋转、缩放、平移控制的标配做图表交互基本离不开它。CSS2DRenderer把DOM标签叠加到三维场景中做图表的数字标注、轴标签非常方便比用Sprite纹理做文字更清晰。TWEEN.js管理动画缓动曲线做柱状图生长、相机飞入飞出的过渡效果比手写线性插值优雅得多。EffectComposer UnrealBloomPass做辉光后处理这是特效感的重要来源。不推荐一上来就用react-three-fiber这类封装库虽然开发效率高但如果你对Three.js底层不熟出了问题会很难排查。先把原生Three.js跑通一次再决定要不要引入上层封装。2.2 零构建环境搭建方案的细节说明很多教程默认你用npm和Vite但实际上还有更轻的办法。我倾向于用ES Module importmap的方式直接在HTML里引入不需要Node.js环境双击就能跑。核心原因有两个一是小项目不想引入复杂的构建链改个代码刷新浏览器就能看效果二是后期如果想迁移到Vite工程模块结构不用动只是换一下加载方式。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / titleThree.js 三维图表特效/title style body { margin: 0; overflow: hidden; background: #0a0e27; } #chart-label { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #fff; font-family: Microsoft YaHei; font-size: 14px; opacity: 0.7; z-index: 10; } /style /head body div idchart-label三维柱状图演示 —— 拖动鼠标旋转视角/div script typeimportmap { imports: { three: https://unpkg.com/three0.160.0/build/three.module.js, three/addons/: https://unpkg.com/three0.160.0/examples/jsm/ } } /script script typemodule import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; import { CSS2DRenderer, CSS2DObject } from three/addons/renderers/CSS2DRenderer.js; import { EffectComposer } from three/addons/postprocessing/EffectComposer.js; import { RenderPass } from three/addons/postprocessing/RenderPass.js; import { UnrealBloomPass } from three/addons/postprocessing/UnrealBloomPass.js; // ... 下面的核心代码都写在这个script里 /script /body /html这套方案的核心思路是把Three.js当作一个运行时库来用不需要打包。引入的模块文件走的是unpkgCDN网络状况好的时候加载非常快。生产环境建议把这两个地址换成本地静态文件避免依赖第三方CDN的稳定性。2.3 场景、相机、渲染器三步初始化不管做什么三维图表第一步永远是创建场景、相机、渲染器这三件套。我推荐的项目初始化参数如下const scene new THREE.Scene(); scene.background new THREE.Color(0x0a0e27); scene.fog new THREE.FogExp2(0x0a0e27, 0.012); const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(18, 18, 18); camera.lookAt(0, 3, 0); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled true; renderer.shadowMap.type THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; controls.dampingFactor 0.08; controls.target.set(0, 3, 0); controls.minDistance 8; controls.maxDistance 40;这里有几个参数值得展开说明。setPixelRatio限制了最大像素比为2这是防性能翻车的标配高DPI屏幕比如MacBook的Retina屏如果像素比设成3像素填充量会暴增到2.25倍帧率直接腰斩。PCFSoftShadowMap是阴影效果和性能的平衡点VSM阴影虽然更好看但会有漏光问题小项目没必要。背景加FogExp2指数雾不是为了遮丑而是让镜头拉远时远处的柱子自然隐入背景整体层次感非常舒服。3. 三维图表核心功能拆解环境搭好之后真正难的是把业务数据变成三维图形。这一节我把柱状图、坐标轴、标签、交互四大模块拆开讲。3.1 柱状图的立体化实现先定义柱子的数据结构每个柱子代表一个月度销售额x轴是月份z轴是商品分类y轴是销售额。三维柱状图的优势在这里就能体现——两张二维图表的数据可以合成一张三维图表来看。const months [1月, 2月, 3月, 4月, 5月, 6月]; const categories [数码, 服饰, 食品]; const data [ [120, 110, 85, 132, 148, 165], [95, 98, 105, 88, 92, 110], [60, 75, 70, 82, 79, 90] ]; function createBarChart() { const barGroup new THREE.Group(); const colors [0x4f8fff, 0xff6b6b, 0x51cf66]; data.forEach((row, ci) { row.forEach((value, mi) { const height value / 8; const geo new THREE.BoxGeometry(1.1, height, 1.1); const material new THREE.MeshStandardMaterial({ color: colors[ci], transparent: true, opacity: 0.92, roughness: 0.25, metalness: 0.35, emissive: colors[ci], emissiveIntensity: 0.08 }); const box new THREE.Mesh(geo, material); const x (mi - (months.length - 1) / 2) * 1.6; const z (ci - (categories.length - 1) / 2) * 1.6; box.position.set(x, height / 2, z); box.castShadow true; box.receiveShadow true; barGroup.add(box); }); }); scene.add(barGroup); }柱子高度直接按值除以8做等比缩放实际项目中要按最大值归一化保留适当顶部空间否则柱子最高点会顶出视野。我给每个柱子加了自发光色强度只有0.08这能让柱子底色在深蓝背景下微微发亮但又不会盖过灯光效果是科技感的重要来源。3.2 坐标系与地面网格三维图表的坐标系必须自己搭建。Three.js自带的AxesHelper能当调试用但不适合直接展示给用户因为线条太细缺少轴线引导和文字标注。我的做法是用GridHelper做地面网格再手动添加坐标轴线。const gridHelper new THREE.GridHelper(12, 12, 0x3a4a8c, 0x223061); scene.add(gridHelper); function createAxis() { const axisMaterial new THREE.LineBasicMaterial({ color: 0x6c7ac9, opacity: 0.6, transparent: true }); const pointsX [new THREE.Vector3(-5.8, 0, 0), new THREE.Vector3(5.8, 0, 0)]; const pointsZ [new THREE.Vector3(0, 0, -5.8), new THREE.Vector3(0, 0, 5.8)]; const pointsY [new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 7, 0)]; const lineX new THREE.Line(new THREE.BufferGeometry().setFromPoints(pointsX), axisMaterial); const lineZ new THREE.Line(new THREE.BufferGeometry().setFromPoints(pointsZ), axisMaterial); const lineY new THREE.Line(new THREE.BufferGeometry().setFromPoints(pointsY), axisMaterial); scene.add(lineX, lineZ, lineY); }这里要特别说一个陷阱GridHelper的尺寸和分段数要跟柱子布局匹配上面柱子在x轴占用的跨度是(6-1)*1.6 8所以网格尺寸我设成了12留出间隙。如果网格太密或太疏视觉上会跟柱子位置对不上看起来很乱。3.3 文字标签的三种可行方案三维图表最难处理的其实是文字。Three.js里有三种方案Canvas贴图、Sprite精灵、CSS2DRenderer。我的建议是能用CSS2DRenderer就别用前两种。Canvas贴图要在内存里绘制文字再转纹理中文的fontSize调起来很麻烦多语言适配更是噩梦Sprite虽然能一直面向相机但是分辨率会跟随缩放变化放大后文字会模糊。CSS2DRenderer的本质是把DOM元素叠加在Canvas上天然高清还支持CSS样式、事件绑定。下面是添加标签的完整代码function createLabel(text, position) { const div document.createElement(div); div.className chart-label-item; div.textContent text; div.style.color #cfd8ff; div.style.fontSize 13px; div.style.fontFamily Microsoft YaHei, sans-serif; div.style.textShadow 0 0 6px rgba(0,0,0,0.8); div.style.transform translate(-50%, -100%); div.style.padding 2px 6px; div.style.whiteSpace nowrap; const label new CSS2DObject(div); label.position.copy(position); return label; } // 使用示例给第一个柱子顶部加数值标签 // const label createLabel(120, new THREE.Vector3(x, height 0.4, z)); // scene.add(label);CSS2DRenderer有个天生的问题DOM元素始终在最上层无法被柱子遮挡视觉上有时候会穿模。比如视角转到柱子背后标签依然浮在最前面。解决办法是把标签透明度跟遮挡关系挂钩虽然麻烦但视觉效果会好很多。我在项目中封装了一个简单的遮挡检测每帧发射一条从相机到标签位置的射线如果有柱子遮挡就给标签加半透明样式。3.4 射线拾取与交互反馈图表如果没有交互数值就只能靠猜。Three.js里做鼠标悬停高亮核心是Raycaster射线检测。思路是鼠标移动时发射一条射线检测是否击中柱子击中后把柱子材质换成高亮状态同时显示带数值的Tooltip。const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); function onMouseMove(event) { mouse.x (event.clientX / window.innerWidth) * 2 - 1; mouse.y -(event.clientY / window.innerHeight) * 2 1; } function updateRaycast() { raycaster.setFromCamera(mouse, camera); const intersects raycaster.intersectObjects(boxes, false); if (intersects.length 0) { const selected intersects[0].object; selected.material.emissiveIntensity 0.45; selected.material.opacity 1; document.body.style.cursor pointer; // 这里可以调用一个函数显示tooltip内容从selected.userData里读取 } else { resetAllMaterials(); document.body.style.cursor default; } } window.addEventListener(mousemove, onMouseMove, false);注意intersectObjects的第二个参数设为false表示不做递归检测。如果把场景里其他组传进去并且开true性能会明显下降因为射线要和所有子几何体做相交计算。建议单独维护一个boxes数组只存可点击的柱子检测效率最高。4. 让图表动起来的特效方案图表做出来了但用户真正会记住的是动态效果。这一章讲粒子系统、缓动动画和后处理辉光这是把普通三维图表变成特效大片的三个核心手段。4.1 粒子背景打造星空感Three.js的粒子系统是典型的GPU驱动CPU只需要把粒子的位置、颜色、大小传给显存后续渲染完全靠GPU跑。做粒子背景是性价比最高的特效因为我只需要生成几千个点的BufferGeometry剩下的交给Points材质。function createParticles() { const count 4000; const positions new Float32Array(count * 3); const colors new Float32Array(count * 3); for (let i 0; i count; i) { positions[i * 3] (Math.random() - 0.5) * 80; positions[i * 3 1] Math.random() * 30; positions[i * 3 2] (Math.random() - 0.5) * 80; const color new THREE.Color(); color.setHSL(0.6 Math.random() * 0.2, 0.8, 0.5 Math.random() * 0.4); colors[i * 3] color.r; colors[i * 3 1] color.g; colors[i * 3 2] color.b; } const geo new THREE.BufferGeometry(); geo.setAttribute(position, new THREE.BufferAttribute(positions, 3)); geo.setAttribute(color, new THREE.BufferAttribute(colors, 3)); const material new THREE.PointsMaterial({ size: 0.12, vertexColors: true, transparent: true, opacity: 0.85, blending: THREE.AdditiveBlending, depthWrite: false }); const points new THREE.Points(geo, material); scene.add(points); return points; }粒子特效有几个关键参数需要仔细选择。size值决定了粒子在屏幕上的视觉大小需要根据场景尺寸反复试AdditiveBlending是发光模式粒子重叠区域颜色会叠加变亮特别适合星空、烟花、光晕类特效depthWrite: false是必须的否则粒子之间会互相遮挡出现奇怪的排序问题。setHSL里色相范围取0.6到0.8之间蓝紫色域和深蓝背景天然协调如果是给红色系主题做背景可以把色相往0.95~0.1靠。4.2 柱子生长动画与缓动曲线柱子从地面弹出来比直接显示要有趣得多但动画没做好会显得廉价。关键是用TWEEN.js搭配Elastic.Out缓动曲线产生一种柱子弹簧式弹出的弹性感。import * as TWEEN from https://unpkg.com/tweenjs/tween.js18.6.4/dist/tween.esm.js; function animateBarGrowth(box, targetHeight, delay 0) { const startHeight 0.01; box.scale.y startHeight / targetHeight; new TWEEN.Tween(box.scale) .to({ y: 1 }, 900) .delay(delay) .easing(TWEEN.Easing.Elastic.Out) .onUpdate(() { box.position.y (targetHeight * box.scale.y) / 2; }) .start(); }这里用了scale.y从0.01倍增到1而不是直接改几何体高度原因是BoxGeometry创建后高度是固定的改scale避免了每次动画帧都重建几何体性能开销小很多。还有个细节位置y必须同步更新为当前高度的一半这个是从柱子底面贴地这个需求推出来的——让底部保持在地面上移动顶面向上生长。TWEEN.Easing.Elastic.Out的参数默认是1.0的弹性幅度跑起来会有很明显的回弹。如果你觉得太夸张可以用Easing.Back.Out回拉幅度小一些或者Sine.InOut平滑无弹跳。实战中我给产品大屏用的是Elastic.Out给数据分析后台用的是Back.Out视觉效果要和语境匹配。4.3 后处理辉光提升画面质感Three.js本身渲染出的画面是偏物理正确的也就是中规中矩。要做出那种霓虹灯、科幻电影里发光物体的效果靠材质里的emissive属性是不够的得配合后处理管线里的辉光Bloom滤镜。实现方式是用EffectComposer包装渲染流程插一个UnrealBloomPassconst composer new EffectComposer(renderer); const renderPass new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.6, // strength 强度 0.4, // radius 扩散半径 0.85 // threshold 阈值 ); composer.addPass(bloomPass);threshold参数表示发光阈值亮度低于这个值的像素不会被辉光影响。实际调参的经验是柱子材质emissiveIntensity控制在0.15以下背景网格保持低调阈值设为0.85这时候只有柱子的高光部分会发光地面网格不会糊成一片。如果threshold太低整个画面会白蒙蒙一片没有层次感。4.4 场景级扩展粒子玫瑰、火箭发射、3A级游戏特效如果只是柱状图特效发挥空间有限。Three.js真正让人上头的地方在于你可以把视觉完全玩出花来。我把热搜词里提到的几个方向一并做了实验分享下结论。粒子玫瑰启动器本质是一个数学曲线驱动的粒子动画按玫瑰线方程r a·cos(k·θ)生成粒子的极坐标位置再让粒子沿着曲线轨迹运动。实现思路很直接用BufferGeometry存放足够多的点在每一帧的requestAnimationFrame循环里更新position属性然后标记position.needsUpdate true。核心逻辑不复杂但需要注意粒子数量越少、单帧更新的数学运算越少这里建议控制在3000~5000点之间过多会让CPU计算成为瓶颈。火箭发射动画特效更考验对分组和嵌套变换的理解。我的做法是把火箭模型拆成箭体、尾焰粒子、光晕三部分箭体和尾焰装进同一个Group然后对Group做缓动位移尾焰粒子则通过自定义的粒子发射器不断生成新点并让粒子的生命周期逐步衰减。要实现上升-分离-爆炸这种连续剧情最方便的是用TWEEN的链式调用把一个动画的onComplete回调挂到下一个动画的start上。3A级游戏感的来源主要是Bloom辉光加动态相机抖动轻微随机抖动相机位置再加大量粒子三者叠加出来的化学效果非常明显。5. 性能优化与常见问题排查很多人的三维图表做到这里在本地跑得好好的一上大屏就开始卡。原因几乎都出在性能优化没到位。这一章我把优化重点和踩坑记录整理出来可以直接当速查表用。5.1 三个最容易踩的性能坑第一个坑是draw calls爆炸。每个Mesh、每个模型零件都会产生一个draw callGPU每切换一次渲染状态都有固定开销。场景里如果有1000个立方体就是1000个draw calls低端机器必卡。解决办法是合并几何体把相同材质的几何体用BufferGeometryUtils.mergeBufferGeometries合并成一个虽然损失了单个物体的控制能力但draw calls从1000次直接降到个位数。import { mergeBufferGeometries } from three/addons/utils/BufferGeometryUtils.js; // 把相同材质的柱子几何体合并 const geometries []; boxes.forEach(box { geometries.push(box.geometry); }); const mergedGeo mergeBufferGeometries(geometries); const mergedMesh new THREE.Mesh(mergedGeo, sharedMaterial);第二个坑是纹理贴图过大。图表类场景其实根本不需要大纹理很多细节是矢量线条实现的。如果你用了纹理尽量压缩到512x512或256x256省显存也省加载时间。第三个坑是每一帧都做复杂逻辑。有的同事喜欢在animate循环里做大量的数组排序、查找、字符串拼接这些代码一多帧率立刻崩。记住一个原则每帧只做渲染和必要的状态更新重计算全部放到事件回调或Web Worker里。5.2 常见问题排查记录我把实践里遇到的典型问题做成了一张表方便你遇到类似情况时快速定位。现象可能原因解决方式画面全黑相机位置在模型内部或朝向错误先打印camera.position和lookAt坐标确认视角朝向场景中心文字标签显示不出CSS2DRenderer未添加canvas到document在页面中appendChild(labelRenderer.domElement)注意不是renderer.domElement柱子有轻微闪烁闪烁面几何体面重叠或深度冲突把柱子之间留一点间距不要把两个柱面完全贴合粒子动画越跑越卡粒子系统每帧重新分配新数组初始化时分配固定大小的Float32Array只改数据不重新new阴影出现奇怪条纹阴影贴图分辨率不匹配缩小shadow.mapSize或使用PCFSoftShadowMap浏览器标签页切换后动画错乱requestAnimationFrame时间戳没处理用clock.getDelta()计算每帧时间差而不是直接按固定步长更新5.3 移动端适配与设备兼容我自己的项目里踩过最大的坑是移动端。iOS的Safari对WebGL的支持其实没问题但有两件事容易翻车一是devicePixelRatio过高导致掉帧二是触摸事件和OrbitControls手势冲突。解决方案是检测到移动端时把像素比上限设成1.5同时开启controls的enablePan为false避免单指滑动触发平移而不是旋转。还有一些极端情况值得防一手WebGL上下文丢失。浏览器在显卡驱动异常或显存不足时会杀掉WebGL上下文Three.js会抛出webglcontextlost事件。我的项目里加了监听器一旦发生就弹出刷新提示并在事件恢复后重新初始化场景。别觉得这是小概率事件现场演示时遇到一次就够尴尬的。6. 封装复用的一点经验最后分享一个和工作流程相关的经验。做视觉型项目最怕的就是反复从零开始搭场景。我后来把所有公共模块提取成了独立的工具类项目之间直接复用开发效率提升非常明显。核心思路是三层分离第一层是SceneManager负责场景、相机、渲染器、控制器的创建和窗口自适应第二层是ChartFactory封装柱状图、散点图、折线图等常用图表的生成逻辑只暴露数据入口和样式配置第三层是EffectManager统一管理粒子背景、后处理管线、动画缓动。这套分层思路最大的价值是甲方想换配色、换字体、加新图表时只需要改配置项不用动核心代码。同时不同的项目可以快速组合出不同的方案。比如上个月的项目只用了柱状图和粒子背景这个月的项目加了火箭发射动画代码复用度大概七成。这比每次从零写要高效太多也让我有更多精力去打磨细节比如阴影软硬程度、辉光强度这些直接影响画面质感的东西。如果你刚开始做Three.js可视化我建议不要一开始就追求大而全的封装先把一个场景从零跑通再逐步抽象公共逻辑。等到你真的把一两个项目完整做下来自然就知道该把哪些代码放进公共模块了。这种先做加法再做减法的方式对于复杂系统的演进来说是最稳妥的。本文还有配套的精品资源点击获取