nginx mozilla_Mozilla，Web虚拟现实和A-Frame

本是古典何须时尚 2023-02-22 03:36 23阅读 0赞

nginx mozilla

![format_png][]

I was fortunate enough to make Game Developer Conference this year and the big story was virtual reality.  Hell, you couldn't go five feet without seeing someone pitching their VR hardware, software, or likewise technology.  They were all proprietary solutions, including Oculus, Epic Games, and so on.  You know that Mozilla, however, would provide a VR solution but in the most webby, open way possible:  [the WebVR spec][].  Along with trying to create an open standard for virtual reality, Mozilla has created a Web Component-based solution for creating 3D visualizations:  [A-Frame][].

我很幸运地参加了今年的游戏开发者大会，而最大的故事是虚拟现实。 地狱，您不能不走五尺，而不必看到有人在宣传他们的VR硬件，软件或类似技术。 它们都是专有解决方案，包括Oculus，Epic Games等。 您知道Mozilla会提供VR解决方案，但是会以大多数Webby，开放的方式提供： [WebVR spec][the WebVR spec] 。 除了尝试为虚拟现实创建开放标准外，Mozilla还创建了基于Web组件的解决方案来创建3D可视化： [A-Frame][] 。

If you're familiar with the Web Components spec, you know that the idea is creating first-class HTML elements with JavaScript under the hood to handle lifecycle and behavior.  Here is a sample web component HTML structure:

如果您熟悉Web组件规范，那么您就会知道，该想法是在后台使用JavaScript创建一流HTML元素来处理生命周期和行为。 这是一个示例Web组件HTML结构：

<a-scene>
      <a-assets>
        <img id="glow1" src="images/glow1.png">
        <img id="ring1" src="images/ring1.png">
        <img id="ring2" src="images/ring2.png">
        <img id="ring3" src="images/ring3.png">
        <img id="ring4" src="images/ring4.png">
        <img id="ring5" src="images/ring5.png">
        <img id="schematic1" src="images/schematic1.png">
        <img id="schematic2" src="images/schematic2.png">
        <img id="schematic3" src="images/schematic3.png">
        <img id="schematic4" src="images/schematic4.png">
        <img id="schematic5" src="images/schematic5.png">
        <img id="text1" src="images/text1.png">
        <img id="text2" src="images/text2.png">
        <img id="text3" src="images/text3.png">
        <img id="text4" src="images/text4.png">
        <a-asset-item id="engine" src="models/engine.dae"></a-asset-item>
        <audio id="blip1" src="../_sounds/321103__nsstudios__blip1.wav">
        <audio id="blip2" src="../_sounds/321104__nsstudios__blip2.wav">
      </a-assets>
    
      <a-entity position="1.75 0 1.2" rotation="0 28 0">
        <a-camera near="0.1"></a-camera>
      </a-entity>
    
      <a-entity position="0 0 -3">
        <a-collada-model src="#engine" rotation="90 0 0" scale="18 18 18"></a-collada-model>
      </a-entity>
    
      <a-entity id="wall-lights" position="-7.25 1.5 2.9" rotation="0 90 0" scale="1.25 1.25 1.25">
        <a-entity position="0 0 0" scale="0.05 0.05 0.05">
          <a-plane width="1" height="4" shader="flat" color="#B4E2F8">
            <a-animation attribute="visible" from="false" to="true" begin="350" dur="1" fill="both"></a-animation>
          </a-plane>
          <a-plane width="6" height="4" translate="-3 0 0" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
        </a-entity>
    
        <a-entity position="1 0 0" scale="0.05 0.05 0.05">
          <a-plane width="1" height="4" shader="flat" color="#B4E2F8">
            <a-animation attribute="visible" from="false" to="true" begin="400" dur="1" fill="both"></a-animation>
          </a-plane>
          <a-plane width="6" height="4" translate="-3 0 0" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
        </a-entity>
    
        < .... more ... >

The above snippet leads this beautiful visual experience:

上面的代码片段带来了这种美好的视觉体验：

![format_png 1][]

The community (led by Mozilla) working on A-Frame have done a masterful job to make creating 3D experiences easy but still capable of powerful visualizations.  The A-Frame website also provides a number of useful demos and code samples to get started.

在A-Frame上工作的社区(由Mozilla领导)已经做了出色的工作，使创建3D体验变得容易，但仍然能够进行强大的可视化。 A-Frame网站还提供了许多有用的演示和代码示例，供您入门。

A-Frame also works on your WebVR-capable mobile browser (Chrome and Firefox both work) and if you have a Mozilla or Google cardboard:

A-Frame还可在支持WebVR的移动浏览器(Chrome和Firefox均可使用)上运行，并且如果您具有Mozilla或Google硬纸板：

![format_png 2][]

... you'll be able to experience real VR by clicking the "goggles" icon of each demo.

...您将可以通过单击每个演示的“护目镜”图标来体验真实的VR。

For further information on what Mozilla is doing in the VR space, you can check out the [MozVR website][], [browse the WebVR spec][], and get [API information on MDN][the WebVR spec].  Exciting times, especially with Mozilla pushing an open WebVR for the browser.  Fight the natives!

有关Mozilla在VR领域正在做什么的更多信息，您可以[访问MozVR网站][MozVR website] ， [浏览WebVR规范][browse the WebVR spec] ，并获取[MDN上的API信息][the WebVR spec] 。 激动人心的时刻，尤其是在Mozilla为浏览器推出开放式WebVR的时候。 战斗本地人！

> 翻译自: [https://davidwalsh.name/web-vr][https_davidwalsh.name_web-vr]

nginx mozilla

[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9tb3ppbGxhLXZpcnR1YWwtcmVhbGl0eS1maXJlZm94LW9jdWx1cy1yaWZ0LmpwZw?x-oss-process=image/format,png
[the WebVR spec]: https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API
[A-Frame]: https://aframe.io/
[format_png 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9BbmltZUFGcmFtZS5wbmc?x-oss-process=image/format,png
[format_png 2]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9tb3ppbGxhLWNhcmRib2FyZHMuanBn?x-oss-process=image/format,png
[MozVR website]: http://mozvr.com/
[browse the WebVR spec]: https://mozvr.github.io/webvr-spec/
[https_davidwalsh.name_web-vr]: https://davidwalsh.name/web-vr