{"_id":"58f7a4c8cbd001190056cc15","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"},"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"},"user":"579fce4e1435850e00dfbbbb","__v":0,"parentDoc":null,"project":"578c4badbd223d2000cc1441","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-24T18:56:29.359Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":13,"body":"Many Viro components take an array of materials. A material is a way to describe visual properties  that is applied to an object which affects the display of that object. For example, applying a black or gray material to a rock object will make the rock look as it should. For more information on Materials see our [Lighting and Materials Guide](http://viro.readme.io/docs/3d-scene-lighting).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Methods\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"static createMaterials(materials:{[key:string]: any})\",\n    \"0-0\": \"Create materials is a static takes a key/value of objects that conform to ```MaterialPropTypes```. They key is a string that represents a **unique** name for the material while value is a list of properties that align with ```MaterialPropTypes```\\n\\nExample showing the creation of two materials:\\n\\n```\\nViroMaterials.createMaterials({\\n  earth: {\\n    shininess: 2.0,\\n    lightingModel: \\\"Lambert\\\",\\n    diffuseTexture: require('./res/earth_texture.jpg'),\\n  },\\n  moon: {\\n    shininess: 2.0,\\n    lightingModel: \\\"Constant\\\",\\n    diffuseTexture: require('./res/moon_texture.jpg'),\\n  },\\n});\\n```\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Material Prop Types\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-0\": \"**ambientOcclusionColor**\",\n    \"2-0\": \"**diffuseColor**\",\n    \"3-0\": \"**diffuseTexture**\",\n    \"4-0\": \"**lightingModel**\",\n    \"6-0\": \"**readsFromDepthBuffer**\",\n    \"7-0\": \"**shininess**\",\n    \"8-0\": \"**specularTexture**\",\n    \"9-0\": \"**writesToDepthBuffer**\",\n    \"0-1\": \"**ColorPropType**\\n\\nThe color of the text. The default text 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    \"2-1\": \"**ColorPropType**\\n\\nThe color of this material. Note: Either diffuseColor or diffuseColor can be specified. Both **cannot** be specified.\\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\": \"**ReactPropTypes.any**\\n\\nA texture iamge which can be a remote URL or a local file resource. PNG and JPG images accepted.\\n\\nTo invoke with remote url: \\n```\\n{uri:\\\"http://example.org/myimage.png\\\"}\\n```\\nTo invoke with local source:\\n```\\nrequire('./image.png');\\n```\",\n    \"4-1\": \"**ReactPropTypes.oneOf(['Phong', 'Blinn', 'Lambert', 'Constant'])**\\n\\nLighting that applies to this material. Default is ```Blinn```.\",\n    \"6-1\": \"**ReactPropTypes.bool**\\n\\nFalse if this material shouldn't factor in depth. Set to true by default.\",\n    \"9-1\": \"**ReactPropTypes.bool**\\n\\nFalse if this material shouldn't factor in depth. Set to true by default.\",\n    \"8-1\": \"**ReactPropTypes.any**\\n\\nA specular texture image which can be a remote URL or a local file resource. PNG and JPG images accepted.\\n\\nTo invoke with remote url: \\n```\\n{uri:\\\"http://example.org/myimage.png\\\"}\\n```\\nTo invoke with local source:\\n```\\nrequire('./image.png');\\n```\",\n    \"7-1\": \"**ReactPropTypes.number**\\n\\n  The sharpness of specular highlights, which only applies if there is a ```specularTexture```.\",\n    \"1-0\": \"**cullMode**\",\n    \"1-1\": \"**ReactPropTypes.oneOf(['None', 'Back', 'Front'])**\\n\\nSpecifies whether or not the object that applies this material renders all surfaces or only surfaces whose normal is facing the user. By default, **Back** is enabled.\",\n    \"5-0\": \"**normalTexture**\",\n    \"5-1\": \"**ReactPropTypes.any**\\n\\nA normal map texture which can be a remote URL or a local file resource. PNG and JPG images accepted.\\n\\nNormal maps define the orientation of the surface at each point for use in lighting. Viro treats the R, G, and B components of each pixel in the normal map as the X, Y, and Z components of a surface normal vector. Normal maps are often used to simulate rough surfaces or to add details to otherwise smooth surfaces.\\n\\nTo invoke with remote url: \\n```\\n{uri:\\\"http://example.org/myimage.png\\\"}\\n```\\nTo invoke with local source:\\n```\\nrequire('./image.png');\\n```\"\n  },\n  \"cols\": 2,\n  \"rows\": 10\n}\n[/block]","excerpt":"","slug":"materials","type":"basic","title":"ViroMaterials"}
Many Viro components take an array of materials. A material is a way to describe visual properties that is applied to an object which affects the display of that object. For example, applying a black or gray material to a rock object will make the rock look as it should. For more information on Materials see our [Lighting and Materials Guide](http://viro.readme.io/docs/3d-scene-lighting). [block:api-header] { "type": "basic", "title": "Methods" } [/block] [block:parameters] { "data": { "h-0": "static createMaterials(materials:{[key:string]: any})", "0-0": "Create materials is a static takes a key/value of objects that conform to ```MaterialPropTypes```. They key is a string that represents a **unique** name for the material while value is a list of properties that align with ```MaterialPropTypes```\n\nExample showing the creation of two materials:\n\n```\nViroMaterials.createMaterials({\n earth: {\n shininess: 2.0,\n lightingModel: \"Lambert\",\n diffuseTexture: require('./res/earth_texture.jpg'),\n },\n moon: {\n shininess: 2.0,\n lightingModel: \"Constant\",\n diffuseTexture: require('./res/moon_texture.jpg'),\n },\n});\n```" }, "cols": 1, "rows": 1 } [/block] [block:api-header] { "type": "basic", "title": "Material Prop Types" } [/block] [block:parameters] { "data": { "h-0": "PropKey", "h-1": "PropType", "0-0": "**ambientOcclusionColor**", "2-0": "**diffuseColor**", "3-0": "**diffuseTexture**", "4-0": "**lightingModel**", "6-0": "**readsFromDepthBuffer**", "7-0": "**shininess**", "8-0": "**specularTexture**", "9-0": "**writesToDepthBuffer**", "0-1": "**ColorPropType**\n\nThe color of the text. The default text 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)", "2-1": "**ColorPropType**\n\nThe color of this material. Note: Either diffuseColor or diffuseColor can be specified. Both **cannot** be specified.\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": "**ReactPropTypes.any**\n\nA texture iamge which can be a remote URL or a local file resource. PNG and JPG images accepted.\n\nTo invoke with remote url: \n```\n{uri:\"http://example.org/myimage.png\"}\n```\nTo invoke with local source:\n```\nrequire('./image.png');\n```", "4-1": "**ReactPropTypes.oneOf(['Phong', 'Blinn', 'Lambert', 'Constant'])**\n\nLighting that applies to this material. Default is ```Blinn```.", "6-1": "**ReactPropTypes.bool**\n\nFalse if this material shouldn't factor in depth. Set to true by default.", "9-1": "**ReactPropTypes.bool**\n\nFalse if this material shouldn't factor in depth. Set to true by default.", "8-1": "**ReactPropTypes.any**\n\nA specular texture image which can be a remote URL or a local file resource. PNG and JPG images accepted.\n\nTo invoke with remote url: \n```\n{uri:\"http://example.org/myimage.png\"}\n```\nTo invoke with local source:\n```\nrequire('./image.png');\n```", "7-1": "**ReactPropTypes.number**\n\n The sharpness of specular highlights, which only applies if there is a ```specularTexture```.", "1-0": "**cullMode**", "1-1": "**ReactPropTypes.oneOf(['None', 'Back', 'Front'])**\n\nSpecifies whether or not the object that applies this material renders all surfaces or only surfaces whose normal is facing the user. By default, **Back** is enabled.", "5-0": "**normalTexture**", "5-1": "**ReactPropTypes.any**\n\nA normal map texture which can be a remote URL or a local file resource. PNG and JPG images accepted.\n\nNormal maps define the orientation of the surface at each point for use in lighting. Viro treats the R, G, and B components of each pixel in the normal map as the X, Y, and Z components of a surface normal vector. Normal maps are often used to simulate rough surfaces or to add details to otherwise smooth surfaces.\n\nTo invoke with remote url: \n```\n{uri:\"http://example.org/myimage.png\"}\n```\nTo invoke with local source:\n```\nrequire('./image.png');\n```" }, "cols": 2, "rows": 10 } [/block]