今天如何在网络上构建VR-js教程-PHP中文网

>在网络上构建VR的前提是什么？您还应该熟悉用于渲染2D和3D图形的JavaScript API WebGL。 Trix.js的知识是一个流行的JavaScript库，用于创建3D图形，也是有益的。此外，您应该有一个VR耳机来测试您的VR体验。

javascript以及诸如three.js和a-frame之类的库，可以用于创建VR体验。三。js简化了使用WebGL的过程，而A框架允许您使用类似于HTML的语法构建VR场景。您可以使用这些工具创建3D对象，添加纹理和照明以及控制摄像机移动。

webvr是JavaScript API这为Web浏览器中的各种虚拟现实设备（例如Oculus Rift，HTC Vive和Google Cardboard）提供了支持。它允许开发人员在网络上创建沉浸式的VR体验，这些体验可供拥有VR设备和兼容浏览器的任何人访问。

如何优化网络的VR体验？ Web涉及减少延迟，有效地管理内存和优化渲染。您可以使用异步加载，纹理压缩和细节级别（LOD）等技术来提高性能。另外，考虑用户硬件和网络条件的局限性。

在网络上构建VR时，我可能会面临哪些挑战？

>在哪里可以了解有关在网络上构建VR的更多信息？ Mozilla的WebVR文档是一个很好的起点。您还可以在三个和A框网站上查看教程和示例。此外，在许多在线社区中，您可以提出问题并分享您的作品。

首页

web前端

js教程

今天如何在网络上构建VR

Lisa Kudrow

Feb 19, 2025 am 10:47 AM

今天如何在网络上构建VR

到2020年，虚拟现实的价值最高为70亿美元。在此期间，网络绝对不会成为仅限的2D环境。实际上，已经有几种简单的方法将VR带入浏览器。与之合作！

也非常有趣

开始您的发展冒险进入虚拟网络，有三种潜在的方法可以做到这一点：>

> javascript，三分和观看设备方向

> javascript，三。
（仍然很早就） >我将仔细阅读每个人的工作方式。
通过三种主要方法，可以将虚拟现实（VR）纳入Web开发中：JavaScript，三js和观察设备方向； JavaScript，三。js和webvr；和CSS和WebVr。

。

> JavaScript，Trix.js和WebVR是一种实验方法，目前最适合访问VR耳机方向，例如Oculus Rift。它使用WebVR API提供对VR设备信息的访问。

>目前处于开发的早期阶段的CSS和WebVR方法旨在将CSS 3D变换与VR全屏模式集成。

>为Web创建VR体验被视为采用VR技术的关键驱动力，而Boris Smus的WebVR样板建议作为希望为Web建立VR体验的开发人员的最佳起点。 >

> javascript，三分和观看设备方向
>目前大多数基于浏览器的虚拟现实项目工作的方式之一是通过设备方向浏览器事件。这告诉浏览器如何定向设备，并允许浏览器在旋转或倾斜时拾取。在VR视角内的此功能使您可以检测到某人何时环顾并调整相机以跟随他们的目光。
为了在浏览器中实现出色的3D场景，我们使用了Trix.js，这是一个JavaScript框架，可以轻松创建3D形状和场景。它使大部分复杂性都无法汇集3D体验，并让您专注于试图在场景中放置的内容。
>我在SitePoint上写了两个使用设备方向方法的演示：

>将VR带到网络上，使用Google纸板和三个。
>

>这些关键组件涉及以下JavaScript文件（您可以从上面的示例演示中获取这些文件，并且还会在三个示例下载中找到它们）：

> DeviceErientationControls.js - 这是提供我们上面讨论的设备方向的三个插件。它可以移动我们的相机以满足我们设备的动作。
> orbitControls.js - 这是一个备份控制器，如果我们没有可以访问设备方向事件的设备，则可以使用鼠标移动相机。
> stereoefect.js - 一个三。效应，将屏幕分成立体镜图像，每只眼睛像VR一样略有不同。这会创建实际的VR分屏屏幕，而无需我们做任何复杂的事情。>
>设备方向

