用JavaScript和Google纸板过滤现实-js教程-PHP中文网

用JavaScript和Google纸板过滤现实

钥匙要点

利用JavaScript和HTML5，该项目通过Google Cardboard将移动浏览器转换为增强现实（AR）查看器，利用手机的摄像头来覆盖现实世界环境上的过滤器。
>
技术设置包括使用三库库来处理3D渲染和立体效果，以确保适合VR耳机中每只眼睛的双显示器。
>一个值得注意的功能是基于用户的凝视方向的过滤器的动态切换，特别是在低头时，由deviceorientationEvent促进。
该项目强调了将网络技术和VR硬件组合起来的潜力，直接从网络浏览器中创建沉浸式AR体验，为创新的教育，娱乐和商业应用铺平了道路。
>在移动浏览器中运行虚拟现实的能力是增强和令人兴奋的能力。 Google Cardboard和其他类似的VR设备使其令人难以置信的简单，只需将手机放入持有器中即可！我之前介绍了将VR带到网络上的Google Cardboard和Thrive.js，在那里我讨论了构建吸引Web数据的VR环境的基础知识。人们真的很喜欢这篇文章（我真的很喜欢构建该演示），所以我认为我会以不同的想法扩展它。与其引入网络API，为什么不带您的手机相机并将其变成增强的现实体验？在本文中，我将探讨如何使用HTML5和JavaScript删除相机数据并将其显示回。我们将通过立体视觉效果来完成所有这些操作，为Google纸板和其他VR设备创造增强的现实体验。我们将在相机流中应用一些不同的过滤器 - 卡通灰度过滤器，棕褐色膜样式过滤器，像素化过滤器（我的最爱）和倒色过滤器。

演示代码

如果您渴望直接进入代码并尝试一下，则可以在GitHub上找到它。

>是否想在行动中尝试？我在这里托管了一个跑步版本：真实过滤器。

>注意：Chrome处理相机输入的最新变化要求通过HTTPS运行该页面才能正常工作！ 这将如何工作

>我们将从以前的Google Cardboard文章中进行相同的初始设置，即通过立体效果展示的三个.js场景。这种效果使我们可以为每只眼睛显示一个显示，使事物在VR中看起来非常好。但是，我们没有从上一篇文章中浮动粒子，而是删除大多数元素，并将一个简单的三个js网眼放在播放我们的相机供稿的相机前。

我们的代码解释了

>查看我们的变量声明，对于那些经历过以前的演示的人来说，这里的大多数变量看起来都会熟悉。准备三个。JS场景，相机，渲染器，我们的画布输出的元素，放置该元素的容器以及存储我们立体镜的变量的变量都是相同的。

>

>我们与相机提要相关的三个新变量是视频，画布和上下文。

<span>var scene,
</span>      camera<span>, 
</span>      renderer<span>,
</span>      element<span>,
</span>      container<span>,
</span>      effect<span>,</span>

登录后复制

>视频 - 我们的实际HTML5

video<span>,
</span>      canvas<span>,
</span>      context<span>,</span>

登录后复制

画布 - 一种虚拟帆布元素，它将具有我们视频元素的内容。我们将在此画布的视频数据中阅读，然后将其内容添加到我们的三个js场景之前。

我们还有其他一些与我们的滤波器功能相关的变量。

主题 - 我们过滤器的名称的数组。

currestheme - 我们当前在主题数组中查看的索引。>

寻找attrock-无论我们是否看过地面（这很快就会变得更有意义）。

themes <span>= ['blackandwhite', 'sepia', 'arcade', 'inverse'],
</span>      currentTheme <span>= 0,
</span>      lookingAtGround <span>= false;</span>

登录后复制

我们从init（）函数开始设置场景，相机等，如以前：
>我们从上一个示例中保留的一个侦听器是一个事件侦听器，如果我们点击场景，可以全屏进行全屏。这从我们的视图中删除了Chrome地址栏。

用于deviceerientationEvent

>在此演示中，对于deviceorientationevent有了新的用途。我们将其设置为关注设备方向的更改，并将其用作切换过滤器的触发器。我们实际上没有任何物理控件来触发事件，因此我们可以通过用户寻找的位置来控制事物。特别是，我们任何时候都会更改过滤器。

<span>var scene,
</span>      camera<span>, 
</span>      renderer<span>,
</span>      element<span>,
</span>      container<span>,
</span>      effect<span>,</span>

登录后复制

在此代码中，我们注意evt.gamma是否在-1和1之间。如果是，他们正在看地面。这是一个非常精确的地面点，如果您发现它太小且难以触发，则可以将范围增加到-1.5至1.5…等。

>当他们在此范围内查看时，当fookatground为false时，我们运行主题切换器代码。这将CurrentTheme调整为我们主题数组的下一个索引编号。我们将LookingAtground设置为True，并在4秒后将其设置回。这样可以确保我们最多只能每四秒更改一次过滤器。

>检索我们的主相机供稿

为了过滤我们周围的世界，我们需要访问智能手机上的“环境”面向摄像头。我们首先创建一个