Three.js，闲谈3D——智慧XX

前言

Three.js作为基于WebGL的js 3D库，成为智慧城市前端可视化的首选方案之一。

从开发环境搭建到核心功能实现 -> Three.js在智慧城市项目中的应用。

一、智慧城市

要结合基础设施硬件建设：

城市无人机物流系统
城市垃圾桶管理系统
城市燃气报警管理系统

完整的智慧城市系统通常包含三个层次：

硬件层：各种传感器（道路摄像头、温度计、定位手环等）
服务器层：Java/Python/PHP/Node.js等后端技术+数据库
可视化层：Three.js/Babylon.js/Cesium.js等WebGL库+地图服务

技术选型对比

平台	底层技术	3D渲染引擎
Windows平台	OpenGL	Unity3D/UE4
Web平台	WebGL	Three.js/Babylon.js

二、开发基础准备

3D模型生成方式

在智慧城市可视化中，3D模型主要通过两种方式生成：

美术建模 ：使用3dmax、blender等三维建模软件绘制，导出gltf等格式，由程序员使用Three.js加载解析
程序生成 ：基于已知几何数据（点云、长宽高、轮廓坐标等），使用Three.js编写代码直接生成三维模型

对于海量建筑物渲染（数千甚至数万栋）：

通常不会完全依赖美术手工建模（工作量过大）
更优方案是：
- 获取基础数据（建筑轮廓、楼层高度、经纬度等）
- 使用Three.js批量解析并自动生成建筑模型
- 对重点建筑可单独由美术精细建模

要会：

前端基础：html/css/js，能使用Node.js搭建本地静态服务器
Three.js基础：建议先完成Three.js入门学习
WebGL和Shader：对原生WebGL或Shader有基本了解

环境搭建

版本管理

GitHub发布页：github.com/mrdoob/thre...
特定版本文档查看：下载后打开three.js-rXXX/docs/index.html
版本差异注意：如r133移除了Geometry相关类

模块化引入

html 复制代码

<script type="module">
  import * as THREE from '../three.js/build/three.module.js';
  import { OrbitControls } from '../three.js/examples/jsm/controls/OrbitControls.js';
</script>

三、基础代码

基础项目结构

index.html（主入口）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>智慧城市可视化</title>
  <style>body { margin: 0; overflow: hidden; }</style>
</head>
<body>
  <script type="module" src="main.js"></script>
</body>
</html>

场景初始化

javascript 复制代码

// 创建场景
const scene = new THREE.Scene();

// 添加坐标轴辅助（RGB对应XYZ轴）
const axesHelper = new THREE.AxesHelper(250);
scene.add(axesHelper);

光源系统配置

javascript 复制代码

// 平行光1（模拟太阳光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(400, 200, 300);
scene.add(directionalLight);

// 平行光2（补充照明）
const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight2.position.set(-400, -200, -300);
scene.add(directionalLight2);

// 环境光（基础照明）
const ambient = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambient);

相机设置

javascript 复制代码

// 获取窗口尺寸
const width = window.innerWidth;
const height = window.innerHeight;

// 透视投影相机
const camera = new THREE.PerspectiveCamera(30, width/height, 1, 3000);
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0);

渲染器配置

javascript 复制代码

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

交互控制

javascript 复制代码

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
/* 交互方式：
   - 旋转：拖动鼠标左键
   - 缩放：滚动鼠标中键
   - 平移：拖动鼠标右键
*/

// 窗口响应式
window.onresize = function() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
};

渲染循环

javascript 复制代码

function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

智慧城市项目常涉及地理信息系统(GIS)：

处理SHP/GeoJSON格式的城市数据
集成地图服务（百度/高德地图API）
地理坐标转换

数据分类：

基础几何数据：建筑、道路、湖泊等模型
位置分类数据：人流量、温度、交通状况等

数据来源：

美术3D建模（基于地图/照片）
倾斜摄影
地图软件导出
甲方提供
物联网传感器数据

四、3d+渲染gltf

美术建模流程

建模工具选择 ：
专业3D建模软件：3ds Max、Blender、Maya等
推荐使用Blender（开源免费，对glTF格式支持良好）

模型导出规范：

导出格式：glTF（GL Transmission Format）
建议同时导出.gltf+.bin+纹理的完整组合
导出时注意单位统一（建议使用米制单位）

加载glb模型：

js 复制代码

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// 创建模型容器组
const cityModel = new THREE.Group();

// 初始化加载器
const loader = new GLTFLoader();

// 加载GLB模型
loader.load(
  './assets/models/shanghai_bund.glb', 
  (gltf) => {
    // 模型加载成功回调
    cityModel.add(gltf.scene);
    
    // 模型后处理
    processModel(gltf.scene);
  },
  undefined,
  (error) => {
    console.error('模型加载失败:', error);
  }
);

export { cityModel };

Three.js解析城市模型 :
1. 美术通过三维建模软件（3dmax、blende等）构建好城市的三维场景模型。（常用三维建模软件3dmax、blender等）
2. 三维建模软件，比如blender导出gltf格式模型
3. 程序员解析渲染gltf模型
4. 根据需要设置相机参数，eg: 整体预览全部模型
5. 根据需要设置模型材质，eg：给楼房设置特定渲染效果

总结

Three.js为智慧城市3D可视化提供了强大的技术支持，去实现实时数据可视化、VR/AR集成等方面。