在 数字孪生、智慧城市、工业监控 等领域，三维数据可视化（3D Data Visualization）正逐渐成为趋势。相比传统的 ECharts、D3.js2D 可视化，Three.js 让我们能在 Web 端实现更酷炫、更直观的 3D 数据展示。
本篇文章将结合 Three.js + Vue3 ，实现一个 3D 数据可视化大屏 ，涵盖 模型加载、动态数据更新、交互控制 等核心技术，适用于 智慧城市大屏、企业数据看板 等场景。
技术选型
- Three.js：主流 WebGL 库，用于渲染 3D 场景
- Vue3 + Vite：前端框架，提升开发效率
- GSAP：动画库，实现平滑的相机和对象过渡效果
- TWEEN.js：轻量级动画库，控制对象的渐变效果
- dat.GUI：开发调试工具，动态调整 3D 参数
3D 可视化大屏效果
我们将实现以下核心功能：
✅ 加载城市建筑模型：展示高楼、道路、桥梁等基础设施
✅ 数据点可视化 ：以 粒子、热力图、3D 柱状图 方式显示数据
✅ 交互控制：支持鼠标旋转、缩放、点击查看详情
✅ 动态数据更新 ：模拟实时数据变化 ，如交通流量、空气质量等
✅ 炫酷动画：相机飞跃、数据点波动等特效
项目初始化
先创建 Vue3 项目，并安装 Three.js：
sh
npm create vite@latest three-dashboard --template vue
cd three-dashboard
npm install three gsap @tweenjs/tween.js dat.gui然后在 src/components 目录下创建 ThreeScene.vue，用于 3D 场景渲染。
Three.js 基础场景
vue
<template>
<div ref="threeContainer" class="three-container"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
const threeContainer = ref(null);
let scene, camera, renderer;
onMounted(() => {
initThree();
});
const initThree = () => {
// 创建场景
scene = new THREE.Scene();
// 创建相机
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 20);
// 渲染器
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
threeContainer.value.appendChild(renderer.domElement);
// 添加光源
const light = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(light);
// 添加测试立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染循环
const animate = () => {
requestAnimationFrame(animate);
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
};
</script>
<style>
.three-container {
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>🚀 效果：一个简单的 3D 立方体旋转，可作为可视化组件的基础。
加载 3D 城市模型
在实际项目中，我们可以使用 GLTF 模型（比 OBJ、FBX 更高效）加载一个城市模型：
javascript
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('/models/city.glb', (gltf) => {
const city = gltf.scene;
city.scale.set(10, 10, 10);
scene.add(city);
});✅ 效果 ：加载一个 3D 城市模型，如 智慧城市、工业园区 等场景。
添加数据可视化
3D 柱状图（用于显示流量、销售数据等）
javascript
const createBar = (x, z, height) => {
const geometry = new THREE.BoxGeometry(1, height, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const bar = new THREE.Mesh(geometry, material);
bar.position.set(x, height / 2, z);
scene.add(bar);
return bar;
};
// 生成多个数据点
const bars = [];
for (let i = 0; i < 10; i++) {
bars.push(createBar(i * 2, Math.random() * 10, Math.random() * 5 + 2));
}
// 动态更新数据
setInterval(() => {
bars.forEach(bar => {
bar.scale.y = Math.random() * 3 + 1;
});
}, 2000);✅ 效果 ：3D 柱状图动态变化，可用于实时流量监控、销售数据分析。
粒子特效（模拟数据点）
javascript
const particles = new THREE.BufferGeometry();
const positions = new Float32Array(1000 * 3);
for (let i = 0; i < 1000; i++) {
positions[i * 3] = Math.random() * 50 - 25;
positions[i * 3 + 1] = Math.random() * 10;
positions[i * 3 + 2] = Math.random() * 50 - 25;
}
particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const particleMaterial = new THREE.PointsMaterial({ color: 0x44ccff, size: 0.5 });
const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);✅ 效果 ：使用 粒子系统 模拟数据点，如 空气质量监测、传感器数据可视化。
交互与相机动画
鼠标拖拽控制
javascript
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 惯性效果✅ 效果 ：支持 旋转、缩放、拖拽，提升用户体验。
相机动画
javascript
import gsap from "gsap";
const flyToPosition = (x, y, z) => {
gsap.to(camera.position, { x, y, z, duration: 2, ease: "power2.inOut" });
};
flyToPosition(10, 10, 10);✅ 效果 ：相机平滑移动 ，适用于场景切换、巡航动画。
总结
本篇文章从 0 到 1 实现 Three.js 3D 数据可视化大屏，包含：
✅ Three.js 场景搭建
✅ GLTF 城市模型加载
✅ 3D 柱状图、粒子系统
✅ 交互控制、动画优化
未来可以扩展：
- WebSocket 实时数据更新
- 3D 热力图
- 光影特效优化
如果你对 3D 数据可视化 感兴趣，不妨亲自实践一下，打造属于你的 智慧城市大屏！🚀