使用 JavaScript 和 Web 套接字制作交互式悬浮滑板游戏。

背景故事

该项目的原始版本是使用Daydream 控制器构建的。

为了让更多人可以使用它，我花了一些时间对其进行了修改，以便您可以使用手机。

不过，如果你愿意的话，你也可以使用 Arduino、加速度计和蓝牙模块之类的东西来构建你自己的控制器！ 😃

在这个项目的第一个版本中，我使用 Web Bluetooth 将 Daydream 控制器直接连接到浏览器，我希望代码能够保持大致相同，但我意识到手机无法使用 Web Bluetooth API 连接到笔记本电脑。手机和笔记本电脑都只能作为“中心”设备，而不能作为“外围”设备，所以我不得不将此演示改为使用 Web Sockets 来实现手机和笔记本电脑之间的通信。

它是如何工作的？

此版本的实验通过在您的计算机上打开主网页并在您的手机上打开另一个网页来获取加速度计数据。

使用DeviceOrientation Web API，可以检测手机的方向并通过 WebSockets 将其发送到笔记本电脑上的浏览器。

把手机放在滑板上，它就能变成控制器。你可以利用方向数据将其应用到 3D 环境中，就像在悬浮滑板上一样与游戏互动。

本教程的内容

我不会详细讲解整个代码，因为我觉得逐行讲解没什么用。我只想解释一下原型的核心部分。

如果您想跳过所有这些，只需查看Github repo、CodeSandbox或尝试现场演示，请随意。

所需材料：

• 现代手机（任何内置加速度计的手机）。
• 一台电脑。
• 投影仪（可选）。

技术栈：

• HTML
• CSS
• JavaScript（Vanilla JS，无需框架知识！）。
• 设备方向 Web API
• Node.js 与 Socket.io

步骤 1：设置 Node.js 服务器和 Web 套接字

首先，我们需要设置一个服务器来提供文件、公开路由并设置 socket.io。

在上面的代码示例中，我们需要一些模块，启动一个Express服务器并指示提供文件的路径和路由。

我们还设置了一个基本的 socket.io 连接，用于等待服务器和前端之间的通信建立。连接成功后，socket.io 将等待来自前端的特定消息。

当用户访问移动页面时，我们应该收到第一条消息，以便我们确认他们已准备好与游戏交互。收到此消息后，我们会发送一条桌面页面将监听的消息，以便我们启动游戏。

当移动设备开始传输方向数据时，将会收到第二条消息。该消息会向桌面浏览器发送一个包含数据的事件，以便将其应用到悬浮滑板上。

现在我们的服务器已经设置好了，让我们开始处理前端。

步骤 2：获取并传输方向数据

使用DeviceOrientation Web API，我们可以从手机获取方向数据。

为了进行设置并将其发送回服务器，我们需要如下代码：

在这里，我们实例化 socket.io，当页面加载时，我们向服务器发送第一条消息，表明移动页面已被访问。

然后，我们有一个事件监听器来检查deviceorientation事件。当发生变化时，我们会调用一个handleOrientation函数，该函数向服务器发送另一个事件，其中包含某个轴上的数据。这些数据代表了滑板倾斜时从左到右的位置变化。

现在，移动设备上的页面正在向服务器发送方向数据，让我们看看桌面页面是如何监听它的。

步骤3：聆听游戏中的方向数据

为了能够在笔记本电脑上使用来自手机的方向数据，我们需要监听服务器发送的消息。

mobile orientation再次，我们实例化 socket.io，当我们从服务器收到消息时，我们就能够在游戏中使用倾斜数据。

在上面的代码示例中，我还添加了一个previousValue变量，因此只有当方向数据与之前收到的方向数据不同时，我们才会使用它。

现在我们已经建立了服务器和前端之间的基本通信，并从手机获取了方向数据，我们可以开始使用Three.js围绕它构建游戏。

步骤 4：设置游戏

加载库

本项目构建的 3D 环境使用 Three.js。要开始使用它以及一些附加组件，我们需要将它们添加到 HTML 中。

如果您要创建一款基础游戏，则无需全部这些文件。文件CopyShader、DigitalGlitch、EffectComposer和仅用于我添加的与障碍物碰撞的效果。ShaderPassGlitchPass

这里需要的主要资源是 Three.js 库、noiseSimplex生成平面的脚本以及OBJ用于MTL加载悬浮滑板和障碍物的 3D 资产的加载器。

创建 3D 场景

要创建场景，您需要编写以下几行：

在上面的代码中，我们创建了场景、相机、渲染器并将所有内容附加到主体。

您还可以在场景中添加灯光。您可以使用不同类型的灯光，但在我当前的原型中，我使用了环境光和聚光灯：

现在我们有了一个基本场景，但里面什么都没有。让我们先生成演示中看到的景观。

生成地形

设置景观稍微复杂一些。首先从一个简单的PlaneGeometry和开始WireframeGeometry。

然而，我们可以在演示中看到，我们有一个生成“山脉”的效果。要做到这一点，我们需要调整顶点PlaneGeometry。

使用我们之前定义的几何图形，我们将使用SimplexNoise脚本通过操纵顶点来帮助我们创建波浪地形的效果。

为了使这种效果在整个游戏中持续存在，我们需要使用 调用此函数requestAnimationFrame。

现在我们有了地形，我们还需要添加一些岩石（障碍物）和悬浮滑板。

加载 3D 模型

岩石和滑板是 3D 模型。要加载它们，我们需要以下几行代码：

通过上面的代码，我们创建了一个OBJLoader，并为其指定了文件路径 .obj，并设置了它在场景中的大小和位置。我们还设置了颜色材质，最后，我们将它添加到场景中。

岩石的代码几乎相同。

因此，我们已经介绍了如何创建一个简单的场景，添加一个程序地形，3D 模型，但我们缺少交互部分。

使其具有交互性

现在我们已经设置好了场景，我们可以使用之前讨论过的方向数据来更新场景中悬浮滑板模型的位置。

为此，我们需要这样的代码：

此代码示例与本教程中前面展示的代码示例类似，不同之处在于现在我们skateboard在场景中可以使用它，因此我们能够根据从手机返回的数据改变它的位置！

如前所述，要获得完整的体验，代码量可能比这多一些，但就核心概念而言，就这些了！😃🎉

如果你想查看代码，这里是Github repo。 否则，这里是现场演示！

希望你觉得有趣！😊👋