鱼眼图像转换为全景图像_使用A框架创建3D全景图像

╰半橙微兮° 2023-02-22 03:35 184阅读 0赞

鱼眼图像转换为全景图像

![A-Frame][]

In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and [A-Frame][A-Frame 1] project have.

在Mozilla的五年中，我看到了一些很棒的项目。 其中有些非常受欢迎，有些非常利基，但是它们都没有激发我MozVR团队使用WebVR和[A-Frame][A-Frame 1]项目的方式。

A-Frame is a community project aiming to be "building blocks for the virtual reality web", a library for creating VR experiences within the browser using markup or JavaScript.  Jumping into using a project like this can be overwhelming so let's start simple:  creating an interactive panorama image demo like [this one][]!

A-Frame是一个社区项目，旨在成为“虚拟现实网络的构建块”，该库用于使用标记或JavaScript在浏览器中创建VR体验。 跳入这样一个项目可能会让人不知所措，所以让我们开始简单：创建一个像[这样][this one]的交互式全景图像演示！

[View Demo][] [观看演示][View Demo]

## 拍摄3D图像 **(**Taking a 3D Image**)** ##

The easiest way to take an image that satisfies the panorama effect requirement (known as an equirectangular format) is by using your phone.  Dan Zajdband's [Guri VR: Virtual Reality for the Rest of Us][Guri VR_ Virtual Reality for the Rest of Us] identifies apps for iOS ([Google Street View][]) and Android ([Photo Sphere][] or [Cardboard Camera][]).  Dan's awesome article also points out an [Equirectangular group on Flickr][] if you'd prefer to simply grab an existing image for your experimentation.

拍摄满足全景效果要求(称为等矩形格式)的图像的最简单方法是使用手机。 丹·扎伊德班德(Dan Zajdband)的《 [Guri VR：我们其余人的虚拟现实》][Guri VR_ Virtual Reality for the Rest of Us]确定了iOS( [谷歌街景][Google Street View] )和Android( [Photo Sphere][]或[纸板相机][Cardboard Camera] )的应用程序。 Dan的精彩文章还指出了[Flickr上的][Equirectangular group on Flickr]一个[Equirectangular组，][Equirectangular group on Flickr]如果您只想简单地获取现有图像进行实验。

Taking a quality image on your phone can be a bit of a challenge -- you'll need a steady hand to avoid jagged edges as you rotate your phone to take images at each position.

在手机上拍摄高质量的图像可能会遇到一些挑战-在旋转手机以在每个位置拍摄图像时，您需要稳定的手来避免锯齿状边缘。

*Quick note: for the demo I'm using the sample image provided by A-Frame because Google Street View's image generated a 10MB image and serving that to you would be a beast. If you'd like to see what I made using the GSV app, you can find the [image here][]. The image is taken from the viewpoint of me standing in the middle of the cul de sac I live on.*

*快速说明：对于演示，我使用的是A-Frame提供的示例图像，因为Google Street View的图像生成了10MB的图像并将其提供给您将是野兽。* *如果您想查看我使用GSV应用程序所做的事情，可以在[此处][image here]找到[图像][image here] 。* *该图像是从我站在我住的小路中间的角度拍摄的。*

## 使用A框架创建全景效果 **(**Creating the Panorama Effect with A-Frame**)** ##

Believe it or not, taking a good image is the hard part, because A-Frame makes turning the image into a 3D visualization incredibly easy.  The `<a-sky>` element within A-Frame will be used to create the panorama effect:

信不信由你，拍摄好图像是困难的部分，因为A-Frame使得将图像变成3D可视化变得异常容易。 A框架中的`<a-sky>`元素将用于创建全景效果：

<a-scene>
      <a-sky src="https://davidwalsh.name/demo/3d-image.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>

The code above is declarative usage (written in HTML) of A-Frame; you could use programmatic JavaScript to create the element instead:

上面的代码是A-Frame的声明性用法(用HTML编写)； 您可以改用程序化JavaScript创建元素：

// Create the scene
    var scene = document.createElement('a-scene');
    
    // Create the sky
    var sky = document.createElement('a-sky');
    sky.src = '3d-image.jpg';
    sky.setAttribute('rotation', { x: 0, y: -130, y: 0 });
    
    // Inject into page
    scene.appendChild(sky);
    document.body.appendChild(scene);

[The `rotation` attribute][The _rotation_attribute] accepts space-separated `x`, `y`, and `z` axis rotation values; you can play with those to customize the positioning of the viewpoint.

[`rotation`属性][The _rotation_attribute]接受以空格分隔的`x` ， `y`和`z`轴旋转值； 您可以与这些对象一起玩以自定义视点的位置。

A-Frame lets you click, hold, and drag the component to rotate around the image.  You can also click the VR goggles image to view the image in 3D on your phone (cardboard makes a nice accessory!) or WebVR-enabled browser.

A框架可让您单击，按住并拖动组件以围绕图像旋转。 您也可以单击VR护目镜图像，以在手机上(纸板是不错的配件！)或启用WebVR的浏览器以3D方式查看图像。

[View Demo][] [观看演示][View Demo]

## A框架使3D变得简单！ **(**A-Frame Makes 3D Easy!**)** ##

I wasn't exaggerating when I said that taking the photo was the difficult part; the amount of markup needed to create a 3D panorama effect is minimal when you harness the power of A-Frame.  While panorama image creation is a popular use case, the effect is only a simple usage of A-Frame.  Want to see what else A-Frame can do?  Check out the [demos on the A-Frame website][] and look forward to seeing more about WebVR all over the web -- it's the next big thing!

当我说拍摄照片是困难的部分时，我并没有夸张。 利用A帧的功能时，创建3D全景效果所需的标记量很小。 尽管创建全景图像是一种流行的用例，但效果只是A框架的简单用法。 是否想了解A-Frame还能做什么？ [在A-Frame网站上][demos on the A-Frame website]查看[演示，][demos on the A-Frame website]并期待在网络上看到更多有关WebVR的信息-这是下一件大事！

> 翻译自: [https://davidwalsh.name/3d-panorama-image][https_davidwalsh.name_3d-panorama-image]

鱼眼图像转换为全景图像

[A-Frame]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hZnJhbWUtbGFyZ2UucG5n?x-oss-process=image/format,png
[A-Frame 1]: https://aframe.io
[this one]: https://aframe.io/examples/showcase/sky/
[View Demo]: https://davidwalsh.name/demo/3d-panorama-image.html
[Guri VR_ Virtual Reality for the Rest of Us]: https://source.opennews.org/en-US/articles/virtual-reality-rest-us/
[Google Street View]: https://itunes.apple.com/app/id904418768?mt=8240
[Photo Sphere]: https://support.google.com/googlecamera/?hl=en#2839084
[Cardboard Camera]: https://play.google.com/store/apps/details?id=com.google.vr.cyclops&hl=en
[Equirectangular group on Flickr]: https://www.flickr.com/groups/equirectangular/
[image here]: https://davidwalsh.name/demo/3d-panorama-circle.jpg
[The _rotation_attribute]: https://aframe.io/docs/0.2.0/components/rotation.html
[demos on the A-Frame website]: https://aframe.io/
[https_davidwalsh.name_3d-panorama-image]: https://davidwalsh.name/3d-panorama-image