如何用网页制作 VR,一个新的视频系列

虚拟现实 (VR) 看起来很复杂,但借助一些 JavaScript 库和工具,以及 WebGL 的强大功能,您可以制作非常不错的 VR 场景,可以在像 Oculus Go 或 HTC Vive 这样的头戴设备中查看和分享,也可以在桌面网页浏览器或智能手机上查看和分享。让我来向您展示如何操作。

在这个新的 YouTube 系列中,如何在浏览器中使用 three.js 和 WebVR 制作虚拟现实项目,我将带您完成一个互动生日卡的制作,它包含七个简短的教程,并附有代码和示例,让您快速上手。整个系列时长不到 60 分钟。我们将从在屏幕上创建一个基本的立方体开始,添加一些精美的 3D 模型,设置灯光和导航,最后添加音乐。

您只需要具备基本的 JavaScript 技能和网络连接。

以下是整个系列。快来加入我吧!

1: 学习如何使用 WebVR 和 JavaScript 在网页上构建虚拟现实场景

2: 设置您的 WebVR 工作流程和代码以构建虚拟现实生日卡

3: 使用 WebVR 编辑器 (Spoke) 创建有趣的 3D 生日卡

4: 如何在虚拟现实场景中创建逼真的灯光

5: 如何使用传送在虚拟现实中移动,以导航您的场景

6: 通过几行代码将文本和文本效果添加到您的 WebVR 场景中

7: 如何在您的 WebVR 场景中添加声音和天空等收尾工作

  

要学习如何使用 Web 技术制作更多酷炫的东西,请订阅 Mozilla Hacks 的 YouTube 频道。如果您想更多地参与到为网页创建混合现实体验的学习中,您可以在 Twitter 上关注 @MozillaReality,以获取新闻、文章和更新。

关于 Josh Marinacci

我是一位作家、研究员,也是一名正在康复的工程师。以前曾在 Sun 的 Swing 团队、Palm 的 webOS 团队和诺基亚研究中心工作过。我传播良好用户体验的信息。我和妻子以及天才的乐高搭建师孩子住在阳光明媚的俄勒冈州尤金。

更多 Josh Marinacci 的文章……


10 条评论

  1. Hernani

    我对学习非常感兴趣,我认为我找到了一位优秀的老师。

    2019 年 1 月 24 日 下午 2:20

  2. Richard

    关于 WebVR 的很棒的教程!我迫不及待地想试试它。它看起来很有趣,而且学习曲线很小。

    2019 年 1 月 24 日 下午 5:36

  3. Amadou Wane

    我喜欢 VR

    2019 年 1 月 24 日 晚上 8:31

  4. Alex Haan

    感谢您在教程视频中提供清晰的解释。

    它在桌面版 Chrome 上运行良好。不过我在 Firefox 上遇到了一些问题,因为它一直想启动 SteamVR。但是有一个关于它的错误正在修复中。

    在桌面版 Chrome 中,由于包含 pointer.js,摄像头可以很好地跟随鼠标移动。该模块似乎暗示触摸屏上的滑动也应该移动摄像头。但是我在 Chrome 和 Firefox 的 Android 上打开了这个场景,我无法通过触摸来平移摄像头。

    难道触摸平移需要更多代码吗?

    2019 年 1 月 25 日 上午 5:18

    1. Josh Marinacci

      它确实需要更多对触摸平移的支持。触摸事件会移动光标/指针对象,但不会移动摄像头。我的样板代码实际上并不支持触摸。我正在研究这个问题。

      2019 年 1 月 26 日 上午 7:11

  5. Anand prabhakar

    感谢您的教程,先生。
    我现在可以学习一些新东西了。

    2019 年 1 月 28 日 上午 8:46

  6. Mman

    您好!
    很棒的资源!
    我正在尝试按照您的步骤操作,但是,我想知道您使用的是哪个 Web 服务器来本地提供静态网页。

    谢谢。

    2019 年 2 月 6 日 上午 6:44

    1. Josh Marinacci

      我使用的是 Mac 内置的 Web 服务器,但任何 Web 服务器都可以。您也可以使用 Glitch.com。

      2019 年 2 月 7 日 下午 1:14

  7. Gustavo

    您好,您能将乐器放在电池上,并用鼓槌与电池互动吗?

    2019 年 2 月 7 日 上午 8:21

    1. Josh Marinacci

      我不理解您的问题。

      2019 年 2 月 7 日 下午 1:13

本文的评论已关闭。