https://deck.gl/assets/js/e2e55e2c.966a9818.js

1"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([["4171"],{11782(e,i,r){r.r(i),r.d(i,{metadata:()=>o,default:()=>h,frontMatter:()=>s,contentTitle:()=>l,toc:()=>a,assets:()=>c});var o=JSON.parse('{"id":"api-reference/core/orbit-view","title":"OrbitView","description":"The OrbitView class is a subclass of View that creates a 3D camera that rotates around a target position. It is usually used for the examination of a 3D scene in non-geospatial use cases.","source":"@site/../docs/api-reference/core/orbit-view.md","sourceDirName":"api-reference/core","slug":"/api-reference/core/orbit-view","permalink":"/docs/api-reference/core/orbit-view","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/deck.gl/tree/master/website/../docs/api-reference/core/orbit-view.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"OrthographicView","permalink":"/docs/api-reference/core/orthographic-view"},"next":{"title":"Controller","permalink":"/docs/api-reference/core/controller"}}'),n=r(74848),t=r(28453);let s={},l="OrbitView",c={},a=[{value:"Constructor",id:"constructor",level:2},{value:"<code>orbitAxis</code> (string, optional)",id:"orbitaxis",level:4},{value:"<code>projectionMatrix</code> (number[16], optional)",id:"projectionmatrix",level:4},{value:"<code>fovy</code> (number, optional)",id:"fovy",level:4},{value:"<code>near</code> (number, optional)",id:"near",level:4},{value:"<code>far</code> (number, optional)",id:"far",level:4},{value:"<code>orthographic</code> (boolean)",id:"orthographic",level:4},{value:"View State",id:"view-state",level:2},{value:"Controller",id:"controller",level:2},{value:"Source",id:"source",level:2}];function d(e){let i={a:"a",code:"code",h1:"h1",h2:"h2",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.header,{children:(0,n.jsx)(i.h1,{id:"orbitview",children:"OrbitView"})}),"\n",(0,n.jsxs)(i.p,{children:["The ",(0,n.jsx)(i.code,{children:"OrbitView"})," class is a subclass of ",(0,n.jsx)(i.a,{href:"/docs/api-reference/core/view",children:"View"})," that creates a 3D camera that rotates around a target position. It is usually used for the examination of a 3D scene in non-geospatial use cases."]}),"\n",(0,n.jsxs)(i.p,{children:["It's recommended that you read the ",(0,n.jsx)(i.a,{href:"/docs/developer-guide/views",children:"Views and Projections guide"})," before using this class."]}),"\n",(0,n.jsx)("div",{style:{position:"relative",height:450}}),"\n",(0,n.jsx)("div",{style:{position:"absolute",transform:"translateY(-450px)",paddingLeft:"inherit",paddingRight:"inherit",left:0,right:0},children:(0,n.jsx)("iframe",{height:"450",style:{width:"100%"},scrolling:"no",title:"deck.gl OrbitView",src:"https://codepen.io/vis-gl/embed/gOLprOZ?height=450&theme-id=light&default-tab=result",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,n.jsxs)(i.p,{children:["See the Pen ",(0,n.jsx)("a",{href:"https://codepen.io/vis-gl/pen/gOLprOZ",children:"deck.gl OrbitView"})," by vis.gl\n(",(0,n.jsx)("a",{href:"https://codepen.io/vis-gl",children:"@vis-gl"}),") on ",(0,n.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})})}),"\n",(0,n.jsx)(i.h2,{id:"constructor",children:"Constructor"}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-js",children:"import {OrbitView} from '@deck.gl/core';\nconst view = new OrbitView({id, ...});\n"})}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.code,{children:"OrbitView"})," takes the same parameters as the ",(0,n.jsx)(i.a,{href:"/docs/api-reference/core/view",children:"View"})," superclass constructor, plus the following:"]}),"\n",(0,n.jsxs)(i.h4,{id:"orbitaxis",children:[(0,n.jsx)(i.code,{children:"orbitAxis"})," (string, optional)"]}),"\n",(0,n.jsxs)(i.p,{children:["Axis with 360 degrees rotating freedom, either ",(0,n.jsx)(i.code,{children:"'Y'"})," or ",(0,n.jsx)(i.code,{children:"'Z'"}),", default to ",(0,n.jsx)(i.code,{children:"'Z'"}),"."]}),"\n",(0,n.jsxs)(i.h4,{id:"projectionmatrix",children:[(0,n.jsx)(i.co

