{"_id":"5a06037234873d0010b3924b","category":{"_id":"5a06037134873d0010b39202","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":3,"slug":"develop","title":"Develop"},"project":"578c4badbd223d2000cc1441","user":"578c4a62bd223d2000cc143e","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-07-18T20:09:57.359Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":10,"body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/b891975-viro_camera_diagram.png\",\n        \"viro_camera_diagram.png\",\n        607,\n        676,\n        \"#3cbbfb\"\n      ]\n    }\n  ]\n}\n[/block]\nScenes in Viro are full 3D environments that can be viewed from any angle. The ```ViroCamera``` element defines the position from which the scene is viewed. By default, the camera is positioned at the origin ```[0, 0, 0]```. The camera always points in the negative Z direction ```[0, 0, -1]```.\n\nIn the example below, we set the camera to position ```[-1, 0, 0]```, so that when the user enters the scene she is staring directly at the text.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroScene>\\n   <ViroCamera position={[-1, 0, 0]} active={true} />\\n   <ViroText style={styles.baseText} text=\\\"Hello!\\\" position={[-1, 0, -1]} />\\n</ViroScene>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf no ```<ViroCamera>``` is specified, then the default camera (position at origin) is used. Rotation may also be set for ```<ViroCamera>```, which sets the base orientation of the camera; that is, the orientation of the camera when the user is staring straight ahead. For example, in the camera below the user enters the scene looking up 45 degrees.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroScene>\\n   <ViroCamera position={[0, 0, 0]} rotation={[45, 0, 0]) {active={true} />\\n   <ViroText style={styles.baseText} text=\\\"Hello!\\\" position={[-1, 0, -1]} />\\n</ViroScene>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Orbit Camera\"\n}\n[/block]\nThe ```<ViroOrbitCamera>``` is an alternative camera that enables the user to orbit about a focal point. This is useful for exploring a single point in a 3D scene from all angles: as the user tilts her head, the camera orbits about that single point.\n\nThe example below utilizes an orbit camera. The focalPoint is set to ```[0, 0, -1]```. Since the ```<Viro3DObject>``` is also positioned at ```[0, 0, -1]```, this means the user will stay focused on that 3D model as he tilts his head, revealing it from all angles.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroScene>\\n  <ViroOrbitCamera position={[0, 0, 0]} focalPoint={[0, 0, -1]} active={true} />\\n  <Viro3DObject source={require('./res/heart.obj') position={[0, 0, -1]} />\\n</ViroScene>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Node-Attached Cameras\"\n}\n[/block]\nYou can also define a cameras within ```<ViroNode>``` objects. By doing so, you 'attach' the camera to the node: it is transformed within the node like any other element in the scene graph.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroNode position={[0, 0, -3]} /**sun-earth system**/>\\n\\t<ViroSphere materials={[\\\"sun\\\"]} />\\n  \\n  <ViroNode position={[0, 0, -5]} /**earth-moon system**/>\\n    <ViroCamera position={[0, 0, 0]} active={true} />\\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]\nIn the example above, the camera is placed at Earth. If we were to animate the Earth-Moon system in the example above -- for example to orbit around the Sun -- the camera would animate as well.\n[block:api-header]\n{\n  \"title\": \"Multiple Cameras\"\n}\n[/block]\nViro allows developers to specify multiple cameras. The camera the user sees through is that which has its ```active``` property set to true. If no camera is active, the default camera (positioned at 0, 0, 0, looking toward negative Z), will be used.","excerpt":"Setting the Point of View","slug":"camera","type":"basic","title":"Camera"}

Camera

Setting the Point of View

[block:image] { "images": [ { "image": [ "https://files.readme.io/b891975-viro_camera_diagram.png", "viro_camera_diagram.png", 607, 676, "#3cbbfb" ] } ] } [/block] Scenes in Viro are full 3D environments that can be viewed from any angle. The ```ViroCamera``` element defines the position from which the scene is viewed. By default, the camera is positioned at the origin ```[0, 0, 0]```. The camera always points in the negative Z direction ```[0, 0, -1]```. In the example below, we set the camera to position ```[-1, 0, 0]```, so that when the user enters the scene she is staring directly at the text. [block:code] { "codes": [ { "code": "<ViroScene>\n <ViroCamera position={[-1, 0, 0]} active={true} />\n <ViroText style={styles.baseText} text=\"Hello!\" position={[-1, 0, -1]} />\n</ViroScene>", "language": "javascript" } ] } [/block] If no ```<ViroCamera>``` is specified, then the default camera (position at origin) is used. Rotation may also be set for ```<ViroCamera>```, which sets the base orientation of the camera; that is, the orientation of the camera when the user is staring straight ahead. For example, in the camera below the user enters the scene looking up 45 degrees. [block:code] { "codes": [ { "code": "<ViroScene>\n <ViroCamera position={[0, 0, 0]} rotation={[45, 0, 0]) {active={true} />\n <ViroText style={styles.baseText} text=\"Hello!\" position={[-1, 0, -1]} />\n</ViroScene>", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Orbit Camera" } [/block] The ```<ViroOrbitCamera>``` is an alternative camera that enables the user to orbit about a focal point. This is useful for exploring a single point in a 3D scene from all angles: as the user tilts her head, the camera orbits about that single point. The example below utilizes an orbit camera. The focalPoint is set to ```[0, 0, -1]```. Since the ```<Viro3DObject>``` is also positioned at ```[0, 0, -1]```, this means the user will stay focused on that 3D model as he tilts his head, revealing it from all angles. [block:code] { "codes": [ { "code": "<ViroScene>\n <ViroOrbitCamera position={[0, 0, 0]} focalPoint={[0, 0, -1]} active={true} />\n <Viro3DObject source={require('./res/heart.obj') position={[0, 0, -1]} />\n</ViroScene>", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Node-Attached Cameras" } [/block] You can also define a cameras within ```<ViroNode>``` objects. By doing so, you 'attach' the camera to the node: it is transformed within the node like any other element in the scene graph. [block:code] { "codes": [ { "code": "<ViroNode position={[0, 0, -3]} /**sun-earth system**/>\n\t<ViroSphere materials={[\"sun\"]} />\n \n <ViroNode position={[0, 0, -5]} /**earth-moon system**/>\n <ViroCamera position={[0, 0, 0]} active={true} />\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] In the example above, the camera is placed at Earth. If we were to animate the Earth-Moon system in the example above -- for example to orbit around the Sun -- the camera would animate as well. [block:api-header] { "title": "Multiple Cameras" } [/block] Viro allows developers to specify multiple cameras. The camera the user sees through is that which has its ```active``` property set to true. If no camera is active, the default camera (positioned at 0, 0, 0, looking toward negative Z), will be used.