14、探索交互式 3D 游戏开发：从数据可视化到游戏实现

探索交互式 3D 游戏开发：从数据可视化到游戏实现

1. 数据可视化与 Arduino 交互

在完成 Arduino 草图上传后，要确保 Arduino 通过 USB 与计算机保持连接。在控制台中，导航至相关应用程序目录，输入 node index.js 或 nodemon index.js 来启动应用程序。首次调用 USGS 服务器时，应能获取地震数据，此时压电蜂鸣器会发出嗡嗡声，LED 闪烁，LCD 上会显示文本。若看不到文本，可能需要转动电位器。

这里利用 Node.js 服务器从其他服务器获取数据，而非提供自身的网页。这为从多个不同数据源获取数据以驱动 Arduino 组件提供了可能。例如，可以为不同震级的地震添加不同的 LED，或者改变压电蜂鸣器的声音。

2. 动画与 HTML5 画布元素

动画可以创造出任何你能想象的事物，从真实到超现实，从简单到复杂。HTML5 在 2014 年发布时，引入了可用于 2D 和 3D 动画的画布元素。 <canvas></canvas> 标签可创建一个用于图形元素的区域，它与其他 HTML 元素结构相同，也能设置宽度和高度等属性。该元素位于 DOM 中，可通过 JavaScript 选择并用于显示和动画化脚本形状与场景。为了更方便地在画布中创建动画，开发了许多 JavaScript 库，如 processing.js、PixiJS、Paper.js、BabylonJS 以及本章使用的 Three.js。

动画的流畅度取决于两个因素：每秒帧数（FPS），即动画运行的帧率；以及每一帧之