学习使用 Three.JS 创建 WebXR、VR 和 AR 体验
Learn to create WebXR, VR and AR, experiences using Three.JS
利用 WebXR API 和 Three.JS 为浏览器带来沉浸式体验、VR 和 AR,包括 Oculus Quest
学习内容
-
如何轻松创建可在浏览器中运行的 VR 和 AR 应用程序
-
如何使用 ThreeJS 库创建这些应用程序
-
如何处理控制器
-
如何将控制器替换为自定义模型
-
如何创建架构演练、游戏和培训应用程序。
-
如何添加世界 UI
-
开发支持真实世界命中测试的 AR 应用程序
-
了解游戏 VR 技术,例如使用控制器传送场景中的模型并与之交互。
要求
-
假定具有中级 JavaScript 能力
描述
WebXR 将 VR 和 AR 引入浏览器。该 API 背后有 Google 和 Amazon 的强大力量,因此看起来仅使用浏览器的沉浸式体验将在不久的将来产生巨大影响。WebXR 与 Oculus 耳机(包括 Oculus Quest 2)配合使用效果很好,Chrome Android 浏览器已经支持 AR(增强现实)和 VR(虚拟现实)体验的 API。但 WebXR 仅利用移动设备上的传感器,并创建如何使用这些数据的商定定义。要真正可视化 3D 内容,您需要一个 WebGL 库,没有比 Three.JS 更好的库了。这个成熟的开源 库在全球拥有众多用户,并得到许多开发人员的支持。在撰写本文时,Three.JS 的版本为 118,是一个强大的生产就绪型库。最近,该库中添加了 WebXR 支持。使开发人员能够轻松创建沉浸式体验。
在本课程中,您将了解使用 Three.JS 创建 VR 和 AR 体验是多么容易。要从课程中获得最大收益,您需要熟悉 JavaScript 编码。不需要其他先决条件。
该课程分为 10 个部分。
-
简介 – 我介绍了 WebXR 的历史,为刚接触 3D 概念的人提供了基本的入门知识,并向您展示了 Three.JS 网站和 WebXR 示例。
-
A Three.JS Primer – 适用于Three.JS新手,让您快速掌握库。
-
使用 Three.JS 的 WebXR 简介 – 我们认真查看您的开发环境并创建我们的第一个 WebXR 示例。
-
将复杂资源与Three.JS结合使用 – 您为沉浸式体验创建的大多数内容都需要复杂的资源,而获取、编辑、加载和使用它们是第 4 节的主题。
-
WebXR API – 对 WebXR API 进行了回顾。
-
创建架构演练 – 在第 6 节中,我们开始通过架构演练创建沉浸式内容的真实示例。
-
将产品放置在房间中 – WebXR 适合在一个人的家中展示真实的产品,这是第 7 节的主题。
-
将 WebXR 用于游戏 – VR 非常适合游戏,我们将在本节中介绍使用 WebXR 的游戏的基本组成部分。
-
使用 WebXR 进行培训 – 涵盖使用 VR 进行培训的重要主题。
-
结论 – 我们查看一些 WebXR 示例来激发您的灵感并回顾您所学到的知识。
您唯一需要的工具是一个代码编辑器,在课程中我使用 Brackets,可以免费在线获得。该课程包括全面的资源和代码示例。每个代码示例都带有两个版本,一个供您一起编写代码,另一个版本在您遇到问题时是完整的。我将向您展示如何使用 GitHub 在安全服务器上托管您的开发工作,以便您可以轻松地在头戴式设备(如 Oculus Quest)上测试您的工作
这会很有趣。
您将获得 30 天退款保证,因此您不会有任何损失,今天就去虚拟吧。
评论
“这是迄今为止最好的 Three JS 指南,非常有趣,清楚地解释了 3D 应用程序所需的部分。感谢 Nik 花时间阅读本文!迫不及待地想看看这门课程会带我去哪里!
“感谢您创建课程” – Three.JS 的创建者 Doob 先生
“当他之前在 Facebook 群组中宣布时,我们所有的 Nik 粉丝都在等待这个。他没有让我们失望。
“有史以来最好的介绍/历史视频”
“到目前为止很喜欢它!课程简明扼要。视频的长度似乎非常优化,这意味着它们不是很长,但充满了关于正在发生的事情的足够信息。提供的课程项目文件为课程学习过程提供了宝贵的帮助。
“它从基础知识开始,然后发展到高级主题。我喜欢它的节奏和解释。很棒的课程!
“很棒的课程,喜欢精心挑选的例子,正是我所需要的!”
“优秀的课程,我惊讶于尼古拉斯的记录和高质量的内容,强烈推荐。干杯!
“我以前从未听说过如此简单而愉快的 threejs 应用程序开发叙述,现在我意识到作者有多么有才华。”
本课程适合谁:
- 任何有兴趣利用最新的 WebXR API 创建在浏览器中运行的 VR 和 AR 体验的人,无需额外的安装要求。
评论(0)