引言（Introduction）
在本章中，我们将踏入工业应用的世界，探讨其在各类行业中的重要性。我们会梳理各行业面临的挑战，以及技术如何在应对这些挑战中发挥关键作用。我们将给出工业应用的全面概览，聚焦其定义、范围，以及在不同行业场景中的相关性。我们还将强调 Three.js 与 Next.js 的结合如何为构建沉浸式 3D 可视化打开新可能，从而实现高级仿真与高效原型设计。贯穿全章，我们希望借助这些强大的框架激发读者的好奇心与创造力，以更好地满足工业需求并推动创新。
结构（Structure）
本章涵盖以下主题：
- 工业应用简介
- Three.js 与 Next.js 的演进
- 工业可视化
- Three.js 的真实用例
学习目标（Objectives）
读完本章后，你将了解工业应用在各行业中的关键作用及其所应对的核心挑战；回顾 Three.js 与 Next.js 的发展脉络；并通过真实案例理解 Three.js 在工业情境中的实用价值。
工业应用简介（Introduction to industrial applications）
工业应用指面向各类工业领域、用于革新与优化运营的解决方案与技术方法。通过利用软件、先进系统与数字化技术，这类应用旨在显著提升生产力、效率、安全性以及决策质量。
工业应用的首要目标之一，是对多种工业流程进行优化。这通常涉及将多种前沿技术进行集成，例如 虚拟现实（VR） （如图 1.1所示）、能源管理系统、物联网（IoT） 、环境监测以及诸多相关领域，构建智能化、互联化的系统。这些互联系统使不同组件之间能够无缝通信与数据交换，从而实现更高水平的协同与流程同步。
同样地，能源行业也因工业应用而取得了显著进步。通过引入智能电网、能源管理系统与预测性分析，能源分配更高效、浪费更少、资源利用更充分。由此，能源密集型行业能够优化其用能模式，并在环境层面变得更加可持续。
此外，工业应用在医疗健康领域的变革中也扮演着关键角色。医学影像技术（见图 1.2），如磁共振成像（MRI）与计算机断层扫描（CT） ，能够提供准确而细致的可视化结果，帮助实现更精准的诊断与更优的治疗规划。同时，**虚拟现实（VR）与增强现实（AR）**正通过提供逼真的仿真训练，显著提升医护人员的技能与实操能力。
除了这些示例之外，工业应用的影响还延伸至交通、建筑与物流等诸多领域。以智能交通系统为例，它利用实时数据与互联能力来优化交通流、提升公共交通效率并缓解拥堵。在建筑方面，**建筑信息模型（BIM）**可高效支持复杂结构的规划、设计与施工。
总体而言，工业应用的采用正在不断扩张，其动力来自于对性能、安全与可持续性的持续追求。借助技术进步，各行业能够克服复杂挑战，做出数据驱动的决策，并成功应对快速演变的商业环境。随着工业应用的持续演进，它们有望重塑各行各业，推动世界变得更加高效、互联且富有创新。
Three.js 与 Next.js 的演进（Evolution of Three.js and Next.js）
在不断发展的 Web 开发与 3D 图形领域，某些技术见证了令人瞩目的创新历程。本节将展开对 Three.js 与 Next.js 两大框架的演进轨迹的精彩探究——它们在塑造当今“交互式 Web 体验”与“沉浸式 3D 可视化”的融合方面发挥了关键作用。
3D 图形 Web 开发的起源（3D graphics web development origins）
Three.js 是一个流行而强大的 JavaScript 库，用于在 Web 应用中创建 3D 图形与动画。它由 Ricardo Cabello（亦称 Mr. Doob）于 2010 年 4 月首次发布，迄今已成为 3D Web 开发的领先框架之一。下面让我们回顾 Three.js 的演进历程，从其诞生到如今的状态。
Three.js 的初衷，是为开发者提供一个轻量且直观的库，以便与 WebGL（Web Graphics Library） （见图 1.3）协同工作。WebGL 作为在浏览器中渲染 3D 图形的 Web 标准，在当时仍相对新颖，其底层 API 复杂且难以直接使用。Three.js 旨在屏蔽 WebGL 的复杂性，为 3D 图形开发提供更高层级、更加友好的接口。
WebGL 是一个低层级的 API，基于 OpenGL ES（OpenGL for Embedded Systems，嵌入式系统版 OpenGL） ，专为在网页浏览器中渲染 2D 与 3D 图形而设计。尽管 WebGL 让在 Web 上创建震撼的 3D 图形成为可能，但由于其底层特性，直接使用并不容易。WebGL 要求开发者管理图形图元、**着色器（shaders）**以及其他底层细节，这对新手以及缺乏深入 3D 图形经验的 Web 开发者来说门槛较高。
WebGL 的起源可追溯到 2006 年由 Mozilla 公司 Vladimir Vukicevic 发起的一个实验项目 Canvas 3D。该项目旨在借助 HTML5 的 <canvas> 元素，将硬件加速的 3D 图形引入浏览器。2009 年，负责制定图形与多媒体开放标准的行业联盟 Khronos Group（Khronos 组织）成立了 WebGL 工作组。Mozilla、Google、Apple 与 Opera 等主要科技公司均积极参与。2010 年 3 月 3 日，WebGL 工作组发布了首个公开规范。这使得 Web 开发者能够直接通过 JavaScript 访问底层图形能力，在无需插件的情况下在浏览器中创建硬件加速的 3D 图形。2011 年起，多个浏览器开始实现 WebGL 支持；Mozilla Firefox 与 Google Chrome 是最早提供稳定 API 实现的浏览器之一，随后 Safari 与 Internet Explorer 等也陆续跟进。WebGL 很快在 Web 开发社区中流行并被广泛采用，开发者开始直接在浏览器内构建令人印象深刻的3D 可视化、交互式游戏与虚拟体验。
WebGL 很快在 Web 开发社区中流行并被广泛采用，开发者开始直接在浏览器内构建令人印象深刻的 3D 可视化、交互式游戏与虚拟体验。然而，尽管 WebGL 功能强大，它也带来了一些安全性方面的担忧。由于它能够直接访问硬件，潜在漏洞可能被恶意利用。为此，各大浏览器厂商着手修复相关问题，以确保更安全可靠的实现。
鉴于需要抽象 WebGL 的复杂性、让 Web 开发者更容易上手 3D 图形，Ricardo Cabello（Mr. Doob）于 2010 年 4 月开始开发 Three.js（见图 1.4）。其主要目标是创建一个更高层、直观的库，作为 WebGL 与开发者之间的桥梁，使开发者无需陷入底层 API 的繁琐细节也能高效开展 3D 开发。
在早期，Three.js 致力于提供一个简洁的 API，用于创建 3D 场景并管理几何体、材质、光源、相机与渲染。该库的设计原则强调易用性与快速原型，使开发者能够专注于构建吸引人的 3D 内容，而不必纠结于底层 WebGL 代码。随着 Three.js 的演进，它发布了多个版本，每个版本都带来新特性、改进与缺陷修复。开发团队与活跃的社区贡献者基于用户反馈与新兴 Web 技术，持续打磨这一库。
前端工程化的兴起（Rise of the frontend engineering）
随着 Web 技术的发展，Web 应用开始涌现，用户可以直接通过浏览器与基于 Web 的软件和服务交互，这标志着 Web 体验向更具动态性与交互性转变。浏览器能力显著增强，**层叠样式表（CSS）**用于样式、JavaScript用于交互，使开发者能够构建更为动态与复杂的用户界面。
1995 年，Brendan Eich 为 Netscape Navigator（见图 1.5）浏览器开发了 JavaScript（最初名为 LiveScript）。JavaScript 为网页提供了添加交互与动态内容的方式，大幅提升了用户体验。为借助当时 Java 的流行，Netscape 将该语言由 LiveScript 更名为 JavaScript。尽管名称相似，JavaScript 与 Java 是两种不同的编程语言，用途与设计目标各异。
1996 年 11 月，Netscape 将 JavaScript 提交给标准组织 欧洲计算机制造商协会（ECMA International） ，以制定该语言的标准化版本。由此催生了 ECMAScript 标准，其第一个版本（ECMAScript 1）于 1997 年 6 月发布。
在 **20 世纪 90 年代末至 21 世纪初的“浏览器大战”**期间，随着 Netscape Navigator 与 微软 Internet Explorer 为争夺浏览器市场主导地位而激烈竞争，JavaScript 的能力与流行度迅速提升。
数年之后，许多现代特性自 ECMAScript 第 5 版（ES5） 起进入标准。ES5 于 2009 年 12 月发布，为语言带来了重要改进，包括严格模式（strict mode） 、JSON 支持以及数组与对象的新方法。
ECMAScript 6（ES6，亦称 ECMAScript 2015/ES2015） 是一次重大升级，引入了类（class） 、箭头函数（arrow functions） 、模板字符串（template literals）等特性。自 ES6 之后，ECMAScript 进入年度发布节奏，持续稳定地引入新特性与改进。伴随 React、Angular（见图 1.6）等前端框架与库的兴起，JavaScript 的受欢迎程度进一步飙升。这些框架为开发者提供了构建复杂且高度交互的用户界面的强大工具。
2016 年 10 月，Guillermo Rauch 发布了 Next.js 的首个版本。它是一个基于 React 的框架，开箱即用地提供文件式路由与服务端渲染（SSR）能力。凭借简单易用、高性能以及对多种渲染方式的支持，Next.js 很快在开发者中流行起来。2017 年 1 月发布的 Next.js 2.0 带来了更好的性能、改进的错误处理以及对自定义服务器路由的支持，进一步巩固了 Next.js 作为构建 React 应用的高效可靠框架的地位。
在现代项目中，Next.js 12 是最受欢迎的版本之一。在正式发布 12 之前，曾有一个 Next.js 11 的实验版，引入了许多重要改进与特性，如更快的启动时间、优化的图片加载以及内置 ESLint 支持。这些尝试为后续在 Next.js 12 中进一步打磨的增强功能奠定了基础。Next.js 12 的一个重要变化是升级到 Webpack 5。Webpack 是流行的打包器，负责优化与打包 JavaScript、CSS 及其他资源。Webpack 5 带来了多项性能改进，使 Next.js 应用的构建速度更快、整体性能更佳。
截至今日，最新版本为 Next.js 15。它是当下最强大的前端框架之一，支持最新的 React 19。同时，其路由系统也获得更新，除了页面文件外，还包含诸如 error、layout 等特殊页面，可作为可复用组件用于嵌套路由结构中。
工业可视化（Industrial visualization）
在工业应用中，可视化指使用3D 模型、图表、曲线与动画等图形化表达形式，更直观、可理解地呈现复杂数据与信息。通过这种方式，包括工程师、操作员与决策者在内的各方都能更好地洞察并据此对工业流程、系统与运营做出明智决策。
- 3D 可视化用于设计与原型：工程师与设计师可创建工业产品、机器与设备的虚拟原型，在实体制造前进行可视化评估、发现潜在问题并及时改进，从而缩短周期、降低成本。
- 流程可视化：对复杂工业流程进行逼真呈现，便于操作员与工程师进行可视化监控与分析。
- 沉浸式 3D 仿真训练：为工业人员提供安全且高性价比的训练环境，以熟悉设备与流程，提升其技能与应急响应能力。
- 运维与检修：对复杂机械与设备进行细致可视化，技术人员可据此理解内部结构、定位故障组件，并更高效地规划维护任务。
- 数字孪生（IIoT 场景） ：将 3D 与传感器实时数据结合，创建资产的数字孪生体，以监控与分析实际资产性能，支持预测性维护与优化。
- 营销与展示：用 3D 以更具吸引力、交互性的方式展示产品与解决方案，便于客户与利益相关方理解其特性与价值。
此外，还应提及 AR/VR 等更具“元能力”的技术正日益用于增强可视化效果。
总体来看，3D 可视化有助于更深入地理解复杂系统与流程，促进更优决策，加速工业解决方案的开发与落地。随着技术演进，3D 可视化将愈发成熟，并成为众多工业领域的核心能力。
在 Web 应用不断迈向主流的过程中，我们有机会比较 Three.js + Next.js 与原生开发之间的潜力差异。全书将围绕若干关键方面展开，剖析其优势与适用性。
跨平台（Cross-platform）
跨平台兼容意味着用 Three.js 创建的 3D 内容可在多种设备与操作系统上访问与体验，无需平台专属的安装与更新。这得益于 Three.js 的Web 化特性：只要有浏览器与能运行浏览器的任意操作系统即可运行应用，从而免安装、免下载。
实时交互（Real-time interaction）
得益于 Web 应用生态，我们可以轻松用实时数据渲染 3D 可视化。本书将使用 AWS 的 Pub/Sub：即 Amazon SNS 与 Amazon SQS 协作实现的发布-订阅模式，发布者向 topic 发送消息，多个订阅者（队列、应用或终端）可同时或选择性接收消息。这使我们能够在 3D 应用中实现协同功能。结合“免安装”的优势，基于 Three.js 的 3D Web 应用可谓杀手级（killer）工业解决方案。
低开发与运维成本（Low cost of development and maintenance）
基于 Web 的 3D 应用通常比传统桌面应用具有更低的开发与维护成本。Web 作为标准化平台，减少了面向不同操作系统与设备的定制配置；同时，掌握 JavaScript 的前端工程师群体逐年扩大。Web 应用的更新可无缝上线，用户始终获得最新功能与改进，无需手动下载/安装，用户体验更佳，也降低了维护成本。
移动端兼容（Mobile compatibility）
Three.js 应用可针对手机与平板进行优化，在移动端提供一致且可交互的 3D 体验，显著扩大应用触达范围。
仅有 3D 物体的可视化还不够。为了完成一款可用的应用，我们还需要一个外层框架来存储用于渲染的数据，并提供表单、表格与交互控件等 UI，让用户能够操作、修改与使用 3D 模型。
设想任意一个允许我们操作 3D 对象的应用：除了模型本身，还会包含大量 UI 元素。例如参见 Blender3D 的界面（见图 1.7）。Blender 是一款免费桌面工具，可用于创建 3D 模型、动画，甚至交互式应用。
这里你可以看到若干区域：
- 这是主菜单，可用于切换主视图以及周围的所有界面。
- 这是顶栏菜单的子菜单，用于进一步的功能选择。
- 当用户在右侧面板选中一个对象（此处为一个立方体）时，我们可以看到该对象的属性以及可执行的操作。
应用的一些限制如下：
- 应用是离线的，需要在每台需要处理模型的计算机上分别安装。
- 应用创建的模型不可交互。
- 需要编写专用脚本，才能基于数据创建模型或合并变更。
在此情境下，Next.js 登场，作为 Web 应用界面的理想方案。由于它基于 React，我们可以构建一个易于维护的系统，用于在屏幕上操作任意对象。
下面是用于构建 3D 可视化应用时，将会用到的 Next.js 关键特性：
- 精简的路由，便于组织界面：Next.js 简化了应用内的路由，提供直观的结构来导航各个分区，有助于打造组织良好的用户界面，使用户可以无缝访问工业应用的不同组件。
- API Routes 支持实时数据处理：工业应用离不开实时数据通信。借助 Next.js 内置的 API 路由，开发者可以无缝整合后端服务与数据库；这种实时数据交换让应用能够提供准确且最新的信息。
- 完善的样式能力：样式是界面设计的基石。Next.js 提供多样化的样式方案（如 CSS Modules、CSS-in-JS 等），从而在工业应用的不同模块中保持一致的品牌与美学。
- 与 Three.js 等库协作的实时数据可视化：与 Three.js 等库协同，可实现实时数据可视化，有助于在工业应用中进行决策、流程优化与数据驱动洞察。
Three.js 的真实场景用例（Real-world use cases with Three.js）
展示 Three.js 的用例，往往是介绍其能力时最精彩的部分。即使 WebGL 已相当成熟，在浏览器中渲染 3D 对象与动画仍然极具吸引力。我们将从库自带的简单示例开始，然后再看用该库实现的更复杂的应用。
我们先从基础示例入手。这些示例展示了在 Web 开发中使用 Three.js 的基本方法，以及如何将 3D 对象插入网页并可视化。随后我们再挑战更复杂的示例。
低面数粉色火烈鸟（含灯光设置）
该示例见：threejs.org/examples/#w…
在这个示例中（见图 1.8），我们可以在网页上观察到带动画的 3D 对象。你也可以在场景中尝试调整灯光对象——我们会在后续章节详细讨论。现在先粗略了解一下该库本身所提供的可能性。
页面上的体素 3D 图片（Voxel 3D picture on page）
有许多可用于创建 3D 图像的应用，例如 3D Max、Maya、Cinema 4D 或 Blender。不过，还有一种体素/低多边形风格的应用，允许你像《Minecraft》那样用方块来构建 3D 图像，这个应用叫 MagicaVoxel。它免费且开源，下载地址：ephtracy.github.io/。
使用该应用，我们制作了一个低多边形小狗（灵感来自 YouTube 的一位开发者），并将其插入到网页中（见图 1.9）。
需要注意的一点是：它并不使用常见的文件扩展名。Three.js 对此开箱即用，可以轻松加载 .vox 文件并插入到页面中。
3D 力导向图（3D Force-directed graph）
该应用位于：vasturiano.github.io/3d-force-gr…。它用于在网页中以 3D 方式可视化图数据（见图 1.10），可在屏幕上呈现任意面向“图”的数据结构。你可以旋转已渲染的图形；每个节点都可点击，并可包含文本数据或链接。
网站的 3D 背景（3D background for website）
把 3D 对象插入页面也可以用作页面背景。下一个示例是一个可定制的网页 3D 背景库（见图 1.11），你可以在 www.vantajs.com/ 获取并使用。你还可以尝试不同的模板与自定义选项，实现多样化的视觉效果。
WebVR 框架（WebVR framework）
由于 Three.js 是一个库，工具化的下一阶段就是框架。每个框架都会围绕其诞生时要解决的问题设定边界，因此在某些场景下会是不错的方案。本书将使用纯 Three.js，以充分发挥其自由度带来的优势。但如果需要针对 WebVR 的特定任务，可以考虑使用 A-Frame 框架（见图 1.12），官网：aframe.io/。
接下来的两个示例展示了面向 3D 动画与游戏行业的 Web 应用。
动效设计工具（Motion design tool）
我们已经知道，将 3D 对象插入网页有很多方式。但如果需要制作动画呢？
在使用 Three.js 时，通常需要用代码来编写物体运动与相机的逻辑。那有没有一种像桌面应用（例如 Blender）那样的可视化制作工具？——有的。
这个解决方案叫 TheatreJS（见图 1.13）。它允许你在导入 3D 对象的基础上，以可视化方式创建华丽的动画。获取地址：www.theatrejs.com/
基于 Web 的 3D 可视化游戏引擎（The 3D web-based visual game engine）
作为最后一个示例，我们来介绍一种用于创建游戏、可视化演示与工业应用的 Web 端 3D 引擎（见图 1.14）。本书在构建界面时将会利用该引擎的相关能力。尽管该引擎在工业用例中也可能表现理想，但它的主要定位仍是游戏开发。因此，尤其在受限于应用特定场景需求时，其中许多功能可能派不上用场。这往往会引入大量其实可以用纯 JavaScript 完成的 3D 对象，同时同样会占用你的 PC 资源。
该引擎名为 PlayCanvas，可在 playcanvas.com/ 获取。
结论（Conclusion）
本章带领我们全面走进工业应用的世界，阐明其在各行业中的关键意义，以及它们所面临的复杂挑战。随后，章节梳理了 Three.js 与 Next.js 的演进版图，勾勒出它们对 Web 开发与 3D 图形领域所产生的变革性影响。
随着叙述推进，重心自然转向工业可视化——在这一领域，Three.js 与 Next.js 的组合实力登上舞台中心。章节强调，这种充满活力的协同使我们能够创建沉浸式 3D 可视化，为工业流程、仿真与原型设计提供极具价值的洞察。
真实世界的用例为 Three.js 在工业场景中的能力提供了可感知的示范，展现其多样性与实用性。这些示例覆盖从制造业到医疗健康等多个行业，显示出 Three.js 重新定义传统范式的潜力。
总之，本章展示了 Three.js 的无缝融合如何成为重塑工业应用的强大催化剂。随着各行业寻求优化流程并提升决策质量，Web 技术与 3D 图形的合流正成为一股变革力量，有望深刻影响未来的工业格局。
在下一章中，我们将深入探讨 Web 开发工具，涵盖集成、安全以及借助 PWA（渐进式 Web 应用） 实现 Web 应用离线可用的可能性。
