本文介绍了如何使用HTML和A-Frame框架开发一个简单的VR游戏，包括A-Frame的基本框架设置，以及如何使用a-box元素添加3D立方体。读者无需VR设备也可体验，后续还将探讨更多形状和画面实现。
VR，即虚拟现实，不知道大家有没有用过呢？（笑）
市面上有很多的VR游戏，它们的基本原理是一样的，都是利用左右眼的视差，渲染一个虚拟的3D环境。并且用户也可以与这个3D的虚拟世界交互，让用户有更强的身临其境的感觉。
今天，我们将用我们熟悉的html语言，配合A-Frame框架，做一个VR游戏，无论你是否有一台VR设备，都可以体验。
让我们开干吧（哐）
1 A-Frame基本框架
A-Frame是一个开源的VR框架，github上可以找到。它只有一个主文件，就是aframe.min.js。
我们可以用html的<script>元素，加载这个文件。
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>整个页面还需要有个区块，所有VR的渲染都发生在这里。
<a-scene><!-- VR页面 --></a-scene>那么，整个html文件就是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>VR</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- More... -->
</a-scene>
</body>
</html>访问这个网页。如果一切顺利，那么屏幕上会是白茫茫一片。如果出现
点击蓝色的Allow。
接下去，让我们在我们的视野里，显示一个正方体。
2 元素a-box
a-box接受很多参数，常见有：
position：包含3个数字，分别为模型的X位置，Y位置，Z位置。
a-frame使用了类似于Minecraft的坐标系，XZ轴在平面上，Y轴是立着的。
这点很重要，一定要记住。
rotation：包含3个数字，分别为X轴旋转，Y轴旋转，Z轴旋转的角度。
color：模型颜色的RGB值，使用three.js的“#xxxxxx”或“#xxx”格式
width：模型X轴长度（长）
depth：模型Z轴长度（宽）
height：模型Y轴长度（高）
可以看看A- Frame官方文档：<a-box> – A-Frame
我们可以显示一个颜色为红色，3x3x3的立方体。
<a-box position="-1 0 -3" rotation="20 0 0" color="#f00" width="3" height="3" depth="3" />把这行代码加到上一节的代码中的<!-- More... -->后。效果如下：
有没有一点小激动呢（笑）？
如果你用的是手机，可以移动手机，来移动视角。
电脑可以移动鼠标。
当然，如果你有一台VR设备，也可以连接VR设备，获得更好的效果。
那今天就到这里吧，明天，我们要学习其他形状，实现更多的画面。
喜欢就点个赞吧^_^
2639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
