基于Three.js的3D城市可视化实践：从基础搭建到动态效果实现

2026年1月20日 互联网

基于Three.js的3D城市可视化实践：从基础搭建到动态效果实现

在数字孪生与智慧城市领域，3D可视化技术正成为关键基础设施。本文将以Three.js框架为核心，通过完整代码示例展示如何构建具备动态效果的3D城市场景，重点解析场景初始化、摄像机控制、动态物体创建等核心模块的实现方法。

一、基础场景搭建

1.1 HTML结构配置

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <title>3D城市可视化系统</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         body { 
  9.             margin: 0; 
  10.             overflow: hidden; 
  11.             background-color: #e0e0e0;
  12.         }
  13.         #container { 
  14.             position: absolute; 
  15.             width: 100%; 
  16.             height: 100%; 
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div id="container"></div>
  22.     <!-- 依赖库与脚本将通过模块化方式引入 -->
  23. </body>
  24. </html>

1.2 核心模块初始化

  1. import * as THREE from 'three';
  2. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  4. // 初始化核心对象
  5. let scene, camera, renderer;
  6. let controls;
  8. function initScene() {
  9.     // 创建场景
  10.     scene = new THREE.Scene();
  11.     scene.background = new THREE.Color(0x87CEEB); // 天空蓝背景
  12.     scene.fog = new THREE.Fog(0x87CEEB, 10, 50); // 添加雾效
  14.     // 创建透视摄像机
  15.     camera = new THREE.PerspectiveCamera(
  16.         60, 
  17.         window.innerWidth / window.innerHeight, 
  18.         0.1, 
  19.         1000
  20.     );
  21.     camera.position.set(5, 10, 15);
  22.     camera.lookAt(0, 0, 0);
  24.     // 初始化WebGL渲染器
  25.     renderer = new THREE.WebGLRenderer({
  26.         antialias: true,
  27.         powerPreference: "high-performance"
  28.     });
  29.     renderer.setSize(window.innerWidth, window.innerHeight);
  30.     renderer.shadowMap.enabled = true;
  31.     document.getElementById('container').appendChild(renderer.domElement);
  33.     // 添加轨道控制器
  34.     controls = new OrbitControls(camera, renderer.domElement);
  35.     controls.enableDamping = true;
  36.     controls.dampingFactor = 0.05;
  37. }

二、动态物体系统实现

2.1 车辆生成系统

  1. function createVehicle(position, color = 0x00FF00) {
  2.     // 创建卡通材质车辆
  3.     const material = new THREE.MeshToonMaterial({ 
  4.         color: color,
  5.         side: THREE.DoubleSide
  6.     });
  8.     // 简化车辆几何体
  9.     const geometry = new THREE.BoxGeometry(1, 0.15, 0.3);
  10.     const vehicle = new THREE.Mesh(geometry, material);
  12.     // 设置初始位置
  13.     vehicle.position.copy(position);
  14.     vehicle.castShadow = true;
  16.     // 添加到场景
  17.     scene.add(vehicle);
  19.     // 创建动画路径
  20.     const path = new THREE.CurvePath();
  21.     path.add(new THREE.EllipseCurve(
  22.         0, 0,
  23.         10, 3,
  24.         0, Math.PI * 2
  25.     ));
  27.     return { mesh: vehicle, path };
  28. }
  30. // 批量生成车辆
  31. const vehicles = [];
  32. for(let i = 0; i < 15; i++) {
  33.     const angle = Math.random() * Math.PI * 2;
  34.     const radius = 5 + Math.random() * 5;
  35.     vehicles.push(createVehicle(
  36.         new THREE.Vector3(
  37.             Math.cos(angle) * radius,
  38.             0.1,
  39.             Math.sin(angle) * radius
  40.         ),
  41.         0x00FF00 + Math.floor(Math.random() * 0x100000)
  42.     ));
  43. }

2.2 建筑物生成算法

  1. function generateBuilding(baseX, baseZ, width = 2, depth = 2) {
  2.     const height = 3 + Math.random() * 7;
  3.     const color = 0x666666 + Math.floor(Math.random() * 0x333333);
  5.     // 创建建筑主体
  6.     const mainGeometry = new THREE.BoxGeometry(width, height, depth);
  7.     const mainMaterial = new THREE.MeshStandardMaterial({ 
  8.         color: color,
  9.         roughness: 0.7
  10.     });
  11.     const mainBuilding = new THREE.Mesh(mainGeometry, mainMaterial);
  13.     // 随机屋顶类型
  14.     let roof;
  15.     if(Math.random() > 0.5) {
  16.         // 锥形屋顶
  17.         const roofGeo = new THREE.ConeGeometry(width*1.2, height*0.3, 4);
  18.         roof = new THREE.Mesh(roofGeo, new THREE.MeshStandardMaterial({ color: 0x333333 }));
  19.         roof.position.y = height;
  20.         roof.rotation.y = Math.PI/4;
  21.     } else {
  22.         // 平顶
  23.         const roofGeo = new THREE.BoxGeometry(width*1.1, height*0.2, depth*1.1);
  24.         roof = new THREE.Mesh(roofGeo, new THREE.MeshStandardMaterial({ color: 0x444444 }));
  25.         roof.position.y = height;
  26.     }
  28.     const group = new THREE.Group();
  29.     group.add(mainBuilding);
  30.     group.add(roof);
  31.     group.position.set(baseX, 0, baseZ);
  33.     // 添加窗户
  34.     const windowMaterial = new THREE.MeshBasicMaterial({ 
  35.         color: 0xFFFF00,
  36.         transparent: true,
  37.         opacity: 0.8
  38.     });
  40.     const windowSize = 0.5;
  41.     const windowGap = 0.3;
  42.     const startY = 1;
  44.     for(let y = startY; y < height; y += windowSize + windowGap) {
  45.         for(let x = -width/2 + windowGap; x < width/2; x += windowSize + windowGap) {
  46.             for(let z = -depth/2 + windowGap; z < depth/2; z += windowSize + windowGap) {
  47.                 const windowGeo = new THREE.BoxGeometry(windowSize*0.9, windowSize*0.9, 0.01);
  48.                 const windowMesh = new THREE.Mesh(windowGeo, windowMaterial);
  49.                 windowMesh.position.set(x, y, z);
  50.                 mainBuilding.add(windowMesh);
  51.             }
  52.         }
  53.     }
  55.     return group;
  56. }
  58. // 生成城市建筑群
  59. const cityGroup = new THREE.Group();
  60. for(let i = 0; i < 50; i++) {
  61.     const x = (Math.random() - 0.5) * 30;
  62.     const z = (Math.random() - 0.5) * 30;
  63.     cityGroup.add(generateBuilding(x, z));
  64. }
  65. scene.add(cityGroup);

