{"__v":0,"_id":"58f7a4c8cbd001190056cc1b","category":{"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","_id":"58f7a4c8cbd001190056cbfe","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":5,"slug":"api-reference","title":"API Reference"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"57bb7defafc18c0e00529cf1","version":{"__v":1,"_id":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","createdAt":"2017-04-19T17:56:24.172Z","releaseDate":"2017-04-19T17:56:24.172Z","categories":["58f7a4c8cbd001190056cbf9","58f7a4c8cbd001190056cbfa","58f7a4c8cbd001190056cbfb","58f7a4c8cbd001190056cbfc","58f7a4c8cbd001190056cbfd","58f7a4c8cbd001190056cbfe"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-18T01:15:43.734Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":19,"body":"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](doc:scenes#scene-backgrounds) . \n\n######Example use:\n```\n<ViroSkyBox source={{nx:require('./res/sb_space_left.jpg'),\n                   px:require('./res/sb_space_right.jpg'),\n                   ny:require('./res/sb_space_bottom.jpg'),\n                   py:require('./res/sb_space_top.jpg'),\n                   nz:require('./res/sb_space_back.jpg'),\n                   pz:require('./res/sb_space_front.jpg')}} />\n```\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Props\"\n}\n[/block]\n##Required Props\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**source**\",\n    \"0-1\": \"**CubeMapPropType**\\n\\nA 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.\\n\\nExample: \\n```\\n{\\n  nx:require('./res/nx.jpg'),\\n  px:require('./res/px.jpg'),\\n  ny:require('./res/ny.jpg'),\\n  py:require('./res/py.jpg'),\\n  nz:require('./res/nz.jpg'),\\n  pz:require('./res/pz.jpg')\\n}\\n    ```\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\n##Optional Props\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**color**\",\n    \"3-0\": \"**onLoadEnd**\",\n    \"4-0\": \"**onLoadStart**\",\n    \"5-0\": \"**rotation**\",\n    \"6-0\": \"**style**\",\n    \"7-0\": \"**text**\",\n    \"8-0\": \"**transformBehaviors**\",\n    \"10-0\": \"**visible**\",\n    \"9-0\": \"**width**\",\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**ColorPropType**\\n\\nThe color of the skybox. The default color is black. This property is ignored if ```source``` is set.\\n\\nValid color formats are:\\n\\n  * '#f0f' (#rgb)\\n  * '#f0fc' (#rgba)\\n  * '#ff00ff' (#rrggbb)\\n  * '#ff00ff00' (#rrggbbaa)\\n  * 'rgb(255, 255, 255)'\\n  * 'rgba(255, 255, 255, 1.0)'\\n  * 'hsl(360, 100%, 100%)'\\n  * 'hsla(360, 100%, 100%, 1.0)'\\n  * 'transparent'\\n  * 'red'\\n  * 0xff00ff00 (0xrrggbbaa)\",\n    \"3-1\": \"**React.PropTypes.func**\\n\\nCallback triggered when the cube map specified in source is finished loading.\\n\\nFor example:\\n```\\n_onLoadEnd(event:Event)  {\\n  \\n    if(event.nativeEvent.success) {\\n       //skybox has loaded successfully!\\n    }\\n}\\n```\",\n    \"4-1\": \"**React.PropTypes.func**\\n\\nCallback triggered when we are processing the assets specified in the source property.\",\n    \"5-1\": \"PropTypes.arrayOf(PropTypes.number)\\n\\nPut the PropType Description here.\",\n    \"6-1\": \"stylePropType\",\n    \"7-1\": \"PropTypes.string\\n\\nPut the PropType Description here.\",\n    \"8-1\": \"PropTypes.arrayOf(PropTypes.string)\\n\\nPut the PropType Description here.\",\n    \"9-1\": \"PropTypes.number\\n\\nPut the PropType Description here.\",\n    \"10-1\": \"PropTypes.bool\\n\\nPut the PropType Description here.\",\n    \"2-0\": \"**format**\",\n    \"2-1\": \"**PropTypes.oneOf(['RGBA8', 'RGBA4', 'RGB565'])**\\n\\nImage texture formats for storage on the GPU.\\n\\n|Format|Description|\\n|:------|:----------:|\\n|RGBA8| Each pixel is described with 32-bits, using eight bits per channel|\\n|RGBA4|  Each pixel is described with 16 bits, using four bits per channel|\\n|RGB565|  Formats the picture into 16 bit color values without alpha|\",\n    \"1-0\": \"**source**\",\n    \"1-1\": \"**CubeMapPropType**\\n\\nA 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.\\n\\nExample: \\n```\\n{\\n  nx:require('./res/nx.jpg'),\\n  px:require('./res/px.jpg'),\\n  ny:require('./res/ny.jpg'),\\n  py:require('./res/py.jpg'),\\n  nz:require('./res/nz.jpg'),\\n  pz:require('./res/pz.jpg')\\n}\\n    ```\"\n  },\n  \"cols\": 2,\n  \"rows\": 5\n}\n[/block]","excerpt":"","slug":"viroskybox1","type":"basic","title":"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](doc:scenes#scene-backgrounds) . ######Example use: ``` <ViroSkyBox source={{nx:require('./res/sb_space_left.jpg'), px:require('./res/sb_space_right.jpg'), ny:require('./res/sb_space_bottom.jpg'), py:require('./res/sb_space_top.jpg'), nz:require('./res/sb_space_back.jpg'), pz:require('./res/sb_space_front.jpg')}} /> ``` [block:api-header] { "type": "basic", "title": "Props" } [/block] ##Required Props [block:parameters] { "data": { "0-0": "**source**", "0-1": "**CubeMapPropType**\n\nA 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.\n\nExample: \n```\n{\n nx:require('./res/nx.jpg'),\n px:require('./res/px.jpg'),\n ny:require('./res/ny.jpg'),\n py:require('./res/py.jpg'),\n nz:require('./res/nz.jpg'),\n pz:require('./res/pz.jpg')\n}\n ```" }, "cols": 2, "rows": 1 } [/block] ##Optional Props [block:parameters] { "data": { "0-0": "**color**", "3-0": "**onLoadEnd**", "4-0": "**onLoadStart**", "5-0": "**rotation**", "6-0": "**style**", "7-0": "**text**", "8-0": "**transformBehaviors**", "10-0": "**visible**", "9-0": "**width**", "h-0": "PropKey", "h-1": "PropType", "0-1": "**ColorPropType**\n\nThe color of the skybox. The default color is black. This property is ignored if ```source``` is set.\n\nValid color formats are:\n\n * '#f0f' (#rgb)\n * '#f0fc' (#rgba)\n * '#ff00ff' (#rrggbb)\n * '#ff00ff00' (#rrggbbaa)\n * 'rgb(255, 255, 255)'\n * 'rgba(255, 255, 255, 1.0)'\n * 'hsl(360, 100%, 100%)'\n * 'hsla(360, 100%, 100%, 1.0)'\n * 'transparent'\n * 'red'\n * 0xff00ff00 (0xrrggbbaa)", "3-1": "**React.PropTypes.func**\n\nCallback triggered when the cube map specified in source is finished loading.\n\nFor example:\n```\n_onLoadEnd(event:Event) {\n \n if(event.nativeEvent.success) {\n //skybox has loaded successfully!\n }\n}\n```", "4-1": "**React.PropTypes.func**\n\nCallback triggered when we are processing the assets specified in the source property.", "5-1": "PropTypes.arrayOf(PropTypes.number)\n\nPut the PropType Description here.", "6-1": "stylePropType", "7-1": "PropTypes.string\n\nPut the PropType Description here.", "8-1": "PropTypes.arrayOf(PropTypes.string)\n\nPut the PropType Description here.", "9-1": "PropTypes.number\n\nPut the PropType Description here.", "10-1": "PropTypes.bool\n\nPut the PropType Description here.", "2-0": "**format**", "2-1": "**PropTypes.oneOf(['RGBA8', 'RGBA4', 'RGB565'])**\n\nImage texture formats for storage on the GPU.\n\n|Format|Description|\n|:------|:----------:|\n|RGBA8| Each pixel is described with 32-bits, using eight bits per channel|\n|RGBA4| Each pixel is described with 16 bits, using four bits per channel|\n|RGB565| Formats the picture into 16 bit color values without alpha|", "1-0": "**source**", "1-1": "**CubeMapPropType**\n\nA 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.\n\nExample: \n```\n{\n nx:require('./res/nx.jpg'),\n px:require('./res/px.jpg'),\n ny:require('./res/ny.jpg'),\n py:require('./res/py.jpg'),\n nz:require('./res/nz.jpg'),\n pz:require('./res/pz.jpg')\n}\n ```" }, "cols": 2, "rows": 5 } [/block]