{"__v":0,"_id":"5841ca79ae05ac2500ba2642","category":{"version":"5841ca79ae05ac2500ba2621","project":"578c4badbd223d2000cc1441","_id":"5841ca79ae05ac2500ba2623","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":1,"slug":"develop","title":"Develop"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"578c4a62bd223d2000cc143e","version":{"__v":1,"_id":"5841ca79ae05ac2500ba2621","project":"578c4badbd223d2000cc1441","createdAt":"2016-12-02T19:24:41.091Z","releaseDate":"2016-12-02T19:24:41.091Z","categories":["5841ca79ae05ac2500ba2622","5841ca79ae05ac2500ba2623","5841ca79ae05ac2500ba2624","5841ca79ae05ac2500ba2625","5841ca79ae05ac2500ba2626"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.0.46","version":"0.0.46"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T19:28:47.231Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"Applications in Viro consist of Scenes, represented by ```<ViroScene>``` objects. Scenes are the 3D equivalent of the Views found in most 2D application frameworks. They contain all the content that Viro renders in VR: UI controls, 3D objects, lights, and more. \n\nAn application in Viro typically contains one or more `<ViroScene>` objects contained in a single `<ViroSceneNavigator>`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Basic Scene\"\n}\n[/block]\nA simple `<ViroScene>` is provided below. The scene contains a single `<ViroText>` object, which displays the text \"Hello World\".\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroScene>\\n  <ViroText text=\\\"Hello World\\\" position={[0, -.1, -1]} />\\n</ViroScene>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Positioning Objects in a Scene\"\n}\n[/block]\nViro uses a right-handed coordinate system, where the direction of view is along the negative z-axis. The point of view can be modified by changing the [Camera](doc:camera). By default, the camera is positioned at ```[0, 0, 0]``` and looks in the direction ```[0, 0, -1]```.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/54ce6ff-viro_camera_diagram.png\",\n        \"viro_camera_diagram.png\",\n        607,\n        676,\n        \"#3cbbfb\"\n      ]\n    }\n  ]\n}\n[/block]\nObjects in the scene are positioned in this 3D coordinate system via the ```position``` attribute. As scenes grow in complexity, it is best to take advantage of Viro's underlying [Scene Graph](#scene-graph) when placing objects. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Scene Backgrounds\"\n}\n[/block]\nThe background of a scene is the content rendered in the distance, behind all the objects. This background can either be a 360 degree photo, or a [skybox](doc:skybox) .\n\nTo render a 360 photo as the background add a ```<Viro360Photo>``` component to the scene, as shown below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroScene style={styles.container} >\\n  <Viro360Photo photo={require('./res/360_diving.jpg')} />\\n</ViroScene>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nTo render a skybox, use the ```<ViroSkybox>``` component. A skybox is a cube with 6 sides that encloses the user. The six sides can either be given a solid color, by setting the ```color``` attribute of the skybox, or they can each be assigned a texture, by setting the ```source``` attribute. In the example below, each side of the skybox is assigned the same image.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroScene style={styles.container}>\\n  <ViroSkybox source={{nx:require('./res/grid_bg.jpg'),\\n                       px:require('./res/grid_bg.jpg'),\\n                       ny:require('./res/grid_bg.jpg'),\\n                       py:require('./res/grid_bg.jpg'),\\n                       nz:require('./res/grid_bg.jpg'),\\n                       pz:require('./res/grid_bg.jpg')}} />\\n</ViroScene>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe parameters in ```source```, nx, px, ny, py, nz, and pz, specify the texture to use for each cube face (where nx is the face in the negative-x direction, px is the face in the positive-x direction, and so on).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Scene Graph\"\n}\n[/block]\nUnderlying the ```<ViroScene>``` is a full-featured 3D scene graph engine. A scene graph is a hierarchical tree structure of nodes that allows developers to intuitively construct a 3D environment. The root node is the ```<ViroScene>``` itself. Sub-nodes are represented by child ```<ViroNode>``` objects. Each ```<ViroNode>``` represents a position and transform in 3D space, to which you can attach [3D objects](doc:3d-objects), [lights](doc:3d-scene-lighting), or other content.\n\nA ```<ViroNode>``` by itself has no visible content when it is rendered; it represents only a coordinate space transform (position, rotation, and scale) relative to its parent ```<ViroNode>```. You use a hierarchy of ```<ViroNode>``` objects to model your scene in a way that makes sense for your app.\n\nFor example, in the scene below Text A's final position will be ```[0, 0.9, -2]```, and Text B's final position will be ```[1, 1, -1]```. Similarly, Text A's final scale will be ```[2, 2, 2]```, while Text B's final scale will be ```[4, 4, 4]```, since it picks up the scale from both its parent nodes.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroScene>\\n  <ViroNode position={[0, 1, -1]} scale={[2, 2, 2]}>\\n    <ViroText text=\\\"Text A\\\" position={[0, -.1, -1]}  />\\n    \\n    <ViroNode position={[1, 0, 0 ]} scale={[4, 4, 4]}>\\n      <ViroText text=\\\"Text B\\\" />\\n    </ViroNode> \\n  </ViroNode>\\n</ViroScene>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nTo take a more concrete example, suppose your app presents an animated view of a solar system.  You can construct a ```<ViroNode>``` hierarchy that models celestial bodies relative to one another. Each body can be a ```<ViroNode>```, with its position in its orbit defined in the coordinate system of its parent. The sun would define its own coordinate space, and the Earth would position itself in that space. At the same time, the Earth would define its own coordinate space in which the moon would position itself. The snippet below shows a simple solar system.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroNode position={[0,0,-3]} /**sun-earth system**/>\\n\\t<ViroSphere materials={[\\\"sunClipart\\\"]} />\\n  <ViroNode position={[0, 0, -5]} /**moon-earth system**/>\\n    <ViroSphere position={[0,0,0]} materials={[\\\"earth\\\"]} />\\n    <ViroSphere position={[0,1,-2]} scale={[.2, .2, .2]} materials={[\\\"moon\\\"]}/>\\n  </ViroNode>\\n</ViroNode>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis scene hierarchy makes it intuitive to animate the celestial bodies: the revolution of the moon around the Earth and the Earth around the sun combine such that the moon follows the planet around the sun.","excerpt":"","slug":"scenes","type":"basic","title":"Scenes"}
Applications in Viro consist of Scenes, represented by ```<ViroScene>``` objects. Scenes are the 3D equivalent of the Views found in most 2D application frameworks. They contain all the content that Viro renders in VR: UI controls, 3D objects, lights, and more. An application in Viro typically contains one or more `<ViroScene>` objects contained in a single `<ViroSceneNavigator>`. [block:api-header] { "type": "basic", "title": "Basic Scene" } [/block] A simple `<ViroScene>` is provided below. The scene contains a single `<ViroText>` object, which displays the text "Hello World". [block:code] { "codes": [ { "code": "<ViroScene>\n <ViroText text=\"Hello World\" position={[0, -.1, -1]} />\n</ViroScene>", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Positioning Objects in a Scene" } [/block] Viro uses a right-handed coordinate system, where the direction of view is along the negative z-axis. The point of view can be modified by changing the [Camera](doc:camera). By default, the camera is positioned at ```[0, 0, 0]``` and looks in the direction ```[0, 0, -1]```. [block:image] { "images": [ { "image": [ "https://files.readme.io/54ce6ff-viro_camera_diagram.png", "viro_camera_diagram.png", 607, 676, "#3cbbfb" ] } ] } [/block] Objects in the scene are positioned in this 3D coordinate system via the ```position``` attribute. As scenes grow in complexity, it is best to take advantage of Viro's underlying [Scene Graph](#scene-graph) when placing objects. [block:api-header] { "type": "basic", "title": "Scene Backgrounds" } [/block] The background of a scene is the content rendered in the distance, behind all the objects. This background can either be a 360 degree photo, or a [skybox](doc:skybox) . To render a 360 photo as the background add a ```<Viro360Photo>``` component to the scene, as shown below. [block:code] { "codes": [ { "code": "<ViroScene style={styles.container} >\n <Viro360Photo photo={require('./res/360_diving.jpg')} />\n</ViroScene>", "language": "javascript" } ] } [/block] To render a skybox, use the ```<ViroSkybox>``` component. A skybox is a cube with 6 sides that encloses the user. The six sides can either be given a solid color, by setting the ```color``` attribute of the skybox, or they can each be assigned a texture, by setting the ```source``` attribute. In the example below, each side of the skybox is assigned the same image. [block:code] { "codes": [ { "code": "<ViroScene style={styles.container}>\n <ViroSkybox source={{nx:require('./res/grid_bg.jpg'),\n px:require('./res/grid_bg.jpg'),\n ny:require('./res/grid_bg.jpg'),\n py:require('./res/grid_bg.jpg'),\n nz:require('./res/grid_bg.jpg'),\n pz:require('./res/grid_bg.jpg')}} />\n</ViroScene>", "language": "javascript" } ] } [/block] The parameters in ```source```, nx, px, ny, py, nz, and pz, specify the texture to use for each cube face (where nx is the face in the negative-x direction, px is the face in the positive-x direction, and so on). [block:api-header] { "type": "basic", "title": "Scene Graph" } [/block] Underlying the ```<ViroScene>``` is a full-featured 3D scene graph engine. A scene graph is a hierarchical tree structure of nodes that allows developers to intuitively construct a 3D environment. The root node is the ```<ViroScene>``` itself. Sub-nodes are represented by child ```<ViroNode>``` objects. Each ```<ViroNode>``` represents a position and transform in 3D space, to which you can attach [3D objects](doc:3d-objects), [lights](doc:3d-scene-lighting), or other content. A ```<ViroNode>``` by itself has no visible content when it is rendered; it represents only a coordinate space transform (position, rotation, and scale) relative to its parent ```<ViroNode>```. You use a hierarchy of ```<ViroNode>``` objects to model your scene in a way that makes sense for your app. For example, in the scene below Text A's final position will be ```[0, 0.9, -2]```, and Text B's final position will be ```[1, 1, -1]```. Similarly, Text A's final scale will be ```[2, 2, 2]```, while Text B's final scale will be ```[4, 4, 4]```, since it picks up the scale from both its parent nodes. [block:code] { "codes": [ { "code": "<ViroScene>\n <ViroNode position={[0, 1, -1]} scale={[2, 2, 2]}>\n <ViroText text=\"Text A\" position={[0, -.1, -1]} />\n \n <ViroNode position={[1, 0, 0 ]} scale={[4, 4, 4]}>\n <ViroText text=\"Text B\" />\n </ViroNode> \n </ViroNode>\n</ViroScene>", "language": "javascript" } ] } [/block] To take a more concrete example, suppose your app presents an animated view of a solar system. You can construct a ```<ViroNode>``` hierarchy that models celestial bodies relative to one another. Each body can be a ```<ViroNode>```, with its position in its orbit defined in the coordinate system of its parent. The sun would define its own coordinate space, and the Earth would position itself in that space. At the same time, the Earth would define its own coordinate space in which the moon would position itself. The snippet below shows a simple solar system. [block:code] { "codes": [ { "code": "<ViroNode position={[0,0,-3]} /**sun-earth system**/>\n\t<ViroSphere materials={[\"sunClipart\"]} />\n <ViroNode position={[0, 0, -5]} /**moon-earth system**/>\n <ViroSphere position={[0,0,0]} materials={[\"earth\"]} />\n <ViroSphere position={[0,1,-2]} scale={[.2, .2, .2]} materials={[\"moon\"]}/>\n </ViroNode>\n</ViroNode>", "language": "javascript" } ] } [/block] This scene hierarchy makes it intuitive to animate the celestial bodies: the revolution of the moon around the Earth and the Earth around the sun combine such that the moon follows the planet around the sun.