>

设备方向事件侦听器具有兼容设备时提供alpha，beta和伽马值。如果我们没有任何alpha值，它不会改变我们的控件以使用设备方向，以便我们可以使用轨道控件。

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

登录后复制

Orbit Controls

如果不存在该alpha值，并且我们无法访问设备的设备方向事件，则该技术提供了一个控制，可以通过使用鼠标将相机拖动来移动相机。看起来很这样：

>上面代码可能会混淆的主要内容是Nopan和Nozoom。基本上，我们不想通过鼠标在场景中进行物理移动，我们不想能够放大或缩小 - 我们只想环顾四周。

立体声效果

为了使用立体声效果，我们将其定义为So：

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

登录后复制

然后在窗口的大小上，我们更新其大小：

>

在每个requestAnimationframe中，我们设置了场景以通过我们的效果来渲染：

这是设备方向样式实现VR的工作方式的基础知识。它对于使用Google纸板进行了精美而简单的实现可能是有效的，但是在Oculus Rift上并没有那么有效。下一个方法对裂谷要好得多。

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

登录后复制

> javascript，三。

希望访问像Oculus Rift这样的VR耳机方向？ WebVR目前是这样做的方式。 WebVR是一种早期且实验性的JavaScript API，可访问Oculus Rift和Google Cardboard等虚拟现实设备的功能。目前，它可以在每晚的Firefox上使用，以及一些实验性的移动铬和铬。要记住的一件事是，它的规格仍在草稿中并且可能会发生变化，因此请尝试一下，但要知道您可能需要随着时间的推移进行调整。

> 总体而言，WebVR API通过以下方式提供对VR设备信息的访问

>我不会在这里详细介绍很多技术细节（我将在其未来的SitePoint文章中进行更详细的详细信息！），如果您有兴趣查看更多信息，请查看WebVR编辑器的草案。我之所以不会详细介绍的原因是，有一种实现API的方法。

实现WebVR API的上述易于使用的方法是使用Boris Smus的WebVR样板。它提供了良好的基准功能，可以实现WebVR并优雅地降低不同设备的体验。目前，这是我见过的最好的Web VR实现。

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

登录后复制

如果您想为网络构建VR体验，这是当前最佳起点的地方！

要开始使用此方法，请在GitHub上下载WebVR样板。

>您可以专注于编辑index.html并使用该设置中的所有文件，也可以从头开始将特定的插件实现到自己的项目中。如果您想比较每个实现的差异，我将在VR中的Twitter流中可视化的Twitter流迁移，并从上面的three.js和Node示例迁移到VR中的WebVR驱动的Twitter流中。 要将此项目从头开始，您要拥有的文件是：>

>三。min.js - 我们的三框架框架

> vrcontrols.js - 通过WebVR进行VR控件的三分插件（可以在Boaler_components/trixjs/xplass/js/js/controls/vrcontrols.js中找到boble_components in Boolerplate Project中的
>>>>>>>>
> vreffect.js - VR效应本身的三分插件，显示了oculus Rift的场景（可以在BOWER_COMPONENTS/TRIFE_COMPONENTS/TRINE JS/示例/JS/js/js/effects/vreffect.js中找到锅炉板项目）

> webvr-polyfill.js - 这是浏览器的多填充，这些浏览器尚未完全支持WebVR（可以在GitHub和Bower_components/webvr-polyfill/webvr-polyfill/webvr-polyfill.js中找到。代码）

> webvr-manager.js - 这是为您管理所有内容的样板代码的一部分，包括提供一种输入和退出VR模式的方法（可以在build/webvr-manager.js中找到）

实施它仅需要从设备方向方法进行一些调整。这是那些想尝试此方法的人的概述：
>
控制

