ViroSkyBox

A component that provides scene backgrounds by displaying a cube that surrounds the user to give the effect of a sky or distant horizon. The skybox can either be a fixed color, or it can be composed of six textures via the source property. For more information on scene backgrounds check out our Scene Guide .

Example use:

JavaScript

<ViroSkyBox
    source={{
        nx: require('res/sb_space_left.png'),
        px: require('res/sb_space_right.png'),
        ny: require('res/sb_space_bottom.png'),
        py: require('res/sb_space_top.png'),
        nz: require('res/sb_space_back.png'),
        pz: require('res/sb_space_front.png')
    }}
/>

Props

color

Type	Description
ColorPropType	The color of the skybox. The default color is black. This property is ignored if source is set. See Styles for more.

source

Type	Description
CubeMapPropType	A cube map which consists of six images that will end up surrounding the user creating a sky effect. The parameters are nx(negative x), px(positive x), ny(negative y), py(positive y), nz(negative z), pz(positive z). nx, py, nz, pz represents the sides of the skybox while py, ny represent the top and bottom of the skybox. Each of the parameters are type ImageSourcePropType.

Example:

TypeScript

{
  nx: require("res/nx.png"),
  px: require("res/px.png"),
  ny: require("res/ny.png"),
  py: require("res/py.png"),
  nz: require("res/nz.png"),
  pz: require("res/pz.png"),
};

format

Type	Description
'RGBA8' | 'RGBA4' | 'RGB565'	Image texture formats for storage on the GPU. RGBA8 - Each pixel is described with 32-bits, using eight bits per channel RGBA4 - Each pixel is described with 16 bits, using four bits per channel RGB565 - Formats the picture into 16 bit color values without alpha

onLoadEnd

Type	Description
Function	Callback triggered when the cube map specified in source is finished loading.

For example:

TypeScript

const handleLoadEnd = (event:Event) => {
  if(event.nativeEvent.success) {
    //skybox has loaded successfully!
  }
}

onLoadStart

Type	Description
Function	Callback triggered when we are processing the assets specified in the source property.

rotation

Type	Description
	PropTypes.arrayOf(PropTypes.number)Put the PropType Description here.

style

Type	Description
stylePropType	See Styles.

transformBehaviors

Type

Description

string | string[]

An array of transform constraints that affect the transform of the object. For example, putting the value "billboard" will ensure the object is facing the user as the user rotates their head on any axis. This is useful for icons or text where you'd like the object to always face the user. Allowed values (values are case sensitive): 'billboard': Billboard object on x,y,z axis 'billboardX': Billboard object on the x axis 'billboardY': Billboard object on the y axis 'billboardZ': Billboard object on the z axis

visible

Type	Description
boolean	False if the object should be hidden. By default the object is visible and this value is true.