1de,{children:"projectionMatrix"})," (number[16], optional)"]}),"\n",(0,n.jsx)(i.p,{children:"Projection matrix."}),"\n",(0,n.jsxs)(i.p,{children:["If ",(0,n.jsx)(i.code,{children:"projectionMatrix"})," is not supplied, the ",(0,n.jsx)(i.code,{children:"View"})," class will build a projection matrix from the following parameters:"]}),"\n",(0,n.jsxs)(i.h4,{id:"fovy",children:[(0,n.jsx)(i.code,{children:"fovy"})," (number, optional)"]}),"\n",(0,n.jsxs)(i.p,{children:["Field of view covered by camera, in the perspective case. In degrees. Default ",(0,n.jsx)(i.code,{children:"50"}),"."]}),"\n",(0,n.jsxs)(i.h4,{id:"near",children:[(0,n.jsx)(i.code,{children:"near"})," (number, optional)"]}),"\n",(0,n.jsxs)(i.p,{children:["Distance of near clipping plane. Default ",(0,n.jsx)(i.code,{children:"0.1"}),"."]}),"\n",(0,n.jsxs)(i.h4,{id:"far",children:[(0,n.jsx)(i.code,{children:"far"})," (number, optional)"]}),"\n",(0,n.jsxs)(i.p,{children:["Distance of far clipping plane. Default ",(0,n.jsx)(i.code,{children:"1000"}),"."]}),"\n",(0,n.jsxs)(i.h4,{id:"orthographic",children:[(0,n.jsx)(i.code,{children:"orthographic"})," (boolean)"]}),"\n",(0,n.jsxs)(i.p,{children:["Whether to create an orthographic or perspective projection matrix. Default is ",(0,n.jsx)(i.code,{children:"false"})," (perspective projection)."]}),"\n",(0,n.jsx)(i.h2,{id:"view-state",children:"View State"}),"\n",(0,n.jsxs)(i.p,{children:["To render, ",(0,n.jsx)(i.code,{children:"OrbitView"})," needs to be used together with a ",(0,n.jsx)(i.code,{children:"viewState"})," with the following parameters:"]}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"target"})," (number[3], optional) - The world position at the center of the viewport. Default ",(0,n.jsx)(i.code,{children:"[0, 0, 0]"}),"."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"rotationOrbit"})," (number, optional) - Rotating angle around orbit axis. Default ",(0,n.jsx)(i.code,{children:"0"}),"."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"rotationX"})," (number, optional) - Rotating angle around X axis. Default ",(0,n.jsx)(i.code,{children:"0"}),"."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"zoom"})," (number, optional) - The zoom level of the viewport. ",(0,n.jsx)(i.code,{children:"zoom: 0"})," maps one unit distance to one pixel on screen, and increasing ",(0,n.jsx)(i.code,{children:"zoom"})," by ",(0,n.jsx)(i.code,{children:"1"})," scales the same object to twice as large. Default ",(0,n.jsx)(i.code,{children:"0"}),"."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"minZoom"})," (number, optional) - The min zoom level of the viewport. Default ",(0,n.jsx)(i.code,{children:"-Infinity"}),"."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"maxZoom"})," (number, optional) - The max zoom level of the viewport. Default ",(0,n.jsx)(i.code,{children:"Infinity"}),"."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"minRotationX"})," (number, optional) - The min rotating angle around X axis. Default ",(0,n.jsx)(i.code,{children:"-90"}),"."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"maxRotationX"})," (number, optional) - The max rotating angle around X axis. Default ",(0,n.jsx)(i.code,{children:"90"}),"."]}),"\n"]}),"\n",(0,n.jsx)(i.h2,{id:"controller",children:"Controller"}),"\n",(0,n.jsxs)(i.p,{children:["By default, ",(0,n.jsx)(i.code,{children:"OrbitView"})," uses the ",(0,n.jsx)(i.code,{children:"OrbitController"})," to handle interactivity. To enable the controller, use:"]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-js",children:"const view = new OrbitView({id: '3d-scene', controller: true});\n"})}),"\n",(0,n.jsxs)(i.p,{children:["Visit the ",(0,n.jsx)(i.a,{href:"/docs/api-reference/core/orbit-controller",children:"OrbitController"})," documentation for a full list of supported options."]}),"\n",(0,n.jsx)(i.h2,{id:"source",children:"Source"}),"\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"https://github.com/visgl/deck.gl/tree/9.4-release/modules/core/src/views/orbit-view.ts",children:"modules/core/src/views/orbit-view.ts"})})]})}function h(e={}){let{wrapper:i}={...(0,t.R)(),...e.components};return i?(0,n.jsx)(i,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},28453(e,i,r){r.d(i,{R:()=>s,x:()=>l});var o=r(96540);let n={},t=o.createContext(n);function s(e){let i=o.useContext(t);return o.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function l(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),o.createElement(t.Provider,{value:i},e.children)}}}]);
2//# sourceMappingURL=e2e55e2c.966a9818.js.map