让我们编写一个简单的WebVR游戏！电视电影小迷妹 TVco.cn

这是高级技能级别的文章，对于某些人来说可能是真正的挑战。 我将尽可能简洁。 您想在WebVR中构建一个简单的游戏。 您具有HTML5，JavaScript技能和一些空闲时间。

我们将执行驻留在Web服务器上的代码（您需要访问其中一个代码），并在浏览器中运行，并在VR头盔中查看（需要硬件，最低3DoF）。这些只是要进行的一些先决条件。

好的，您有这些东西或可以得到它们，所以让我们开始吧。。。

我们将使用免费的JavaScript A框架Github库作为我们大多数游戏的基础。因此，让我们看一下它们（他们在那里供人们参考，很多伟大的人已经付出了一些非常艰苦的工作，所以在可能的情况下感谢他们）：

一个框架

Aframe环境组件

超级手

Aframe-Alongpath组件

框架曲线分量

A-Frame Extras

我们还将使用其他Github库，但这是基础知识。 A-Frame是我们的基础，没有它，我们将直接编码Three.js（如果您选择的话，仍然可以）。

我发现Aframe-Environment-Component是通过代码创建3D VR环境的最简单方法。 Super Hands是操纵各种控制器的最简单方法，因此我在本示例中选择了Super Hands。当然，还有其他方法，但没有一个如此简单。

动画组件将用于为游戏中的对象设置动画。我们将使用“行人路径”和“曲线”组件在游戏中创建跟踪对象，并在我们周围移动这些对象。附加功能只是简单有用。会有其他人，但现在让我们集中精力。

现在，我不会解释A-Frame的基础知识，因为有很多文章都是这样做的，然后在互联网上以文字和视频形式进行搜索。

练习

我们试图做的一些高级解释是有序的。首先，我们将建立一个环境，将您带入其中。将旋转的鸭子放在其中，然后将鸭子放在圆形轨道上。设置激光控制装置以拍摄鸭子，射击鸭子，从鸭子发出声音，然后使鸭子消失。简单吧？容易，不完全是！

详细设置

步骤1.将提到的Github库安装到您的Web服务器上（ 不过这取决于您，这确实需要一些时间，老派： 我只是通过FTP 挖矿，您可能会在其中找到一些CDN，但实际上需要 在服务器上设置 一些 SSL功能 ，但这不在本文讨论的范围之内）将它们放在您创建的名为“ webvr”的目录中。

   
   
   
   
  简单的WebVR游戏 
    
   
   
   
   
    
    
    
    
    
    
   
   
   
  <a-camera look-controls wasd-controls mouse-cursor id =“ camera_zoom” position =“ 0 1.6 0” user-height =“ 1.6” 
  animation =“ property：position; 
  dur：15000; 
 来自：0 8 75; 
 至：0 1.6 0; 
 缓动：easeInOutSine; 
 循环：假; 
 方向：正常”>

步骤2.使用适当的代码编辑器复制并修改上面提供的代码（第11-16行）。将括号和所有“ {替换您的网络服务器路径}”替换为网络服务器的实际路径。在“ webvr”目录内创建一个名为“ html”的目录。将修改后的代码放在服务器上的html目录中，并将其另存为SimpleGame.html。这是我们将上传所有更新代码的位置。

我们的第一部分高级“ Hello World”代码将设置环境并将您带入其中。这意味着相机的位置（眼睛）将从场景的边缘移到中心。简单游戏的启动效果非常出色。

步骤3.在启用WebVR的浏览器地址栏中执行URL（建议使用FireFox）。 Chrome可能会在不久的将来禁用某些功能。

https：// {您的网域路径} /webvr/html/SimpleGame.html

如果成功，您应该会看到绿色公园般的环境。单击浏览器右下角的白色护目镜，进入VR模式，头戴VR耳机观看场景。环顾四周，您现在可以在其上构建其余游戏。到目前为止做得好！继续。

查看代码，您可以看到动画属性是如何从0 8 75更改为：0 1.6 0的。 “森林”的环境预设属性是我们获取公园场景的方式。您也可以更改此设置，请参见Github环境文档。