VR控件非常易于设置。我们可以将一个新的VRControls对象分配给我们之前使用的控件变量。轨道控件和设备方向控制不应是必需的，因为现在的样板现在应在没有VR功能的情况下照顾浏览器。这意味着您的场景在Google纸板上也应该很好！

> vr效应
function setOrientationControls(e) { if (!e.alpha) { return; } controls = new THREE.DeviceOrientationControls(camera, true); controls.connect(); controls.update(); element.addEventListener('click', fullscreen, false); window.removeEventListener('deviceorientation', setOrientationControls, true); } window.addEventListener('deviceorientation', setOrientationControls, true); function fullscreen() { if (container.requestFullscreen) { container.requestFullscreen(); } else if (container.msRequestFullscreen) { container.msRequestFullscreen(); } else if (container.mozRequestFullScreen) { container.mozRequestFullScreen(); } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(); } }
登录后复制
登录后复制
登录后复制
登录后复制

效果与立体表的实现非常相似。只需将该效果替换为我们的新vreffect：
>
但是，我们在这种方法中不会通过这种效果呈现。相反，我们通过VR Manager渲染。
>
controls = new THREE.OrbitControls(camera, element); controls.target.set( camera.position.x, camera.position.y, camera.position.z ); controls.noPan = true; controls.noZoom = true;
登录后复制
登录后复制
VR Manager

VR经理会照顾我们所有进入/退出等等的VR，因此这是我们的场景最终呈现的地方。我们最初通过以下内容进行设置：

> VR Manager提供一个按钮，如果用户在兼容浏览器上，则可以输入VR模式，或者如果浏览器无法使用VR，则可以将其输入全屏（全屏是我们想要的移动设备）。 hidebutton参数说我们是否要隐藏该按钮。我们绝对不想隐藏它！
然后，我们的渲染呼叫看起来像是这样，它使用了来自我们的three.js的update（）函数的时间戳变量：
effect = new THREE.StereoEffect(renderer);
登录后复制
登录后复制
>
在所有这些方面，您应该拥有一个工作的VR实现，该实现将根据设备转化为各种格式。

>
> renderer.getSize（）返回错误？这让我发疯了几个小时，但是要解决此问题，您需要做的就是 - 更新三个。
effect.setSize(width, height);
登录后复制
webvr样板在动作中的外观
这是我的Twitter示例的视图在支持VR的浏览器上的样子：

在Oculus Rift视图中，当您单击VR图标时会出现：
>
这是智能手机上的视图，设备方向仍然使我们能够环顾场景，而我们没有分屏屏幕。内容的良好响应视图：

如果我们单击移动设备上的VR图标，我们将获得Google Cardboard样式设备的全屏视图：

> css和webvr
Mozilla的目标是在Firefox Nightly版本中为其浏览器带来VR观看功能，但是很早就！我的运气并没有太多运气，可以在我的Mac和Oculus设置上工作。 Firefox的VladimirVukićević提到的各种惯例包括将CSS 3D转换与VR全屏模式集成。
>
作为弗拉基米尔（Vladimir）的博客文章的一个例子，他说具有转换风格的元素：preserve-3d应该从两个角度呈现两次，以将其引入VR：>

如果您知道使用VR和CSS的任何演示，请告诉我！我无法追踪任何东西。将网络的HTML和CSS一部分带入VR的想法无疑是一个非常有趣的概念。当我们都慢慢转移到VR设备时，网络不可避免地会进入这样的VR领域！
function setOrientationControls(e) { if (!e.alpha) { return; } controls = new THREE.DeviceOrientationControls(camera, true); controls.connect(); controls.update(); element.addEventListener('click', fullscreen, false); window.removeEventListener('deviceorientation', setOrientationControls, true); } window.addEventListener('deviceorientation', setOrientationControls, true); function fullscreen() { if (container.requestFullscreen) { container.requestFullscreen(); } else if (container.msRequestFullscreen) { container.msRequestFullscreen(); } else if (container.mozRequestFullScreen) { container.mozRequestFullScreen(); } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(); } }
登录后复制
登录后复制
登录后复制
登录后复制
结论

