CylindricalPanel

CylindricalPanel是React VR中的一个特殊组件,允许将子组件绘制到圆柱体的内表面。这是通过将子组件绘制到指定宽度和高度的屏幕外缓冲区来实现的。

默认情况下,圆柱体放置在场景的中心位置,以便观察者能够对它环绕。

<CylindricalPanel

  layer={{

    width: bufferWidthPx,

    height: bufferHeightPx,

    density: numberOfPxForACompleteTurn,

    radius: distanceFromTheViewer

  }}>

  ... Child components ...

</CylindricalPanel>

cylinder必须指定宽高,宽度要和cylinder所覆盖的角度一应,密度默认是4680px,根据经验定的,面板空间的1px就是人眼的1px,为了在VR中使用,在2d空间里默认值允许被转换成px单位。


弧度的度数可以通过(宽/密度*360)计算,一般默认沿圆柱体视图方向的一半(180度)的宽度为2340像素。我们建议将密度保持为当前VR显示范围的默认值。目前的宽度限制在不大于4096像素,所以如果需要一个360度圆柱体,那么密度必须减小到4096。


这个高度是用于计算圆柱体的高度,在面板上的1px的元素的空间宽度和高度面板上的1px元素的世界宽度和高度保持平方,例如,当100像素100像素的源位图的100像素×100像素(像素)绘制到圆柱。


圆柱层的目的是提供一种简单的方法能将2D设置和布局传送到VR内。

Child components can determine if within a Panel by using the isOnLayer context

属性

      View props...   查看左侧导航的"View"的属性
layer:   {width: number, height: number, radius: number, density: number}
style?:  style
      Layout Props...  查看左侧导航的"布局属性"
      Transforms...  查看左侧导航的"三维坐标、变换"
      opacity   PropTypes.number