如何

怎么做360照片


如何360照片

360 Photo是特定几何形状,纹理和材料属性的单纯形混合;但是,我们创建了PhotoDome,而不是让您负担繁重的工作来找出如何连接它们。

PhotoDome

PhotoDome需要一个必须为“矩形矩形”的源图像,如果没有等角矩形源,该类将无法正常运行。

等角矩形图像的示例: equirectangular

PhotoDome代码

在操场上,您可以将以下内容复制并粘贴到场景中,然后调整选项。

photoDome = new BABYLON.PhotoDome("testdome", url, {<options>}, scene);

options对象中的所有设置都是可选的,但是对象本身不是。请至少提供一个空的对象。所有选项均基于相应的类,主要是圆顶几何形状和纹理:

  • 分辨率= 32:整数,较低的分辨率在极端视场处有更多伪像
  • size = 1000:在其上创建圆顶的物理半径,默认为远剪切平面的大约一半
  • useDirectMapping = true:使用直接映射技术渲染视频。除非要使用该fovMultiplier属性,否则应保留此值

  • PhotoDome的游乐场示例 -


视场调整

有时360度照片可能会感觉离相机不舒服,因此可以使用基于材料的FOV调整。使用以下代码在0.0和2.0之间调整它。

photoDome.fovMultiplier = newValue;

请注意,fovMultiplier仅在使用useDirectMapping = false创建选项时有效。

作为警告,该值距离1越远,可见的失真就越大。照片球罩上的更高分辨率有助于减少但不能消除这种情况。

图片类型

今天存在几种类型的360度图像。最常见的是单视全景,并排立体全景和顶底全景。

第一个代表一只眼睛的全景图。第二个包含每个眼睛专用的两个全景,而最后一个包含分别在图像顶部和底部的两个全景。

在Photo Dome中,您可以使用以下方式更改对图像源类型的适应性:

photoDome.imageMode = BABYLON.PhotoDome.MODE_MONOSCOPIC;
// or
photoDome.imageMode = BABYLON.PhotoDome.MODE_SIDEBYSIDE;
// or
photoDome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;

如何使用WebVR 360度拍照

您可以将360 Photo与WebVR结合使用。只需添加以下代码。

 var vrHelper = scene.createDefaultVRExperience();

它还将在屏幕的右下方创建一个enterVR按钮,单击该按钮将开始渲染到HMD。

您可以通过添加以下代码返回2D视图。

scene.actionManager = new BABYLON.ActionManager(scene);

// From 2D view to fullscreen VR
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnKeyDownTrigger,
        parameter: 's' //press "s" key
    },
    function () { vrHelper.enterVR(); }
));

// From fullscreenVR to 2D view
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnKeyDownTrigger,
        parameter: 'e' //press "e" key
    },
    function () { vrHelper.exitVR(); document.exitFullscreen();}
));

进一步阅读

行动经理