三、高级渲染技术

3.1 自定义着色器应用

  1. const customShaderMaterial = new THREE.ShaderMaterial({
  2.     uniforms: {
  3.         time: { value: 0 },
  4.         color: { value: new THREE.Color(0xFFA500) }
  5.     },
  6.     vertexShader: `
  7.         varying vec2 vUv;
  8.         void main() {
  9.             vUv = uv;
  10.             gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  11.         }
  12.     `,
  13.     fragmentShader: `
  14.         uniform float time;
  15.         uniform vec3 color;
  16.         varying vec2 vUv;
  18.         void main() {
  19.             float wave = sin(vUv.x * 10.0 + time * 2.0) * 0.1;
  20.             float intensity = smoothstep(0.4, 0.6, vUv.y + wave);
  21.             gl_FragColor = vec4(color * intensity, 1.0);
  22.         }
  23.     `
  24. });
  26. // 创建着色器平面
  27. const shaderPlane = new THREE.Mesh(
  28.     new THREE.PlaneGeometry(20, 20),
  29.     customShaderMaterial
  30. );
  31. shaderPlane.rotation.x = -Math.PI/2;
  32. shaderPlane.position.y = -0.1;
  33. scene.add(shaderPlane);

3.2 性能优化策略

  1. 实例化渲染：对重复物体使用THREE.InstancedMesh
    ```javascript
    const buildingGeometry = new THREE.BoxGeometry(1, 5, 1);
    const buildingMaterial = new THREE.MeshStandardMaterial({ color: 0x999999 });
    const instancedBuilding = new THREE.InstancedMesh(
    buildingGeometry,
    buildingMaterial,
    1000
    );

// 批量添加实例
for(let i = 0; i < 1000; i++) {
const matrix = new THREE.Matrix4();
matrix.makeTranslation(
(Math.random() - 0.5) 100,
0,
(Math.random() - 0.5) 100
);
instancedBuilding.setMatrixAt(i, matrix);
}
scene.add(instancedBuilding);

  2. 2. **LOD细节层次**：根据距离切换模型精度
  3. ```javascript
  4. const lod = new THREE.LOD();
  6. // 高精度模型
  7. const highDetailGeo = new THREE.BoxGeometry(1, 1, 1, 32, 32, 32);
  8. const highDetailMat = new THREE.MeshStandardMaterial({ color: 0xFF0000 });
  9. const highDetail = new THREE.Mesh(highDetailGeo, highDetailMat);
  11. // 低精度模型
  12. const lowDetailGeo = new THREE.BoxGeometry(1, 1, 1, 8, 8, 8);
  13. const lowDetailMat = new THREE.MeshStandardMaterial({ color: 0x00FF00 });
  14. const lowDetail = new THREE.Mesh(lowDetailGeo, lowDetailMat);
  16. lod.addLevel(highDetail, 0);
  17. lod.addLevel(lowDetail, 20);
  18. scene.add(lod);

四、完整动画循环

  1. function animate() {
  2.     requestAnimationFrame(animate);
  4.     // 更新控制器
  5.     controls.update();
  7.     // 更新自定义着色器时间
  8.     customShaderMaterial.uniforms.time.value += 0.01;
  10.     // 更新车辆动画
  11.     vehicles.forEach((vehicle, index) => {
  12.         const progress = (Date.now() * 0.0005 + index * 0.1) % 1;
  13.         const angle = progress * Math.PI * 2;
  14.         vehicle.mesh.position.x = Math.cos(angle) * 10;
  15.         vehicle.mesh.position.z = Math.sin(angle) * 3;
  16.     });
  18.     // 旋转建筑群（演示用）
  19.     cityGroup.rotation.y += 0.001;
  21.     renderer.render(scene, camera);
  22. }
  24. // 初始化并启动
  25. initScene();
  26. animate();

五、关键技术点总结

  1. 场景管理：合理组织场景图结构，使用分组(Group)管理相关物体
  2. 性能优化：采用实例化渲染、LOD技术提升大规模场景性能
  3. 动画系统：结合requestAnimationFrame实现流畅动画
  4. 着色器编程：通过GLSL实现自定义渲染效果
  5. 交互控制：使用OrbitControls提供用户交互能力

本文展示的完整实现可在现代浏览器中直接运行，开发者可根据实际需求调整场景规模、物体细节和动画参数。该方案适用于智慧城市可视化、游戏开发、数字孪生等多个领域，为WebGL开发者提供了可复用的技术框架。

最新文章