技术世界正在缓慢但肯定会在未来几年内拥抱虚拟现实，因为我们的技术能力与我们的野生愿望相吻合！驱动VR采用及其价值的一件事是内容。我们需要在那里获取VR内容供VR用户享受！有什么比通过网络更好，更容易的方法？
>
>如果您尝试使用此代码构建VR演示，请在评论中分享或在Twitter上与我联系（@thatpatrickguy）。我很想戴上我的Oculus Rift或Google Cardboard，然后将其旋转！
>
>我通过JavaScript在VR和AR上有一组策划的链接，以寻求快速参考。前往Dev Diner，并使用JavaScript开发人员指南查看我的Dev Diner VR和AR，并包含本文中提到的两个链接，其他很棒的Sitepoint文章等。如果您还有其他很棒的资源，我没有列出过 - 请告诉我！
>

经常询问有关在网络上构建VR的问题

>在网络上构建VR的前提是什么？您还应该熟悉用于渲染2D和3D图形的JavaScript API WebGL。 Trix.js的知识是一个流行的JavaScript库，用于创建3D图形，也是有益的。此外，您应该有一个VR耳机来测试您的VR体验。
>
>如何使用JavaScript？

javascript以及诸如three.js和a-frame之类的库，可以用于创建VR体验。三。js简化了使用WebGL的过程，而A框架允许您使用类似于HTML的语法构建VR场景。您可以使用这些工具创建3D对象，添加纹理和照明以及控制摄像机移动。

什么是WebVR，它与Web上的VR有何关系？

webvr是JavaScript API这为Web浏览器中的各种虚拟现实设备（例如Oculus Rift，HTC Vive和Google Cardboard）提供了支持。它允许开发人员在网络上创建沉浸式的VR体验，这些体验可供拥有VR设备和兼容浏览器的任何人访问。

我可以使用JavaScript以外的其他编程语言在网上构建VR？ 🎜> JavaScript是包括VR在内的Web开发的主要语言。但是，您可以使用编译为JavaScript的语言，例如TypeScript或CoffeeScript。此外，WebAssembly允许您在浏览器中以近距离速度以C等语言编写代码。

如何优化网络的VR体验？ Web涉及减少延迟，有效地管理内存和优化渲染。您可以使用异步加载，纹理压缩和细节级别（LOD）等技术来提高性能。另外，考虑用户硬件和网络条件的局限性。

>如何使我的VR体验可供没有VR设备的用户访问？
您可以为没有VR设备的用户创建后备。例如，您可以使用设备方向API来允许用户通过移动其移动设备来探索VR场景。您还可以提供360度的视图，用户可以使用鼠标或触摸进行导航。
如何在网络上测试我的VR体验？
您可以使用vr经验来测试您的VR体验VR耳机。如果您没有耳机，则可以将WebVR仿真器扩展用于Chrome和Firefox。该工具模拟WebVR API并提供了VR场景的3D视图。
>
>如何将我的VR Creations从Thrix.js导出到A-FRAME？

您可以使用GLTF Exporter以三个js的形式以A框架可以读取的格式导出3D模型。 GLTF（GL传输格式）是用于3D场景和型号的标准文件格式。

在网络上构建VR时，我可能会面临哪些挑战？

>一些挑战包括在3D环境中处理用户输入，优化性能以及确保在不同的VR设备和浏览器上兼容。此外，创建现实的3D图形和动画可能很复杂。

>在哪里可以了解有关在网络上构建VR的更多信息？ Mozilla的WebVR文档是一个很好的起点。您还可以在三个和A框网站上查看教程和示例。此外，在许多在线社区中，您可以提出问题并分享您的作品。
>

以上是今天如何在网络上构建VR的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn