{"_id":"58f7a4c8cbd001190056cc19","__v":0,"category":{"_id":"58f7a4c8cbd001190056cbfe","__v":0,"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","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,"version":{"_id":"58f7a4c8cbd001190056cbf8","__v":1,"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"},"project":"578c4badbd223d2000cc1441","user":"57bb7defafc18c0e00529cf1","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-18T01:19:51.345Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":17,"body":"A ViroScene is the top most component for each scene in a Viro application. Please see our [Scene Guide](doc:scenes#scene-graph) for more information.\n\n######Example use:\n```\n<ViroScene\n    onHover={this._onHover} \n    onClick={this._onClick}/>\n```\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Props\"\n}\n[/block]\n##Optional Props \n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**onClick**\",\n    \"4-0\": \"**onPlatformUpdate**\",\n    \"9-0\": \"**rotation**\",\n    \"10-0\": \"**style**\",\n    \"11-0\": \"**text**\",\n    \"12-0\": \"**transformBehaviors**\",\n    \"14-0\": \"**visible**\",\n    \"13-0\": \"**width**\",\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**React.PropTypes.func**\\n\\nFunction to be invoked when a user clicks on a scene. This is **ONLY** invoked if a click is not captured on another object within a scene.\\n\\nDefining this can be used to register clicks for 360 Photos and videos.\",\n    \"4-1\": \"**React.PropTypes.func**\\n\\nCallback method set to be notified of platform specific information like headset type or controller type.\\n\\nExample Code:\\n```  \\n_onPlatformUpdate(platformInfo){\\n\\tvar platform = platformInfo.vrPlatform;\\n\\tvar headset = platformInfo.headset;\\n\\tvar controller = platformInfo.controller;\\n}\\n```\\n\\nList of supported platforms:\\n\\n| |Cardboard iOS|Cardboard Android|Daydream|GearVR\\n|:-------------------|:---------------|:---------------|:---------------|:---------------|\\n|Platform|gvr|gvr|gvr|ovr-mobile|\\n|Headset|cardboard|cardboard|daydream|gearvr|\\n|Controller|cardboard|cardboard|daydream|gearvr|\",\n    \"9-1\": \"PropTypes.arrayOf(PropTypes.number)\\n\\nPut the PropType Description here.\",\n    \"10-1\": \"stylePropType\",\n    \"11-1\": \"PropTypes.string\\n\\nPut the PropType Description here.\",\n    \"12-1\": \"PropTypes.arrayOf(PropTypes.string)\\n\\nPut the PropType Description here.\",\n    \"13-1\": \"PropTypes.number\\n\\nPut the PropType Description here.\",\n    \"14-1\": \"PropTypes.bool\\n\\nPut the PropType Description here.\",\n    \"3-0\": \"**onHover**\",\n    \"3-1\": \"**React.PropTypes.func**\\n\\nFunction to be invoked when the user hovers on on the scene. If this is defined, it is invoked **ONLY** if no other object captures the onHover event.\\n\\nFor example:\\n```  \\n_onHover(isHovering)  {\\n    if(isHovering) {\\n        // user is hovering on the scene.\\n    } else {\\n        // user is hovering on another object in the scene.\\n    }\\n}\\n```\",\n    \"1-0\": \"**onClickState**\",\n    \"1-1\": \"**React.PropTypes.func**\\n\\nCalled for each click state an object goes through as it is clicked. Supported click states and their values are the following:\\n\\n|State Value|Description|\\n|:------|:----------:|\\n|1| Click Down: Triggered when the user has performed a click down action while hovering on this control.|\\n|2| Click Up: Triggered when the user has performed a click up action while hovering on this control.|\\n|3| Clicked: Triggered when the user has performed both a click down and click up action on this control sequentially, thereby having \\\"Clicked\\\" the object.|\\n\\nExample code:\\n```  \\n_onClickState(stateValue, source)  {\\n    if(stateValue == 1) {\\n        // Click Down\\n    } else if(stateValue == 2) {\\n        // Click Up\\n    } else if(stateValue == 3) { \\n        // Clicked\\n    }\\n}\\n```\\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\\n\\nThis is **ONLY** invoked if a click is not captured on another object within a scene.\",\n    \"5-1\": \"**React.PropTypes.func**\\n\\nNEED TO UPDATE DESCRIPTION\",\n    \"6-1\": \"**React.PropTypes.func**\\n\\nNEED TO UPDATE DESCRIPTION\",\n    \"7-1\": \"**React.PropTypes.func**\\n\\nCalled when the user performs a touch action, while hovering on the control. Provides the touch state type, and the x/y coordinate at which this touch event has occurred.\\n\\n|State Value|Description|\\n|:------|:----------:|\\n|1| Touch Down: Triggered when the user  makes physical contact with the touch pad on the controller. |\\n|2| Touch Down Move: Called when the user moves around the touch pad immediately after having performed a Touch Down action. |\\n|3| Touch Up: Triggered after the user is no longer in physical contact with the touch pad after a Touch Down action. |\\n\\nFor example:\\n```  \\n_onTouch(state, touchPos, source)  {\\n   var touchX = touchPos[0];\\n   var touchY = touchPos[1];\\n    if(state == 1) {\\n        // Touch Down\\n    } else if(state == 2) {\\n        // Touch Down Move\\n    } else if(state == 3) { \\n        // Touch Up\\n    }\\n}\\n```\\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\\n\\nUnsupported VR Platforms: Cardboard(Android and iOS).\",\n    \"5-0\": \"**onScroll**\",\n    \"6-0\": \"**onSwipe**\",\n    \"7-0\": \"**onTouch**\",\n    \"8-0\": \"**soundRoom**\",\n    \"8-1\": \"**PropTypes.shape**\\n\\nDescribes the acoustic properties of the room around the user by allowing the developer to describe the room based on its dimensions and its surface properties.  Note: This is not supported in Cardboard iOS.\\n\\nCode Example:\\n```  \\n    soundRoom={{\\n      size: {[2,2,2]},\\n      wallMaterial: \\\"acoustic_ceiling_tiles\\\",\\n      ceilingMaterial:\\\"glass_thin\\\",\\n      floorMaterial:\\\"concrete_block_coarse\\\"\\n    }}\\n```\\nList of soundRoom properties:\\n\\n|Name|Description|\\n|:-------------------|:---------------|\\n|size|The 3D dimensions of the room.|\\n|wallMaterial|Sound Material for the four walls.|\\n|ceilingMaterial|Sound Material for the ceiling|\\n|floorMaterial|Sound Material for the floor|\\n\\nList of Supported Sound Materials:\\n\\n|Name|Description|\\n|:-------------------|:---------------|\\n|acoustic_ceiling_tiles|Acoustic ceiling tiles, absorbs most frequencies.|\\n|brick_bare|Bare brick, relatively reflective.|\\n|brick_painted|Painted brick|\\n|concrete_block_coarse|Coarse surface concrete block.|\\n|concrete_block_painted|Painted concrete block.|\\n|curtain_heavy|Heavy curtains.|\\n|fiber_glass_insulation|Fiber glass insulation.|\\n|glass_thin|Thin glass.|\\n|glass_thick|Thick glass.|\\n|grass|Grass.|\\n|linoleum_on_concrete|Linoleum on concrete.|\\n|marble|Marble.|\\n|metal|Galvanized sheet metal.|\\n|parquet_on_concrete|Wooden parquet on concrete.|\\n|plaster_rough|Rough plaster surface.|\\n|plaster_smooth|Smooth plaster surface.|\\n|plywood_panel|Plywood panel|\\n|polished_concrete_or_tile|Polished concrete or tile surface.|\\n|sheet_rock|Sheet rock|\\n|transparent|Acoustically transparent material, reflects no sound.|\\n|water_or_ice_surface|Surface of water or ice.|\\n|wood_ceiling|Wooden ceiling.|\\n|wood_panel|Wood paneling.|\",\n    \"2-0\": \"**onFuse**\",\n    \"2-1\": \"**PropTypes.oneOfType**\\n```  \\nPropTypes.oneOfType([\\n      React.PropTypes.shape({\\n        callback: React.PropTypes.func.isRequired,\\n        timeToFuse: PropTypes.number\\n      }),\\n      React.PropTypes.func,\\n])\\n```  \\nAs shown above, onFuse takes one of the types - either a callback, or a dictionary with a callback and duration. \\n\\nIt is called after the user hovers onto and remains hovered on the control for a certain duration of time, as indicated in timeToFuse that represents the duration of time in milliseconds. \\n\\nWhile hovering, the reticle will display a count down animation while fusing towards timeToFuse.\\n\\nNote that timeToFuse defaults to 2000ms.\\n\\nFor example:\\n```  \\n_onFuse(source){\\n   // User has hovered over object for timeToFuse milliseconds\\n}\\n```\\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\"\n  },\n  \"cols\": 2,\n  \"rows\": 9\n}\n[/block]","excerpt":"","slug":"viroscene","type":"basic","title":"ViroScene"}
A ViroScene is the top most component for each scene in a Viro application. Please see our [Scene Guide](doc:scenes#scene-graph) for more information. ######Example use: ``` <ViroScene onHover={this._onHover} onClick={this._onClick}/> ``` [block:api-header] { "type": "basic", "title": "Props" } [/block] ##Optional Props [block:parameters] { "data": { "0-0": "**onClick**", "4-0": "**onPlatformUpdate**", "9-0": "**rotation**", "10-0": "**style**", "11-0": "**text**", "12-0": "**transformBehaviors**", "14-0": "**visible**", "13-0": "**width**", "h-0": "PropKey", "h-1": "PropType", "0-1": "**React.PropTypes.func**\n\nFunction to be invoked when a user clicks on a scene. This is **ONLY** invoked if a click is not captured on another object within a scene.\n\nDefining this can be used to register clicks for 360 Photos and videos.", "4-1": "**React.PropTypes.func**\n\nCallback method set to be notified of platform specific information like headset type or controller type.\n\nExample Code:\n``` \n_onPlatformUpdate(platformInfo){\n\tvar platform = platformInfo.vrPlatform;\n\tvar headset = platformInfo.headset;\n\tvar controller = platformInfo.controller;\n}\n```\n\nList of supported platforms:\n\n| |Cardboard iOS|Cardboard Android|Daydream|GearVR\n|:-------------------|:---------------|:---------------|:---------------|:---------------|\n|Platform|gvr|gvr|gvr|ovr-mobile|\n|Headset|cardboard|cardboard|daydream|gearvr|\n|Controller|cardboard|cardboard|daydream|gearvr|", "9-1": "PropTypes.arrayOf(PropTypes.number)\n\nPut the PropType Description here.", "10-1": "stylePropType", "11-1": "PropTypes.string\n\nPut the PropType Description here.", "12-1": "PropTypes.arrayOf(PropTypes.string)\n\nPut the PropType Description here.", "13-1": "PropTypes.number\n\nPut the PropType Description here.", "14-1": "PropTypes.bool\n\nPut the PropType Description here.", "3-0": "**onHover**", "3-1": "**React.PropTypes.func**\n\nFunction to be invoked when the user hovers on on the scene. If this is defined, it is invoked **ONLY** if no other object captures the onHover event.\n\nFor example:\n``` \n_onHover(isHovering) {\n if(isHovering) {\n // user is hovering on the scene.\n } else {\n // user is hovering on another object in the scene.\n }\n}\n```", "1-0": "**onClickState**", "1-1": "**React.PropTypes.func**\n\nCalled for each click state an object goes through as it is clicked. Supported click states and their values are the following:\n\n|State Value|Description|\n|:------|:----------:|\n|1| Click Down: Triggered when the user has performed a click down action while hovering on this control.|\n|2| Click Up: Triggered when the user has performed a click up action while hovering on this control.|\n|3| Clicked: Triggered when the user has performed both a click down and click up action on this control sequentially, thereby having \"Clicked\" the object.|\n\nExample code:\n``` \n_onClickState(stateValue, source) {\n if(stateValue == 1) {\n // Click Down\n } else if(stateValue == 2) {\n // Click Up\n } else if(stateValue == 3) { \n // Clicked\n }\n}\n```\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\n\nThis is **ONLY** invoked if a click is not captured on another object within a scene.", "5-1": "**React.PropTypes.func**\n\nNEED TO UPDATE DESCRIPTION", "6-1": "**React.PropTypes.func**\n\nNEED TO UPDATE DESCRIPTION", "7-1": "**React.PropTypes.func**\n\nCalled when the user performs a touch action, while hovering on the control. Provides the touch state type, and the x/y coordinate at which this touch event has occurred.\n\n|State Value|Description|\n|:------|:----------:|\n|1| Touch Down: Triggered when the user makes physical contact with the touch pad on the controller. |\n|2| Touch Down Move: Called when the user moves around the touch pad immediately after having performed a Touch Down action. |\n|3| Touch Up: Triggered after the user is no longer in physical contact with the touch pad after a Touch Down action. |\n\nFor example:\n``` \n_onTouch(state, touchPos, source) {\n var touchX = touchPos[0];\n var touchY = touchPos[1];\n if(state == 1) {\n // Touch Down\n } else if(state == 2) {\n // Touch Down Move\n } else if(state == 3) { \n // Touch Up\n }\n}\n```\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section.\n\nUnsupported VR Platforms: Cardboard(Android and iOS).", "5-0": "**onScroll**", "6-0": "**onSwipe**", "7-0": "**onTouch**", "8-0": "**soundRoom**", "8-1": "**PropTypes.shape**\n\nDescribes the acoustic properties of the room around the user by allowing the developer to describe the room based on its dimensions and its surface properties. Note: This is not supported in Cardboard iOS.\n\nCode Example:\n``` \n soundRoom={{\n size: {[2,2,2]},\n wallMaterial: \"acoustic_ceiling_tiles\",\n ceilingMaterial:\"glass_thin\",\n floorMaterial:\"concrete_block_coarse\"\n }}\n```\nList of soundRoom properties:\n\n|Name|Description|\n|:-------------------|:---------------|\n|size|The 3D dimensions of the room.|\n|wallMaterial|Sound Material for the four walls.|\n|ceilingMaterial|Sound Material for the ceiling|\n|floorMaterial|Sound Material for the floor|\n\nList of Supported Sound Materials:\n\n|Name|Description|\n|:-------------------|:---------------|\n|acoustic_ceiling_tiles|Acoustic ceiling tiles, absorbs most frequencies.|\n|brick_bare|Bare brick, relatively reflective.|\n|brick_painted|Painted brick|\n|concrete_block_coarse|Coarse surface concrete block.|\n|concrete_block_painted|Painted concrete block.|\n|curtain_heavy|Heavy curtains.|\n|fiber_glass_insulation|Fiber glass insulation.|\n|glass_thin|Thin glass.|\n|glass_thick|Thick glass.|\n|grass|Grass.|\n|linoleum_on_concrete|Linoleum on concrete.|\n|marble|Marble.|\n|metal|Galvanized sheet metal.|\n|parquet_on_concrete|Wooden parquet on concrete.|\n|plaster_rough|Rough plaster surface.|\n|plaster_smooth|Smooth plaster surface.|\n|plywood_panel|Plywood panel|\n|polished_concrete_or_tile|Polished concrete or tile surface.|\n|sheet_rock|Sheet rock|\n|transparent|Acoustically transparent material, reflects no sound.|\n|water_or_ice_surface|Surface of water or ice.|\n|wood_ceiling|Wooden ceiling.|\n|wood_panel|Wood paneling.|", "2-0": "**onFuse**", "2-1": "**PropTypes.oneOfType**\n``` \nPropTypes.oneOfType([\n React.PropTypes.shape({\n callback: React.PropTypes.func.isRequired,\n timeToFuse: PropTypes.number\n }),\n React.PropTypes.func,\n])\n``` \nAs shown above, onFuse takes one of the types - either a callback, or a dictionary with a callback and duration. \n\nIt is called after the user hovers onto and remains hovered on the control for a certain duration of time, as indicated in timeToFuse that represents the duration of time in milliseconds. \n\nWhile hovering, the reticle will display a count down animation while fusing towards timeToFuse.\n\nNote that timeToFuse defaults to 2000ms.\n\nFor example:\n``` \n_onFuse(source){\n // User has hovered over object for timeToFuse milliseconds\n}\n```\nFor the mapping of sources to controller inputs, see the [Events](doc:events) section." }, "cols": 2, "rows": 9 } [/block]