学习使用 Three.JS 创建 WebXR、VR 和 AR 体验
利用 WebXR API 和 Three.JS 将沉浸式体验、VR 和 AR 引入浏览器,包括 Oculus Quest
讲师:Nicholas Lever
口袋资源独家Udemy付费课程,独家中英文字幕,配套资料齐全!
用不到1/10的价格,即可享受同样的高品质课程,且可以完全拥有,随时随地都可以任意观看和分享。
你将学到什么
- 如何轻松创建在浏览器中运行的 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 示例。
- 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 群组中宣布这一消息时,我们所有尼克粉丝都在等待这一消息。他没有让我们失望。 ”
“有史以来最佳介绍/历史视频”
“到目前为止很喜欢!课程简洁明了。视频的长度似乎非常优化,这意味着它们不是很长,但充满了有关正在发生的事情的足够信息。提供的课程项目文件构成了宝贵的便利在完成课程的路上。”
“它从基础知识开始,然后进展到高级主题。我喜欢节奏和解释。很棒的课程!”
“很棒的课程,喜欢精心挑选的例子,正是我需要的! ”
“非常棒的课程,尼古拉斯的文档如此详尽,内容也如此高质量,让我感到惊讶,强烈推荐。干杯!”
本课程适合谁:
- 任何有兴趣利用最新的 WebXR API 创建无需额外安装即可在浏览器中运行的 VR 和 AR 体验的人。