回复
一步步教你用 WebVR 实现虚拟现实游戏
level
发布于 2020-9-6 13:28
浏览
0收藏
在本教程中，我们将创建三维对象并为它们添加简单的交互。此外，你还可以学到如何在客户端和服务器之间建立简单的消息传递系统。
虚拟现实（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 -->之后添加以下内容。
<!-- 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" radius="0.05"></a-cylinder> <!-- new line -->
</a-sphere>
复制代码
接着添加两个的绿色球体作为更多的叶子。
<a-sphere color="green" radius="0.5" position="0 0.75 0">
<a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder>
<a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <!-- new line -->
<a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <!-- new line -->
</a-sphere>
复制代码
切换回预览，你将看到下面这颗树：
重新加载VR眼镜上的网站预览并查看。在下一节中，我们将使这棵树具有交互性。
步骤3：将Click Interaction添加到Model
要使实体具有交互性，你需要：
添加动画，
点击时触发动画。
由于最终用户使用VR眼镜，点击动作相当于凝视：换句话说，盯着一个对象就是“点击”它。要实现这些更改，我们将从光标开始。用以下内容替换第13行来重新定义相机。
<a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0">
<a-entity cursor="fuse: true; fuseTimeout: 250"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"
scale="0.5 0.5 0.5"
raycaster="far: 20; interval: 1000; objects: .clickable">
<!-- add animation here -->
</a-entity>
</a-entity>
复制代码
上面的代码添加了一个可以触发单击操作的游标。注意 objects: .clickable 属性。这意味着具有“可点击”类的所有对象将触发动画,并在适当的时候接收“单击”命令。我们还将向单击光标添加动画，以便使用户知道光标何时触发单击。当指向可点击的对象时，光标将缓慢收缩，在一秒钟后捕捉以表示已单击的对象。用以下代码替换注释 <!-- add animation here --> ：
<a-animation begin="fusing" easing="ease-in" attribute="scale"
fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation>
复制代码
将树向右移动 2 个单位，并修改第29行为以下内容将类 “clickable” 添加到树中。
<a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable">
复制代码
接下来，我们将：
指定动画，
点击即可触发动画。
感谢 Aframe 易于使用的动画实体，这两个步骤都可以快速连续完成。
在第33行添加一个 <a-animation> 标记，紧跟在 <a-cylinder> 标记之后但在 </a-sphere> 结尾之前。
<a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation>
复制代码
上述属性指定了动画的许多配置。动画：
由“click”事件触发
修改树的position
从原始位置 2 0.75 0开始
结束于2.2 0.75 0（向右移动0.2个单位）
往返目的地时的动画
在往返目的地之间的交替动画
重复此动画一次。这意味着对象动画总共播放两次： 一次到目的地，一次回到原始位置。
最后，切换到预览，然后从光标拖动到树。一旦黑色圆圈放在树上，树就会向右和向后移动。
这就结束了在虚拟现实中构建点击式冒险游戏所需的所有基础知识。要查看和播放此游戏的更完整版本，请参阅以下短片（alvinwan.com/shift/scene…
作者：前端先锋
来源：掘金
已于2020-9-6 13:28:12修改
赞
收藏
回复
相关推荐
