{"_id":"5a06037134873d0010b39233","category":{"_id":"5a06037134873d0010b39204","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__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"},"user":"57bb7defafc18c0e00529cf1","project":"578c4badbd223d2000cc1441","parentDoc":null,"version":{"_id":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2017-11-10T19:52:17.163Z","releaseDate":"2017-11-10T19:52:17.163Z","categories":["5a06037134873d0010b391ff","5a06037134873d0010b39200","5a06037134873d0010b39201","5a06037134873d0010b39202","5a06037134873d0010b39203","5a06037134873d0010b39204"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.1.0","version":"2.1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-18T01:05:54.948Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":34,"body":"A light object that emits a spotlight. See our [Lighting and Material Guide](http://viro.readme.io/docs/3d-scene-lighting) for more information on lights in a scene.\n\n######Example use:\n```\n \n<ViroSpotLight\n    color=\"#ffffff\"\n    attenuationStartDistance={2}\n    attenuationEndDistance={6}\n    position={[0, -5, 5]}\n    direction={[0 -1, 0]}\n    innerAngle={0}\n    outerAngle={45}\n />\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\": \"**attenuationEndDistance**\",\n    \"1-0\": \"**attenuationStartDistance**\",\n    \"3-0\": \"**color**\",\n    \"4-0\": \"**direction**\",\n    \"6-0\": \"**innerAngle**\",\n    \"8-0\": \"**outerAngle**\",\n    \"9-0\": \"**position**\",\n    \"15-0\": \"**rotation**\",\n    \"16-0\": \"**style**\",\n    \"17-0\": \"**text**\",\n    \"18-0\": \"**transformBehaviors**\",\n    \"20-0\": \"**visible**\",\n    \"19-0\": \"**width**\",\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**PropTypes.number**\\n\\nObjects positioned at a distance greater than the  attenuation end distance from the lights position will receive no illumination from this light.\\n\\nThe default value is 10.\",\n    \"1-1\": \"**PropTypes.number**\\n\\nObjects positioned within the attenuation start distance will receive the lights full illumination.\\n\\nObjects positioned between the start and end distance will receive a proportion of the lights illumination, transitioning from full illumination to no illumination the further out from the lights position the object is.\\n\\nThe default value is 2.\",\n    \"3-1\": \"**ColorPropType**\\n\\nThe color of the light. The default light color is white.\\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    \"4-1\": \"**PropTypes.arrayOf(PropTypes.number)**\\n\\nA 3D unit vector, specified as [x, y, z] that represents the direction the spotlight is facing. Values for each axis can be from -1 to 1. \\n\\nExample:\\n```\\ndirection={[1, 0, 0]}\\n```\\nThe above would make the light direction be towards positive x. So if an object was positioned at [0,0,0] the spot light would hit it from it's left side if it was was positioned to it's left.\",\n    \"6-1\": \"**PropTypes.number**\\n\\nA spotlight is defined to be a cone-shaped illumination. The cone is defined by a direction, position, innerAngle, and outerAngle.\\n\\nThe innerAngle is the the angle from the axis of the light cone to the edge of the 'full illumination' section of the light cone.\\n\\nThe default is set to 0, which means only objects hitting the center of the spotlight will receive the light's full illumination. The illumination declines from innerAngle until reaching outerAngle.\",\n    \"8-1\": \"**PropTypes.number**\\n\\nA spotlight is defined to be a cone-shaped illumination. The cone is defined by a direction, position, innerAngle, and outerAngle. \\n\\nThe outer angle is the angle from the hard edge of the cone to the soft edge of the cone. If the outer angle is zero, then the entirety of the cone will have full illumination.\\n\\nThe default is set to 45, which means objects that lie outside the 45 degree cone will not be illuminated.\",\n    \"9-1\": \"**PropTypes.arrayOf(PropTypes.number)**\\n\\nCartesian position of the box in 3D world space, specified as [x, y, z].\",\n    \"15-1\": \"PropTypes.arrayOf(PropTypes.number)\\n\\nPut the PropType Description here.\",\n    \"16-1\": \"stylePropType\",\n    \"17-1\": \"PropTypes.string\\n\\nPut the PropType Description here.\",\n    \"18-1\": \"PropTypes.arrayOf(PropTypes.string)\\n\\nPut the PropType Description here.\",\n    \"19-1\": \"PropTypes.number\\n\\nPut the PropType Description here.\",\n    \"20-1\": \"PropTypes.bool\\n\\nPut the PropType Description here.\",\n    \"7-0\": \"**intensity**\",\n    \"5-0\": \"**influenceBitMask**\",\n    \"2-0\": \"**castsShadow**\",\n    \"14-0\": \"**shadowOpacity**\",\n    \"12-0\": \"**shadowNearZ**\",\n    \"10-0\": \"**shadowBias**\",\n    \"13-0\": \"**shadowMapSize**\",\n    \"11-0\": \"**shadowFarZ**\",\n    \"5-1\": \"**PropTypes.number**\\n\\nThis property is used to make lights apply to specific nodes. Lights and nodes in the scene can be assigned bit-masks to determine how each light influences each node. \\n\\nDuring rendering, Viro compares each light's influenceBitMask with each node's lightReceivingBitMask and shadowCastingBitMask. The bit-masks are compared using a bitwise AND operation:\\n\\nIf ```(influenceBitMask & lightReceivingBitMask) != 0```, then the light will illuminate the node (and the node will receive shadows cast from objects occluding the light).\\n\\nIf ```(influenceBitMask & shadowCastingBitMask) != 0```, then the node will cast shadows from the light.\\n\\nThe default mask is 0x1.\",\n    \"7-1\": \"**PropTypes.number**\\n\\nThe total brightness of the light. Ranges from 0 to 1000. This value, divided by 1000, serves as a multiplier to the color of the light. \\n\\nThe default intensity is 1000.\",\n    \"2-1\": \"**PropTypes.bool**\\n\\nTrue if this light should cast shadows.\",\n    \"10-1\": \"**PropTypes.number**\\n\\nThe amount of bias to apply to the Z coordinate when performing the shadow depth comparison. This reduces shadow acne, but large biases can cause \\\"peter panning\\\".\\n\\nThe default value is 0.005.\",\n    \"11-1\": \"**PropTypes.number**\\n\\nThe far clipping plane to use when rendering shadows. Shadows are only cast by and on surfaces closer than this plane.\\n\\nThis value defines the units away the far clipping plane is from the light's position, in the direction of the light.\\n\\nThe shadow bounds constructed from this property, shadowNearZ, and the light's cone (innerAngle and outerAngle) should be kept as tight as possible to maximize the resolution of shadows.\\n\\nThe default value is 20.\",\n    \"12-1\": \"**PropTypes.number**\\n\\nThe near clipping plane to use when rendering shadows. Shadows are only cast by and on surfaces further away than this plane.\\n\\nThis value defines the units away the near clipping plane is from the light's position, in the direction of the light.\\n\\nThe shadow bounds constructed from this property, shadowNearZ, and the light's cone (innerAngle and outerAngle) should be kept as tight as possible to maximize the resolution of shadows.\\n\\nThe default value is 0.1.\",\n    \"13-1\": \"**PropTypes.number**\\n\\nThe size of the shadow map used to cast shadows for this light.\\n\\nShadows are created by rendering the silhouettes of scene geometry onto a 2D image from the point of view of the light, then projecting that image onto the final view. \\n\\nLarger shadow maps result in higher resolution shadows, but can have a higher memory and performance cost. Smaller shadow maps are faster but result in pixelated edges.\\n\\nThe default value is 1024.\",\n    \"14-1\": \"**PropTypes.number**\\n\\nThe opacity of the shadow. 1.0 creates a pitch black shadow.\"\n  },\n  \"cols\": 2,\n  \"rows\": 15\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Methods\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"setNativeProps(nativeProps: object)\",\n    \"0-0\": \"A wrapper function around the native component's setNativeProps which allow users to set values on the native component without changing state/setting props and re-rendering. Refer to the React Native documentation on [Direct Manipulation](https://facebook.github.io/react-native/docs/direct-manipulation.html) for more information.\\n\\n|Parameter|Description|\\n|---|---|\\n|nativeProps | an object where the keys are the properties to set and the values are the values to set  |\\n\\nFor example, setting position natively would look like this:\\n\\n```\\ncomponentRef.setNativeProps({\\n    position : [0, 0, -1]\\n});\\n```\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]","excerpt":"","slug":"virospotlight1","type":"basic","title":"ViroSpotLight"}
A light object that emits a spotlight. See our [Lighting and Material Guide](http://viro.readme.io/docs/3d-scene-lighting) for more information on lights in a scene. ######Example use: ``` <ViroSpotLight color="#ffffff" attenuationStartDistance={2} attenuationEndDistance={6} position={[0, -5, 5]} direction={[0 -1, 0]} innerAngle={0} outerAngle={45} /> ``` [block:api-header] { "type": "basic", "title": "Props" } [/block] ##Optional Props [block:parameters] { "data": { "0-0": "**attenuationEndDistance**", "1-0": "**attenuationStartDistance**", "3-0": "**color**", "4-0": "**direction**", "6-0": "**innerAngle**", "8-0": "**outerAngle**", "9-0": "**position**", "15-0": "**rotation**", "16-0": "**style**", "17-0": "**text**", "18-0": "**transformBehaviors**", "20-0": "**visible**", "19-0": "**width**", "h-0": "PropKey", "h-1": "PropType", "0-1": "**PropTypes.number**\n\nObjects positioned at a distance greater than the attenuation end distance from the lights position will receive no illumination from this light.\n\nThe default value is 10.", "1-1": "**PropTypes.number**\n\nObjects positioned within the attenuation start distance will receive the lights full illumination.\n\nObjects positioned between the start and end distance will receive a proportion of the lights illumination, transitioning from full illumination to no illumination the further out from the lights position the object is.\n\nThe default value is 2.", "3-1": "**ColorPropType**\n\nThe color of the light. The default light color is white.\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)", "4-1": "**PropTypes.arrayOf(PropTypes.number)**\n\nA 3D unit vector, specified as [x, y, z] that represents the direction the spotlight is facing. Values for each axis can be from -1 to 1. \n\nExample:\n```\ndirection={[1, 0, 0]}\n```\nThe above would make the light direction be towards positive x. So if an object was positioned at [0,0,0] the spot light would hit it from it's left side if it was was positioned to it's left.", "6-1": "**PropTypes.number**\n\nA spotlight is defined to be a cone-shaped illumination. The cone is defined by a direction, position, innerAngle, and outerAngle.\n\nThe innerAngle is the the angle from the axis of the light cone to the edge of the 'full illumination' section of the light cone.\n\nThe default is set to 0, which means only objects hitting the center of the spotlight will receive the light's full illumination. The illumination declines from innerAngle until reaching outerAngle.", "8-1": "**PropTypes.number**\n\nA spotlight is defined to be a cone-shaped illumination. The cone is defined by a direction, position, innerAngle, and outerAngle. \n\nThe outer angle is the angle from the hard edge of the cone to the soft edge of the cone. If the outer angle is zero, then the entirety of the cone will have full illumination.\n\nThe default is set to 45, which means objects that lie outside the 45 degree cone will not be illuminated.", "9-1": "**PropTypes.arrayOf(PropTypes.number)**\n\nCartesian position of the box in 3D world space, specified as [x, y, z].", "15-1": "PropTypes.arrayOf(PropTypes.number)\n\nPut the PropType Description here.", "16-1": "stylePropType", "17-1": "PropTypes.string\n\nPut the PropType Description here.", "18-1": "PropTypes.arrayOf(PropTypes.string)\n\nPut the PropType Description here.", "19-1": "PropTypes.number\n\nPut the PropType Description here.", "20-1": "PropTypes.bool\n\nPut the PropType Description here.", "7-0": "**intensity**", "5-0": "**influenceBitMask**", "2-0": "**castsShadow**", "14-0": "**shadowOpacity**", "12-0": "**shadowNearZ**", "10-0": "**shadowBias**", "13-0": "**shadowMapSize**", "11-0": "**shadowFarZ**", "5-1": "**PropTypes.number**\n\nThis property is used to make lights apply to specific nodes. Lights and nodes in the scene can be assigned bit-masks to determine how each light influences each node. \n\nDuring rendering, Viro compares each light's influenceBitMask with each node's lightReceivingBitMask and shadowCastingBitMask. The bit-masks are compared using a bitwise AND operation:\n\nIf ```(influenceBitMask & lightReceivingBitMask) != 0```, then the light will illuminate the node (and the node will receive shadows cast from objects occluding the light).\n\nIf ```(influenceBitMask & shadowCastingBitMask) != 0```, then the node will cast shadows from the light.\n\nThe default mask is 0x1.", "7-1": "**PropTypes.number**\n\nThe total brightness of the light. Ranges from 0 to 1000. This value, divided by 1000, serves as a multiplier to the color of the light. \n\nThe default intensity is 1000.", "2-1": "**PropTypes.bool**\n\nTrue if this light should cast shadows.", "10-1": "**PropTypes.number**\n\nThe amount of bias to apply to the Z coordinate when performing the shadow depth comparison. This reduces shadow acne, but large biases can cause \"peter panning\".\n\nThe default value is 0.005.", "11-1": "**PropTypes.number**\n\nThe far clipping plane to use when rendering shadows. Shadows are only cast by and on surfaces closer than this plane.\n\nThis value defines the units away the far clipping plane is from the light's position, in the direction of the light.\n\nThe shadow bounds constructed from this property, shadowNearZ, and the light's cone (innerAngle and outerAngle) should be kept as tight as possible to maximize the resolution of shadows.\n\nThe default value is 20.", "12-1": "**PropTypes.number**\n\nThe near clipping plane to use when rendering shadows. Shadows are only cast by and on surfaces further away than this plane.\n\nThis value defines the units away the near clipping plane is from the light's position, in the direction of the light.\n\nThe shadow bounds constructed from this property, shadowNearZ, and the light's cone (innerAngle and outerAngle) should be kept as tight as possible to maximize the resolution of shadows.\n\nThe default value is 0.1.", "13-1": "**PropTypes.number**\n\nThe size of the shadow map used to cast shadows for this light.\n\nShadows are created by rendering the silhouettes of scene geometry onto a 2D image from the point of view of the light, then projecting that image onto the final view. \n\nLarger shadow maps result in higher resolution shadows, but can have a higher memory and performance cost. Smaller shadow maps are faster but result in pixelated edges.\n\nThe default value is 1024.", "14-1": "**PropTypes.number**\n\nThe opacity of the shadow. 1.0 creates a pitch black shadow." }, "cols": 2, "rows": 15 } [/block] [block:api-header] { "title": "Methods" } [/block] [block:parameters] { "data": { "h-0": "setNativeProps(nativeProps: object)", "0-0": "A wrapper function around the native component's setNativeProps which allow users to set values on the native component without changing state/setting props and re-rendering. Refer to the React Native documentation on [Direct Manipulation](https://facebook.github.io/react-native/docs/direct-manipulation.html) for more information.\n\n|Parameter|Description|\n|---|---|\n|nativeProps | an object where the keys are the properties to set and the values are the values to set |\n\nFor example, setting position natively would look like this:\n\n```\ncomponentRef.setNativeProps({\n position : [0, 0, -1]\n});\n```" }, "cols": 1, "rows": 1 } [/block]