一步步教你用-WebVR-实现虚拟现实游戏
翻译：疯狂的技术宅https://www.smashingmagazine.... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 在本教程中，我们将创建三维对象并为它们添加简单的交互。此外，你还可以学到如何在客户端和服务器之间建立简单的消息传递系统。 虚拟现实（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>之后可以看到以下内容： ...