如果您有问题 ，我应该老实告诉您，调试并不总是那么容易，但是右键单击屏幕中间的鼠标即可访问浏览器的“检查元素”菜单选项，然后选择并查看“控制台”选项卡，您会在那里看到任何明显的错误。暂时忽略警告，有时它们很重要，有时不重要。如果您在获取正确的Web服务器正确路径方面遇到问题，这应该对您有所帮助。

好，到目前为止很无聊。我们需要一个对象。

步骤4.在“ webvr”下创建另一个目录，并将其命名为“ gltf”。将3D模型的文件解压缩并复制/上传到该目录中。

  <a-entity gltf-model =“ url（https：// {替换您的网络服务器路径} /webvr/gltf/Duck.gltf）” 
  animation__rotate =“属性：旋转； dur：2000；缓和：线性；循环：true；到：0 360 0” 
  position =“ 0 1.6 -5”>

步骤5.现在，在之后修改并添加此代码。像以前一样替换您的Web服务器路径。将更改保存并上传到html目录，然后像以前一样在浏览器中进行测试。

现在，您的VR浏览器正在为您提供旋转的橡皮鸭。在我们的游戏中可以射击的东西。请参阅：这是到目前为止您应该拥有的。到目前为止还不错，对于34行HTML来说还不错，因为A-Frame和其他库正在完成大部分工作！

我们继续吧。为鸭子添加跟踪。关闭相机后立即使用此代码。

最后，用以下代码替换鸭子的：

这会将鸭子代码移到中以更好地加载，并将鸭子移动设置为“ alongpath”。照常上传代码，然后在浏览器中进行测试。看：现在让我们看一下。

激光时间

步骤6。（最终代码）

让我们的激光工作。另外，请确保到目前为止您拥有所有正确的代码，并且还有更多。您已经知道必须使用实际的路径“ {替换您的网络服务器路径}”。到现在为止，您已经习惯了进行更改，并将其保存在Web服务器上的html目录中，并保存为“游戏服务器”，而浏览器则保存为小型“游戏引擎”。

  var squawk = new Audio（'https://rocketvirtual.com/webvr/examples/mp3/duck.mp3'）;

  //可点击的组件 
  AFRAME.registerComponent（'cursor-listener'，{ 
 初始化：函数（）{ 
  this.el.addEventListener（'click'，function（evt）{

  this.setAttribute（'visible'，false）;

  //document.getElementById('movingDuck').setAttribute('visible'，true）; 
  }）; 
  } 
  }）;

  //执行onclick的函数 
 函数trigger_laser（）{ 
  squawk.play（）; 
  }

   
   
   
   
  <a-mixin id =“ pointer” raycaster =“ showLine：true;对象：.clickable，a-link” 
  super-hands =“ colliderEvent：raycaster-intersection; 
  colliderEventProperty：els; 
  colliderEndEvent：raycaster-intersection-cleared; 
  colliderEndEventProperty：clearedEls;“> 
  <a-mixin id =“ controller-right” mixin =“ pointer” 
  vive-controls =“ hand：right” oculus-touch-controls =“ hand：right” 
  Windows-motion-controls =“ hand：right” 
  gearvr-controls白日梦-controls oculus-go-controls>

  <a-camera look-controls wasd-controls mouse-cursor id =“ camera_zoom” position =“ 0 1.6 0” user-height =“ 1.6” 
  animation =“ property：position; 
  dur：15000; 
 来自：0 8 75; 
 至：0 1.6 0; 
 缓动：easeInOutSine; 
 循环：假; 
 方向：正常”>

需要注意的几件事：

第一个（第37行）中的.clickable匹配第49行的“ movingDuck” 中的class =“ clickable”。请注意，同一中的“ cursor-listener”是第20行的JavaScript代码中使用的标签，它是AFRAME.registerComponent。

我注释掉了音轨，在onclick =” function（）”上为鸭子添加了声音。这次我们并没有最终使用Aframe Extras，因此我也对此予以评论。也许下一篇。

在以后的文章中，我们将继续对此进行扩展。 请参阅：这是最终工作的非常简单的游戏代码。

希望你喜欢。大约75行A-Frame，HTML和JavaScript，我们拥有一个简单的WebVR游戏的基础知识！

在太空转盘见。。。在此之前，请在RocketVirtual.com上签出更多内容