登录学习Three.js--柱状图
学习Three.js--柱状图
前置核心说明
开发目标
基于Three.js实现ECharts标准风格的3D柱状图，还原ECharts的视觉特征（配色、标签样式、坐标轴风格），同时具备3D场景的交互性与真实光影效果，核心能力包括：
- 视觉风格还原：精准复刻ECharts柱状图的配色、坐标轴样式、标签样式（轴刻度、轴名称、柱顶数值），兼顾3D立体感与2D可视化的简洁性；
- 3D场景构建：通过几何体、材质、光照系统打造真实的3D视觉效果，阴影系统增强立体感，避免3D场景的平面化；
- 2D标签渲染：借助CSS2D渲染器实现灵活的文字标签，解决Three.js原生文字渲染样式受限的问题，贴合ECharts的标签风格；
- 流畅交互体验：通过轨道控制器实现360°拖拽旋转、滚轮缩放，且启用阻尼效果提升交互顺滑度；
- 响应式适配：适配不同屏幕尺寸，保证柱状图在PC/平板等设备上无拉伸变形；
- 循环动画驱动：通过帧动画循环维持交互阻尼与场景渲染的流畅性。
核心技术栈（关键知识点）
| 技术点 | 作用 |
|---|---|
THREE.Scene/Camera/Renderer |
搭建3D场景基础框架，定义视角、渲染尺寸、抗锯齿等核心属性，是所有3D效果的载体 |
THREE.OrbitControls |
实现3D场景的轨道交互（拖拽旋转、滚轮缩放），启用阻尼让交互更自然，适配3D柱状图的查看需求 |
CSS2DRenderer/CSS2DObject |
将HTML/CSS创建的文字标签（轴刻度、柱顶数值）绑定到3D空间坐标，实现灵活的样式控制，还原ECharts标签风格 |
THREE.MeshStandardMaterial/LineBasicMaterial |
分别实现几何体（柱子、地面）的物理材质（支持光影）和线条（坐标轴）的基础材质，保证视觉质感 |
THREE.BoxGeometry/CircleGeometry/BufferGeometry |
构建柱子（立方体）、地面（圆形）、坐标轴（线条）的几何形态，是3D物体的形状基础 |
THREE.DirectionalLight/AmbientLight/PointLight |
组合环境光、方向光、点光源，打造分层级的光照效果，增强3D柱子的立体感与真实感 |
THREE.ShadowMap（阴影系统） |
开启软阴影并配置阴影参数，让柱子投射自然阴影到地面，提升场景的真实度 |
响应式窗口监听（resize事件） |
动态更新相机比例与渲染器尺寸，保证柱状图在不同屏幕下无拉伸变形 |
requestAnimationFrame |
驱动动画循环，维持轨道控制器阻尼更新与场景渲染的流畅性（60帧/秒） |
核心开发流程
graph TD
A["初始化场景/相机/渲染器/轨道控制器"] --> B["初始化CSS2D渲染器（标签渲染）"]
B --> C["构建光照系统（环境光+主光源+辅助光）"]
C --> D["定义图表数据与视觉配置参数"]
D --> E["构建地面与网格辅助线（视觉锚点）"]
E --> F["构建坐标轴系统（X/Y轴+刻度+名称标签）"]
F --> G["构建柱状图主体（几何体+材质+柱顶数值标签）"]
G --> H["添加辅助线/装饰元素（Z轴短线、原点装饰）"]
H --> I["绑定窗口resize事件（响应式适配）"]
I --> J["启动动画循环（更新控制器+渲染场景）"]
分步开发详解
步骤1：基础环境搭建（场景/相机/渲染器/控制器）
搭建Three.js 3D场景的核心框架，为柱状图提供基础的展示载体与交互能力，兼顾视角合理性与渲染清晰度。
1.1 核心代码（对应原代码1）
// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf5f7fa); // 柔和灰白背景，贴合ECharts容器
const camera = new THREE.PerspectiveCamera(
45, // 更小视角，减少畸变，更接近2D感
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(9, 7, 14);
camera.lookAt(4, 3, 0);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 开启阴影，更真实
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// 轨道控制器，带阻尼
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.autoRotate = false;
controls.enableZoom = true;
controls.target.set(4, 3, 0);
controls.minDistance = 8;
controls.maxDistance = 30;
1.2 关键说明
-
相机参数优化：
- 视角
45°：相比默认的75°，更小的视角减少3D畸变，让柱状图更接近ECharts的2D视觉风格，同时保留3D纵深； - 位置
(9,7,14)+注视点(4,3,0)：采用“斜上方俯视”视角，既可以清晰看到柱子的高度与X轴分类，又能体现3D立体感，避免视角过平/过陡导致的视觉失衡。
- 视角
-
渲染器核心配置：
-
antialias: true：开启抗锯齿，让柱子边缘、坐标轴线条更细腻，避免“锯齿边”； -
shadowMap.type = PCFSoftShadowMap：启用软阴影，让柱子投射的阴影边缘更柔和，贴合真实物理效果，避免硬阴影的生硬感； -
setPixelRatio：适配Retina屏幕，保证高清渲染，标签文字与柱子细节无模糊。
-
-
轨道控制器优化：
- 阻尼系数
0.06：拖拽旋转场景后，控制器会自然减速，交互更顺滑； - 缩放范围
8~30：限制最小/最大缩放距离，避免缩放过近导致柱子遮挡、过远导致细节丢失； -
autoRotate: false：关闭自动旋转，让用户自主控制查看视角，更贴合数据可视化的使用场景。
- 阻尼系数
步骤2：CSS2D渲染器初始化（标签渲染核心）
初始化CSS2D渲染器，为坐标轴标签、柱顶数值标签提供渲染载体，解决Three.js原生文字渲染样式不灵活的问题。
2.1 核心代码（对应原代码2）
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.left = '0px';
labelRenderer.domElement.style.pointerEvents = 'none'; // 不阻挡点击
document.body.appendChild(labelRenderer.domElement);
2.2 关键说明
-
CSS2D渲染器的核心价值：将HTML元素（
<div>标签）映射到3D空间坐标，既能利用CSS灵活控制文字样式（颜色、字体、背景、圆角等），又能跟随3D场景的旋转/缩放同步更新位置，完美还原ECharts的标签风格。 -
pointerEvents: none：关闭标签的鼠标事件响应，避免标签遮挡轨道控制器的交互（如拖拽旋转时点击到标签无反应）。
步骤3：光照系统构建（光影质感核心）
组合环境光、方向光、点光源，打造分层级的光照效果，增强柱子的立体感，同时避免光线过亮/过暗导致的视觉失衡。
3.1 核心代码（对应原代码3）
// 环境光提供基础照明
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
// 主光源 - 产生阴影
const mainLight = new THREE.DirectionalLight(0xfff5e6, 1.0);
mainLight.position.set(8, 12, 8);
mainLight.castShadow = true;
mainLight.receiveShadow = true;
mainLight.shadow.mapSize.width = 1024;
mainLight.shadow.mapSize.height = 1024;
mainLight.shadow.camera.near = 0.5;
mainLight.shadow.camera.far = 30;
mainLight.shadow.camera.left = -15;
mainLight.shadow.camera.right = 15;
mainLight.shadow.camera.top = 15;
mainLight.shadow.camera.bottom = -15;
scene.add(mainLight);
// 辅助背光，增加柱子暗部细节
const backLight = new THREE.DirectionalLight(0xe0f0ff, 0.5);
backLight.position.set(-5, 0, 10);
scene.add(backLight);
// 补充侧光
const fillLight = new THREE.PointLight(0xccddff, 0.3);
fillLight.position.set(2, 5, 12);
scene.add(fillLight);
3.2 关键说明
-
光照分层逻辑：
- 环境光（强度
0.6）：提供基础照明，避免场景暗部全黑，保证所有元素的基础可见性； - 主方向光（强度
1.0）：模拟主光源（如自然光），同时开启阴影，是柱子立体感的核心； - 背光（强度
0.5）：补充柱子暗部细节，避免暗部“死黑”，提升光影层次感； - 点光源（强度
0.3）：柔和填充侧光，进一步优化光影过渡，让柱子的材质质感更真实。
- 环境光（强度
-
阴影参数优化：
-
shadow.mapSize = 1024x1024：设置阴影贴图分辨率，数值越高阴影越清晰（但性能开销越大），1024是“清晰度+性能”的平衡值； - 阴影相机范围
(-15~15)：覆盖整个柱状图场景，保证所有柱子的阴影都能被正确渲染。
-
步骤4：图表数据与配置参数定义
定义柱状图的业务数据与视觉配置参数，实现“数据与样式解耦”，便于后续调整视觉风格。
4.1 核心代码（对应原代码4）
// 图表数据（ECharts 标准：一月到六月，数值清晰）
const chartData = [
{ label: '一月', value: 2 },
{ label: '二月', value: 3 },
{ label: '三月', value: 4 },
{ label: '四月', value: 5 },
{ label: '五月', value: 6 },
{ label: '六月', value: 7 }
];
// 配置参数 —— 完全符合柱状图审美
const config = {
columnWidth: 0.9, // 柱子宽一些，更饱满
columnDepth: 0.9, // Z轴厚度
yMax: 10, // Y轴最大值固定为10，留白更ECharts（原数据最大7，顶部留空间显示数值）
xStep: 2.1, // 柱间距适中
yStep: 2, // Y轴刻度步长
axisColor: 0x5d6d7e, // 轴体深蓝灰，专业感
axisLineWidth: 2.2, // 轴线条加粗
columnColors: [0x5470c6, 0x91cc75, 0xfac858, 0xee6666, 0x73c0de, 0x3ba272], // ECharts 经典配色
columnXOffset: 1.8, // 柱子起点与Y轴留白，避免拥挤（ECharts风格）
groundOpacity: 0.15, // 地面极浅，仅作视觉参考
shadowOpacity: 0.3
};
4.2 关键说明
-
数据结构设计：
chartData采用“标签+数值”的对象数组，贴合ECharts的数据格式，便于后续对接真实业务数据； -
配置参数的ECharts适配：
-
yMax: 10：预留顶部空间（原数据最大7），避免柱顶数值标签与柱子顶部重叠，符合ECharts的留白审美； -
columnColors：使用ECharts经典配色数组，按柱子循环使用，保证视觉风格一致； -
xStep: 2.1/columnXOffset: 1.8：控制柱子间距与X轴偏移，避免柱子与Y轴拥挤，贴合ECharts的轴边距风格。
-
步骤5：地面与网格辅助线构建
构建地面几何体与网格辅助线，为3D场景提供视觉锚点，增强坐标感，同时接收柱子的阴影。
5.1 核心代码（对应原代码5）
// 地面（接收阴影，视觉锚点）
const groundGeometry = new THREE.CircleGeometry(30, 32); // 圆形地面更柔和
const groundMaterial = new THREE.MeshStandardMaterial({
color: 0xe9ecef,
roughness: 0.8,
metalness: 0.1,
transparent: true,
opacity: config.groundOpacity,
side: THREE.DoubleSide
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -0.1;
ground.receiveShadow = true;
scene.add(ground);
// 添加一个极细的网格辅助线（可选，增强坐标感，但不抢眼）
const gridHelper = new THREE.GridHelper(26, 20, 0x9aa6b2, 0xcbd5e0);
gridHelper.position.y = -0.09;
scene.add(gridHelper);
5.2 关键说明
-
地面设计优化：
- 圆形地面（
CircleGeometry）：相比方形地面更柔和，避免直角的生硬感； - 透明度
0.15：地面仅作视觉锚点，不抢夺柱状图的视觉焦点； -
receiveShadow: true：开启阴影接收，让柱子的阴影投射到地面，增强3D真实感。
- 圆形地面（
-
网格辅助线：
- 位置
y=-0.09：略高于地面，避免与地面重叠导致的视觉混乱； - 浅灰色调：增强坐标感的同时，不干扰主视觉，符合数据可视化“辅助元素不抢戏”的原则。
- 位置
步骤6：坐标轴系统构建（X/Y轴+刻度+标签）
构建符合ECharts风格的X/Y坐标轴，包括轴线、刻度线、分类/数值标签、轴名称，是数据可视化的核心骨架。
6.1 核心代码（对应原代码6，以X轴为例）
// 坐标轴材质
const axisMaterial = new THREE.LineBasicMaterial({
color: config.axisColor,
linewidth: config.axisLineWidth
});
// ===== X轴 =====
const xAxisStart = -0.5;
const xAxisEnd = (chartData.length - 1) * config.xStep + config.columnXOffset + 1.2;
const xAxisPoints = [new THREE.Vector3(xAxisStart, 0, 0), new THREE.Vector3(xAxisEnd, 0, 0)];
const xAxisGeo = new THREE.BufferGeometry().setFromPoints(xAxisPoints);
const xAxisLine = new THREE.Line(xAxisGeo, axisMaterial);
scene.add(xAxisLine);
// X轴刻度与分类标签
chartData.forEach((item, i) => {
const xPos = i * config.xStep + config.columnXOffset;
// 刻度线（向下，长度0.6，清晰可见）
const tickPoints = [
new THREE.Vector3(xPos, 0, 0),
new THREE.Vector3(xPos, -0.6, 0)
];
const tickGeo = new THREE.BufferGeometry().setFromPoints(tickPoints);
const tick = new THREE.Line(tickGeo, axisMaterial);
scene.add(tick);
// 分类标签 (CSS2D) —— ECharts风格：居中，字体适中
const labelDiv = document.createElement('div');
labelDiv.className = 'axis-tick-label';
labelDiv.textContent = item.label;
labelDiv.style.transform = 'translate(-50%, 0)';
labelDiv.style.fontWeight = '500';
labelDiv.style.color = '#2e4053';
const labelObj = new CSS2DObject(labelDiv);
labelObj.position.set(xPos, -1.1, 0);
scene.add(labelObj);
});
// X轴名称 “月份” (ECharts标准：置于轴末端附近，加粗)
const xNameDiv = document.createElement('div');
xNameDiv.className = 'axis-name-label';
xNameDiv.textContent = '月份';
xNameDiv.style.transform = 'translate(-50%, 0)';
const xNameLabel = new CSS2DObject(xNameDiv);
xNameLabel.position.set(xAxisEnd - 0.3, -1.8, 0);
scene.add(xNameLabel);
6.2 关键说明
-
轴线长度自适应：
xAxisEnd通过chartData.length动态计算，保证X轴长度适配数据条数，避免硬编码导致的适配问题； -
刻度线与标签对齐：
- 刻度线长度
0.6：清晰可见且不突兀，符合ECharts的刻度线尺寸； - 标签位置
y=-1.1：位于刻度线下方，避免与轴线/刻度线重叠； -
transform: translate(-50%, 0)：让标签水平居中对齐刻度线，保证视觉整齐；
- 刻度线长度
- 轴名称样式：采用加粗、深色、末端放置的样式，完全复刻ECharts的轴名称风格，增强数据可读性。
步骤7：柱状图主体构建（几何体+材质+标签）
构建3D柱子几何体，配置贴合ECharts风格的材质，同时添加柱顶数值标签，是数据可视化的核心展示层。
7.1 核心代码（对应原代码7）
chartData.forEach((item, i) => {
const xPos = i * config.xStep + config.columnXOffset;
const height = item.value; // 实际数值
const color = config.columnColors[i % config.columnColors.length];
// 柱子材质：轻微光泽，略带透明感但清晰
const columnMaterial = new THREE.MeshStandardMaterial({
color: color,
roughness: 0.45,
metalness: 0.2,
emissive: new THREE.Color(color).multiplyScalar(0.1),
emissiveIntensity: 0.2,
transparent: true,
opacity: 0.95
});
const columnGeo = new THREE.BoxGeometry(
config.columnWidth,
height,
config.columnDepth
);
const column = new THREE.Mesh(columnGeo, columnMaterial);
column.castShadow = true;
column.receiveShadow = true;
column.position.set(xPos, height / 2, 0);
scene.add(column);
// 柱顶数值标签（核心要求：每一个柱子顶部显示相应的值，ECharts 风格）
const valueDiv = document.createElement('div');
valueDiv.className = 'bar-value-label';
valueDiv.textContent = item.value; // 简洁显示数值
// 仿ECharts: 白色底框+红褐色字，小圆角
valueDiv.style.background = 'rgba(255, 255, 255, 0.8)';
valueDiv.style.border = '1px solid ' + new THREE.Color(color).getStyle();
valueDiv.style.color = new THREE.Color(color).multiplyScalar(0.6).getStyle();
const valueLabel = new CSS2DObject(valueDiv);
// 标签置于柱子顶部上方0.8处，醒目不重叠
valueLabel.position.set(xPos, height + 0.8, 0);
scene.add(valueLabel);
// 柱顶圆点装饰
const topDotGeo = new THREE.SphereGeometry(0.1);
const topDotMat = new THREE.MeshStandardMaterial({ color: color, emissive: color, emissiveIntensity: 0.2 });
const topDot = new THREE.Mesh(topDotGeo, topDotMat);
topDot.position.set(xPos, height, 0);
topDot.castShadow = false;
scene.add(topDot);
});
7.2 关键说明
-
柱子位置计算：
position.set(xPos, height / 2, 0)，Three.js的立方体几何体锚点在中心，因此Y轴位置需设置为height/2，保证柱子底部对齐X轴（y=0）； -
材质风格优化：
-
roughness: 0.45/metalness: 0.2：轻微的金属光泽，让柱子有质感但不刺眼； -
emissive：轻微自发光，增强柱子的视觉层次感，贴合ECharts的高亮风格； - 透明度
0.95：略带透明感，避免柱子过于厚重，符合现代数据可视化的轻盈风格；
-
-
柱顶标签优化：
- 位置
height + 0.8：位于柱子顶部上方，避免与柱子重叠； - 背景半透+圆角：复刻ECharts的数值标签样式，增强可读性；
- 颜色适配：标签边框/文字颜色与柱子颜色联动，保证视觉统一性。
- 位置
步骤8：辅助线与装饰元素构建
添加Z轴短线、背面辅助线等装饰元素，增强3D场景的方位感，同时不干扰主视觉。
8.1 核心代码（对应原代码8）
// Z轴短线示意（虽然2D柱状图，但3D空间给出方位）
const zAxisPoints = [new THREE.Vector3(0, 0, -2), new THREE.Vector3(0, 0, 2)];
const zAxisGeo = new THREE.BufferGeometry().setFromPoints(zAxisPoints);
const zAxisLine = new THREE.Line(zAxisGeo, new THREE.LineBasicMaterial({ color: 0xb0bec5, linewidth: 1 }));
scene.add(zAxisLine);
// 背面辅助线，增加空间感
const helperExtent = 14;
const axisHelperMaterial = new THREE.LineBasicMaterial({ color: 0xd0d8e0, linewidth: 1 });
const backLine1 = [new THREE.Vector3(-1, 0, -1.5), new THREE.Vector3(xAxisEnd, 0, -1.5)];
const backLineGeo1 = new THREE.BufferGeometry().setFromPoints(backLine1);
const backLineObj1 = new THREE.Line(backLineGeo1, axisHelperMaterial);
scene.add(backLineObj1);
8.2 关键说明
- Z轴短线：提示3D场景的纵深方向，让用户感知柱子的厚度（Z轴），避免误以为是纯2D图表；
- 背面辅助线：浅灰色细线条，增强场景的空间层次感，同时不抢夺柱状图的视觉焦点。
步骤9：响应式窗口适配
监听窗口尺寸变化，动态更新相机比例、渲染器尺寸，保证柱状图在不同屏幕下无拉伸变形。
9.1 核心代码（对应原代码9）
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.setSize(window.innerWidth, window.innerHeight);
}
9.2 关键说明
-
camera.updateProjectionMatrix()：窗口尺寸变化后，相机的宽高比会修改，必须调用该方法更新投影矩阵，否则柱状图会出现拉伸变形； - 同步更新labelRenderer尺寸：保证CSS2D标签与3D场景同步适配，避免标签位置偏移。
步骤10：动画循环驱动
通过requestAnimationFrame驱动动画循环，维持轨道控制器阻尼更新与场景渲染的流畅性。
10.1 核心代码（对应原代码10）
function animate() {
requestAnimationFrame(animate);
controls.update(); // 启用阻尼后需要每帧更新
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
}
animate();
10.2 关键说明
-
controls.update()：轨道控制器启用阻尼后，必须在每帧动画中调用该方法，否则阻尼效果失效； -
双渲染器调用：同时渲染3D场景（
renderer）和CSS2D标签（labelRenderer），保证标签与3D场景同步显示。
核心技术深度解析
1. CSS2D标签渲染的核心逻辑
CSS2D标签是还原ECharts风格的关键，其核心渲染逻辑如下：
graph LR
A["创建HTML div标签（设置样式/文字）"] --> B["封装为CSS2DObject（绑定3D坐标）"]
B --> C["添加到Three.js场景"] --> D["动画循环中调用labelRenderer.render"]
D --> E["标签随3D场景旋转/缩放同步更新位置"]
- 核心优势：相比Three.js原生的
TextGeometry，CSS2D标签支持任意CSS样式（背景、圆角、文字阴影、毛玻璃等），完全复刻ECharts的标签风格，且渲染性能更高。
2. 光影系统的层次感实现
柱状图的3D立体感核心来自分层光照设计，其逻辑如下：
graph LR
A["环境光（基础照明，0.6强度）"] --> B["主方向光（核心光影+阴影，1.0强度）"]
B --> C["背光（补充暗部细节，0.5强度）"] --> D["点光源（柔和填充侧光，0.3强度）"]
D --> E["柱子材质（roughness/metalness/emissive）"] --> F["自然的3D光影质感"]
- 核心亮点：主光源负责阴影和主要光照，背光和点光源补充细节，避免暗部死黑，让柱子的材质质感更真实。
3. ECharts风格视觉还原的核心
代码通过三大维度精准复刻ECharts风格：
- 配色维度：使用ECharts经典配色数组，轴体采用深蓝灰（专业感），标签采用分级配色（刻度浅灰、轴名深灰、数值醒目色）；
- 布局维度：Y轴预留顶部空间、柱子与Y轴留白、刻度线长度统一、标签位置对齐，完全贴合ECharts的布局审美；
- 样式维度：标签的文字阴影、半透背景、圆角，柱子的轻微光泽/透明感，轴线条加粗，均复刻ECharts的视觉细节。
核心参数速查表（快速调整视觉/交互效果）
| 参数分类 | 参数名 | 当前取值 | 核心作用 | 修改建议 |
|---|---|---|---|---|
| 场景配置 | 相机视角 camera.fov
|
45 | 控制3D场景的视角，越小畸变越少 | 改为30：更接近2D视觉；改为60：3D纵深感更强 |
| 场景配置 | 相机位置 camera.position
|
(9,7,14) | 控制观察视角（斜上方俯视） | 改为(0,10,15)：正面视角；改为(15,5,10)：侧方视角 |
| 视觉配置 | 柱子尺寸 columnWidth/columnDepth
|
0.9/0.9 | 控制柱子的宽度/厚度 | 改为0.7/0.7：柱子更纤细；改为1.2/1.2：柱子更粗壮 |
| 视觉配置 | 柱间距 xStep
|
2.1 | 控制X轴上柱子的间距 | 改为1.5：柱子更密集；改为3.0：柱子更稀疏 |
| 视觉配置 | Y轴最大值 yMax
|
10 | 控制Y轴高度（预留标签空间） | 改为8：Y轴更紧凑；改为15：Y轴更宽松 |
| 视觉配置 | 轴线条宽度 axisLineWidth
|
2.2 | 控制坐标轴线的粗细 | 改为1.5：轴线更细；改为3.0：轴线更粗 |
| 数据配置 | 图表数据 chartData
|
6组（一月-六月） | 柱状图的业务数据 | 新增/删除数组元素：适配更多/更少分类；修改value：调整柱子高度 |
| 光照配置 | 主光源强度 mainLight.intensity
|
1.0 | 控制主光源的亮度 | 改为0.7：光线更柔和；改为1.5：光线更明亮 |
| 交互配置 | 控制器阻尼 dampingFactor
|
0.06 | 控制拖拽旋转的顺滑度 | 改为0.03：阻尼更弱（旋转更快）；改为0.1：阻尼更强（旋转更慢） |
| 交互配置 | 缩放范围 minDistance/maxDistance
|
8/30 | 控制滚轮缩放的最小/最大距离 | 改为5/20：缩放范围更小；改为10/40：缩放范围更大 |
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Three.js 柱状图 · ECharts 标准风格</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: "Microsoft YaHei", sans-serif;
}
canvas {
display: block;
}
/* 坐标轴标签：清爽灰色，无干扰 */
.axis-tick-label {
color: #4a4a4a;
font-size: 13px;
font-weight: normal;
white-space: nowrap;
pointer-events: none;
text-shadow: 0 0 2px rgba(255,255,255,0.8);
}
/* 轴名称标签 (ECharts 风格：加粗，深色) */
.axis-name-label {
color: #2c3e50;
font-size: 16px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
text-shadow: 0 0 3px rgba(255,255,255,0.9);
}
/* 柱顶数值标签：醒目红褐色，类似ECharts 强调 */
.bar-value-label {
color: #c0392b;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
text-shadow: 0 0 5px rgba(255,255,255,0.8);
background: rgba(255, 255, 255, 0.6);
padding: 2px 6px;
border-radius: 10px;
border: 1px solid rgba(192, 57, 43, 0.3);
backdrop-filter: blur(2px);
}
/* 简单辅助：去掉滚动条，干净视图 */
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://esm.sh/three@0.174.0';
import { OrbitControls } from 'https://esm.sh/three@0.174.0/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'https://esm.sh/three@0.174.0/examples/jsm/renderers/CSS2DRenderer.js';
// ---------- 1. 初始化场景、相机、渲染器（增强抗锯齿与性能）----------
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf5f7fa); // 柔和灰白背景，类似ECharts容器
const camera = new THREE.PerspectiveCamera(
45, // 更小视角，减少畸变，更接近2D感
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(9, 7, 14);
camera.lookAt(4, 3, 0);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 开启阴影，更真实
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// 轨道控制器，带阻尼
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.autoRotate = false;
controls.enableZoom = true;
controls.target.set(4, 3, 0);
controls.minDistance = 8;
controls.maxDistance = 30;
// ---------- 2. CSS2渲染器（用于所有文字标签：轴刻度、轴名称、柱顶数值）----------
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.left = '0px';
labelRenderer.domElement.style.pointerEvents = 'none'; // 不阻挡点击
document.body.appendChild(labelRenderer.domElement);
// ---------- 3. 灯光系统（呈现立体感，但不刺眼）----------
// 环境光提供基础照明
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
// 主光源 - 产生阴影
const mainLight = new THREE.DirectionalLight(0xfff5e6, 1.0);
mainLight.position.set(8, 12, 8);
mainLight.castShadow = true;
mainLight.receiveShadow = true;
mainLight.shadow.mapSize.width = 1024;
mainLight.shadow.mapSize.height = 1024;
mainLight.shadow.camera.near = 0.5;
mainLight.shadow.camera.far = 30;
mainLight.shadow.camera.left = -15;
mainLight.shadow.camera.right = 15;
mainLight.shadow.camera.top = 15;
mainLight.shadow.camera.bottom = -15;
scene.add(mainLight);
// 辅助背光，增加柱子暗部细节
const backLight = new THREE.DirectionalLight(0xe0f0ff, 0.5);
backLight.position.set(-5, 0, 10);
scene.add(backLight);
// 补充侧光
const fillLight = new THREE.PointLight(0xccddff, 0.3);
fillLight.position.set(2, 5, 12);
scene.add(fillLight);
// ---------- 4. 图表数据（ECharts 标准：一月到六月，数值清晰）----------
const chartData = [
{ label: '一月', value: 2 },
{ label: '二月', value: 3 },
{ label: '三月', value: 4 },
{ label: '四月', value: 5 },
{ label: '五月', value: 6 },
{ label: '六月', value: 7 }
];
// 配置参数 —— 完全符合柱状图审美
const config = {
columnWidth: 0.9, // 柱子宽一些，更饱满
columnDepth: 0.9, // Z轴厚度
yMax: 10, // Y轴最大值固定为10，留白更ECharts（原数据最大7，顶部留空间显示数值）
xStep: 2.1, // 柱间距适中
yStep: 2, // Y轴刻度步长
axisColor: 0x5d6d7e, // 轴体深蓝灰，专业感
axisLineWidth: 2.2, // 轴线条加粗
columnColors: [0x5470c6, 0x91cc75, 0xfac858, 0xee6666, 0x73c0de, 0x3ba272], // ECharts 经典配色
columnXOffset: 1.8, // 柱子起点与Y轴留白，避免拥挤（ECharts风格）
groundOpacity: 0.15, // 地面极浅，仅作视觉参考
shadowOpacity: 0.3
};
// ---------- 5. 地面（接收阴影，视觉锚点）----------
const groundGeometry = new THREE.CircleGeometry(30, 32); // 圆形地面更柔和
const groundMaterial = new THREE.MeshStandardMaterial({
color: 0xe9ecef,
roughness: 0.8,
metalness: 0.1,
transparent: true,
opacity: config.groundOpacity,
side: THREE.DoubleSide
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -0.1;
ground.receiveShadow = true;
scene.add(ground);
// 添加一个极细的网格辅助线（可选，增强坐标感，但不抢眼）
const gridHelper = new THREE.GridHelper(26, 20, 0x9aa6b2, 0xcbd5e0);
gridHelper.position.y = -0.09;
scene.add(gridHelper);
// ---------- 6. 坐标轴系统（完全参照ECharts：轴线明显，刻度清晰，轴标签明确）----------
const axisMaterial = new THREE.LineBasicMaterial({
color: config.axisColor,
linewidth: config.axisLineWidth
});
// ===== X轴 =====
const xAxisStart = -0.5;
const xAxisEnd = (chartData.length - 1) * config.xStep + config.columnXOffset + 1.2;
const xAxisPoints = [new THREE.Vector3(xAxisStart, 0, 0), new THREE.Vector3(xAxisEnd, 0, 0)];
const xAxisGeo = new THREE.BufferGeometry().setFromPoints(xAxisPoints);
const xAxisLine = new THREE.Line(xAxisGeo, axisMaterial);
scene.add(xAxisLine);
// X轴刻度与分类标签
chartData.forEach((item, i) => {
const xPos = i * config.xStep + config.columnXOffset;
// 刻度线（向下，长度0.6，清晰可见）
const tickPoints = [
new THREE.Vector3(xPos, 0, 0),
new THREE.Vector3(xPos, -0.6, 0)
];
const tickGeo = new THREE.BufferGeometry().setFromPoints(tickPoints);
const tick = new THREE.Line(tickGeo, axisMaterial);
scene.add(tick);
// 分类标签 (CSS2D) —— ECharts风格：居中，字体适中
const labelDiv = document.createElement('div');
labelDiv.className = 'axis-tick-label';
labelDiv.textContent = item.label;
labelDiv.style.transform = 'translate(-50%, 0)';
labelDiv.style.fontWeight = '500';
labelDiv.style.color = '#2e4053';
const labelObj = new CSS2DObject(labelDiv);
labelObj.position.set(xPos, -1.1, 0);
scene.add(labelObj);
});
// X轴名称 “月份” (ECharts标准：置于轴末端附近，加粗)
const xNameDiv = document.createElement('div');
xNameDiv.className = 'axis-name-label';
xNameDiv.textContent = '月份';
xNameDiv.style.transform = 'translate(-50%, 0)';
const xNameLabel = new CSS2DObject(xNameDiv);
xNameLabel.position.set(xAxisEnd - 0.3, -1.8, 0);
scene.add(xNameLabel);
// ===== Y轴 =====
const yAxisStart = 0;
const yAxisEnd = config.yMax;
const yAxisPoints = [new THREE.Vector3(0, yAxisStart, 0), new THREE.Vector3(0, yAxisEnd, 0)];
const yAxisGeo = new THREE.BufferGeometry().setFromPoints(yAxisPoints);
const yAxisLine = new THREE.Line(yAxisGeo, axisMaterial);
scene.add(yAxisLine);
// Y轴刻度和数值标签（0到10，步长2，完全展示）
for (let val = 0; val <= config.yMax; val += config.yStep) {
// 刻度线（向左，长度0.6）
const tickPoints = [
new THREE.Vector3(0, val, 0),
new THREE.Vector3(-0.6, val, 0)
];
const tickGeo = new THREE.BufferGeometry().setFromPoints(tickPoints);
const tick = new THREE.Line(tickGeo, axisMaterial);
scene.add(tick);
// 数值标签
const labelDiv = document.createElement('div');
labelDiv.className = 'axis-tick-label';
labelDiv.textContent = val;
labelDiv.style.transform = 'translate(0, -50%)';
labelDiv.style.fontWeight = '500';
const labelObj = new CSS2DObject(labelDiv);
labelObj.position.set(-1.2, val, 0);
scene.add(labelObj);
}
// Y轴名称 “数值” (ECharts风格：垂直居中，加粗)
const yNameDiv = document.createElement('div');
yNameDiv.className = 'axis-name-label';
yNameDiv.textContent = '数值';
yNameDiv.style.transform = 'translate(0, -50%)';
const yNameLabel = new CSS2DObject(yNameDiv);
yNameLabel.position.set(-2.4, config.yMax / 2, 0);
scene.add(yNameLabel);
// ===== 原点装饰（加强视觉）=====
const originDotGeo = new THREE.SphereGeometry(0.08);
const originDotMat = new THREE.MeshStandardMaterial({ color: 0x2c3e50, emissive: 0x1a2630, emissiveIntensity: 0.2 });
const originDot = new THREE.Mesh(originDotGeo, originDotMat);
originDot.position.set(0, 0, 0);
scene.add(originDot);
// ---------- 7. 柱状图主体（每个柱子带阴影、柱顶数值标签，严格按ECharts标准）----------
chartData.forEach((item, i) => {
const xPos = i * config.xStep + config.columnXOffset;
const height = item.value; // 实际数值
const color = config.columnColors[i % config.columnColors.length];
// 柱子材质：轻微光泽，略带透明感但清晰
const columnMaterial = new THREE.MeshStandardMaterial({
color: color,
roughness: 0.45,
metalness: 0.2,
emissive: new THREE.Color(color).multiplyScalar(0.1),
emissiveIntensity: 0.2,
transparent: true,
opacity: 0.95
});
const columnGeo = new THREE.BoxGeometry(
config.columnWidth,
height,
config.columnDepth
);
const column = new THREE.Mesh(columnGeo, columnMaterial);
column.castShadow = true;
column.receiveShadow = true;
column.position.set(xPos, height / 2, 0);
scene.add(column);
// ----- 柱顶数值标签（核心要求：每一个柱子顶部显示相应的值，ECharts 风格）-----
const valueDiv = document.createElement('div');
valueDiv.className = 'bar-value-label';
valueDiv.textContent = item.value; // 简洁显示数值
// 仿ECharts: 白色底框+红褐色字，小圆角
valueDiv.style.background = 'rgba(255, 255, 255, 0.8)';
valueDiv.style.border = '1px solid ' + new THREE.Color(color).getStyle();
valueDiv.style.color = new THREE.Color(color).multiplyScalar(0.6).getStyle();
const valueLabel = new CSS2DObject(valueDiv);
// 标签置于柱子顶部上方0.8处，醒目不重叠
valueLabel.position.set(xPos, height + 0.8, 0);
scene.add(valueLabel);
// ----- 额外加一个微小的柱顶圆点，提升细节 (ECharts有时会有标记) -----
const topDotGeo = new THREE.SphereGeometry(0.1);
const topDotMat = new THREE.MeshStandardMaterial({ color: color, emissive: color, emissiveIntensity: 0.2 });
const topDot = new THREE.Mesh(topDotGeo, topDotMat);
topDot.position.set(xPos, height, 0);
topDot.castShadow = false;
scene.add(topDot);
});
// ---------- 8. 添加一个轻量的Z轴短线示意（虽然2D柱状图，但3D空间给出方位）----------
const zAxisPoints = [new THREE.Vector3(0, 0, -2), new THREE.Vector3(0, 0, 2)];
const zAxisGeo = new THREE.BufferGeometry().setFromPoints(zAxisPoints);
const zAxisLine = new THREE.Line(zAxisGeo, new THREE.LineBasicMaterial({ color: 0xb0bec5, linewidth: 1 }));
scene.add(zAxisLine);
// 添加微弱的辅助环境线框，不干扰主视觉
const helperExtent = 14;
const axisHelperMaterial = new THREE.LineBasicMaterial({ color: 0xd0d8e0, linewidth: 1 });
// 简单在背面加两根平行线，增加空间感（可选）
const backLine1 = [new THREE.Vector3(-1, 0, -1.5), new THREE.Vector3(xAxisEnd, 0, -1.5)];
const backLineGeo1 = new THREE.BufferGeometry().setFromPoints(backLine1);
const backLineObj1 = new THREE.Line(backLineGeo1, axisHelperMaterial);
scene.add(backLineObj1);
// ---------- 9. 响应式窗口----------
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.setSize(window.innerWidth, window.innerHeight);
}
// ---------- 10. 动画循环----------
function animate() {
requestAnimationFrame(animate);
controls.update(); // 启用阻尼后需要每帧更新
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
}
animate();
// 控制台提示
console.log('ECharts 风格柱状图已加载，坐标轴标签、柱顶数值完整展示');
</script>
</body>
</html>
总结与扩展建议
核心总结
- 视觉还原核心：通过CSS2D标签、ECharts经典配色、轴样式/布局优化，精准复刻ECharts柱状图的视觉风格，同时保留3D立体感；
- 光影构建核心：分层光照（环境光+主方向光+背光+点光源）+软阴影系统，打造真实的3D光影质感，避免场景平面化；
- 交互适配核心：轨道控制器阻尼优化+响应式窗口适配，保证3D交互的顺滑性与多设备的兼容性；
- 性能核心：通过合理的几何体/材质配置、阴影分辨率平衡，保证在普通设备上60帧流畅渲染。
扩展建议
-
动态数据更新：
- 新增
updateData函数，修改chartData后重新构建柱子几何体，实现数据动态刷新（如实时监控数据）； - 为柱子添加高度过渡动画，让数据更新时柱子平滑升降，提升视觉体验。
- 新增
-
多系列柱状图：
- 在Z轴方向扩展，为每个分类添加多个柱子（如每月的“销量”“利润”），实现多系列对比；
- 新增图例组件（CSS2D标签），标注不同系列的颜色与含义，贴合ECharts多系列图表风格。
-
交互增强：
- 添加tooltip交互：监听鼠标点击/悬浮事件，显示柱子的详细信息（如“一月：2（同比增长10%）”）；
- 柱子高亮效果：鼠标悬浮时修改柱子材质（如提高emissiveIntensity），增强交互反馈。
-
视觉主题切换：
- 新增主题配置（如浅色/深色主题），修改
scene.background、axisColor、columnColors等参数，实现一键切换； - 适配ECharts的官方主题（如dark、macarons），提升视觉多样性。
- 新增主题配置（如浅色/深色主题），修改
-
性能优化：
- 使用
InstancedMesh替代普通Mesh，批量渲染相同样式的柱子，减少DrawCall，支持更多分类数据； - 视锥体裁剪：剔除屏幕外的柱子/标签，减少渲染开销，适配大量数据场景。
- 使用
