一步步教你用 WebVR 实现虚拟现实游戏-CSDN博客

本教程将指导你逐步创建一个使用WebVR的虚拟现实游戏，涉及设置VR模型、创建三维物体、添加点击交互、配置NodeJS服务器及实现客户端与服务器间的消息传递。你将学习到如何在桌面和VR环境中构建一个简单的点击冒险游戏，并实现设备间预览同步。

摘要由CSDN通过智能技术生成

翻译：疯狂的技术宅

www.smashingmagazine.com/2018/11/vir…

在本教程中，我们将创建三维对象并为它们添加简单的交互。此外，你还可以学到如何在客户端和服务器之间建立简单的消息传递系统。

虚拟现实（VR）是一种依赖计算机生成环境的体验，其应用范围广泛：美国利用虚拟现实进行冬季奥运会的运动训练；外科医生正在试验用虚拟进行医学培训；把虚拟现实用于游戏是最常见的一种应用。

我们将把目光放在最后一类程序上，并将专注于点击式冒险游戏。这是一种休闲类游戏，游戏的目标是通过选择场景中的三维对象来完成拼图。在本教程中，我们将在虚拟现实中构建一个简单的版本。这是一篇关于三维编程的介绍，是在 Web 上部署虚拟现实模型的独立入门指南。你将使用 webVR 进行构建，这个框架具有双重优势 —— 用户可以在VR中玩游戏，而没有VR眼镜的用户也可以在手机或桌面上玩。

在本教程的后半部分中，你将为桌面构建一个“镜像”。这意味着在移动设备上进行的所有移动都将会在桌面预览中进行镜像。这样你可以看到玩家所看到的内容，允许你提供指导、记录游戏，或只是让客人娱*乐。

至于为什么“娱”和“乐”中间有一个奇怪的符号，因为，这两个字连在一起在掘金是违规的，哈哈，不信你发文的时候可以试试～

前提条件

在开始之前你需要准备以下内容。对于本教程的后半部分，你将需要一台Mac OSX。虽然代码可以应用于任何平台，但下面依赖项的安装说明适用于Mac。

互联网接入，特别是glitch.com;
VR 眼镜（可选，推荐）。我用的是Google Cardboard，每个售价15美元。

步骤1：设置虚拟现实（VR）模型

在此步骤中，我们将设置一个包含单个静态 HTML 页面的网站。这样可以允许你从桌面进行编码并自动部署到Web上，然后可以将部署的网站加载到手机上并放入VR眼镜内。或者部署的网站可以由独立的 VR 眼镜加载。首先打开https://glitch.com/。然后

单击右上角的 “New Project” 。
单击下拉列表中的“hello-express”。

接下来，单击左侧边栏中的 views/index.html。我们将此称为你的“编辑器”。

要预览网页，请单击左上角的“Preview”。我们将此作为你的预览。请注意，编辑器中的任何更改都将会自动反映在预览中，除非出现错误或不受支持的浏览器。

返回编辑器，将当前HTML替换为下面 VR 模型的代码框架。

<!DOCTYPE html>
<html>
  <head>
      <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>

      <!-- blue sky -->
      <a-sky color="#a3d0ed"></a-sky>

      <!-- camera with wasd and panning controls -->
      <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"></a-entity>

      <!-- brown ground -->
      <a-box shadow id="ground" shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box>

      <!-- start code here -->
      <!-- end code here -->
    </a-scene>
  </body>
</html>
复制代码

之后可以看到以下内容：

要在VR眼镜上预览此功能，请使用 omnibar 中的URL。在上图中，URL 为 https://point-and-click-vr-game.glitch.me/。你的工作环境现在已建立，可以随时与家人和朋友分享这个URL。在下一步中，你将创建一个虚拟现实模型。

步骤2：创建一个树的模型

现在，我们将用 aframe.io 中的 primitives 创建一个树。这是 Aframe 为便于使用而预编程的一些标准对象。具体来说，Aframe 将对象称为实体（entities）。与实体相关的概念有三个：

几何和材质，
转换轴，
相对转换。

首先，几何和材质是代码中所有三维对象的两个构建块。几何定义了一系列的“形状” —— 立方体，球体，金字塔等。材质定义了形状的静态属性，例如颜色、反射率、粗糙度。

Aframe 通过定义基元来简化这个概念，例如 <a-box>，<a-sphere>，<a-cylinder> 以及许多其他基本原理来简化几何体及其材料。首先定义一个绿色球体。在代码的第19行，也就是 之后添加以下内容。

<!-- start code here -->
<a-sphere color="green" radius="0.5"></a-sphere>  <!-- new line -->
<!-- end code here -->
复制代码

其次，有三个轴可以转换对象。 x 轴是水平运动的，当我们向右移动时，x 值会增加。 y 轴垂直运行，y 值随着我们向上移动而增加。 z 轴用垂直你的屏幕，当对象向你移动时，z 值会增加。我们可以沿这三个轴平移，旋转或缩放实体。

例如，要将对象向“右”移动，我们需要增加其x值。要向上旋转对象，我们需要沿 y 轴旋转它。下面我们修改第19行来“向上”移动球体 —— 这意味着你需要增加球体的 y 值。请注意，所有转换都指定为 <x> <y> <z>，意味着要增加其y值，需要增加第二个值。默认情况下，所有对象都位于 0,0,0 位置。在下面添加 position 。

<!-- start code here -->
<a-sphere color="green" radius="0.5" position="0 1 0"></a-sphere> <!-- edited line -->
<!-- end code here -->
复制代码

第三，所有变换都相对于其父对象。要在树中添加树干，就在上方球体内添加圆柱体，这样可确定树干相对于球体的位置，还可以将你的树木整合为一个单元。在<a-sphere ...>和</ a-sphere>标签之间添加<a-cylinder>实体。

<a-sphere color="green" radius="0.5" position="0 1 0">
	<a-cylinder color="#84651e" position="0 -0.9 0"