https://deck.gl/assets/js/f6d782a6.38e8cced.js

1"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([["2668"],{50742(e,r,i){i.r(r),i.d(r,{metadata:()=>n,default:()=>h,frontMatter:()=>t,contentTitle:()=>l,toc:()=>d,assets:()=>c});var n=JSON.parse('{"id":"api-reference/core/first-person-view","title":"FirstPersonView","description":"The FirstPersonView class is a subclass of View that describes a camera placed at a provided location, looking towards the direction and orientation specified by viewState. The behavior is similar to that of a first-person game).","source":"@site/../docs/api-reference/core/first-person-view.md","sourceDirName":"api-reference/core","slug":"/api-reference/core/first-person-view","permalink":"/docs/api-reference/core/first-person-view","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/deck.gl/tree/master/website/../docs/api-reference/core/first-person-view.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"GlobeView (Experimental)","permalink":"/docs/api-reference/core/globe-view"},"next":{"title":"OrthographicView","permalink":"/docs/api-reference/core/orthographic-view"}}'),o=i(74848),s=i(28453);let t={},l="FirstPersonView",c={},d=[{value:"Constructor",id:"constructor",level:2},{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>focalDistance</code> (number, optional)",id:"focaldistance",level:4},{value:"View State",id:"view-state",level:2},{value:"Controller",id:"controller",level:2},{value:"Source",id:"source",level:2}];function a(e){let r={a:"a",code:"code",h1:"h1",h2:"h2",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.header,{children:(0,o.jsx)(r.h1,{id:"firstpersonview",children:"FirstPersonView"})}),"\n",(0,o.jsxs)(r.p,{children:["The ",(0,o.jsx)(r.code,{children:"FirstPersonView"})," class is a subclass of ",(0,o.jsx)(r.a,{href:"/docs/api-reference/core/viewport",children:"View"})," that describes a camera placed at a provided location, looking ",(0,o.jsx)(r.strong,{children:"towards"})," the direction and orientation specified by ",(0,o.jsx)(r.code,{children:"viewState"}),". The behavior is similar to that of a ",(0,o.jsx)(r.a,{href:"https://en.wikipedia.org/wiki/First-person_(gaming)",children:"first-person game"}),"."]}),"\n",(0,o.jsxs)(r.p,{children:["It's recommended that you read the ",(0,o.jsx)(r.a,{href:"/docs/developer-guide/views",children:"Views and Projections guide"})," before using this class."]}),"\n",(0,o.jsx)("div",{style:{position:"relative",height:450}}),"\n",(0,o.jsx)("div",{style:{position:"absolute",transform:"translateY(-450px)",paddingLeft:"inherit",paddingRight:"inherit",left:0,right:0},children:(0,o.jsx)("iframe",{height:"450",style:{width:"100%"},scrolling:"no",title:"deck.gl FirstPersonView",src:"https://codepen.io/vis-gl/embed/oNYXxNE?height=450&theme-id=light&default-tab=result",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,o.jsxs)(r.p,{children:["See the Pen ",(0,o.jsx)("a",{href:"https://codepen.io/vis-gl/pen/oNYXxNE",children:"deck.gl FirstPersonView"})," by vis.gl\n(",(0,o.jsx)("a",{href:"https://codepen.io/vis-gl",children:"@vis-gl"}),") on ",(0,o.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})})}),"\n",(0,o.jsx)(r.h2,{id:"constructor",children:"Constructor"}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-js",children:"import {FirstPersonView} from '@deck.gl/core';\nnew FirstPersonView({id, ...});\n"})}),"\n",(0,o.jsxs)(r.p,{children:[(0,o.jsx)(r.code,{children:"FirstPersonView"})," takes the same parameters as the ",(0,o.jsx)(r.a,{href:"/docs/api-reference/core/view",children:"View"})," superclass constructor, plus the following:"]}),"\n",(0,o.jsxs)(r.h4,{id:"projectionmatrix",children:[(0,o.jsx)(r.code,{children:"projectionMatrix"})," (number[16], optional)"]}),"\n",(0,o.jsx)(r.p,{children:"Projection matrix."}),"\n",(0,o.jsxs)(r.p,{children:["If ",(0,o.jsx)(r.code,{children:"projectionMatrix"})," is not supplied, the ",(0,o.jsx)(r.code,{children:"View"})," class will build a projection matrix from the following parameters:"]}),"\n",(0,o.jsxs)(r.h4,{id:"fovy",children:[(0,o.jsx)(r.code,{children:"fovy"})," (number, optional)"]}),"\n",(0,o.jsxs)(r.p,{children:["Field of view covered by camera, in the perspective case. In degrees. Default ",(0,o.jsx)(r.code,{children:"75"}),"."]}),"\n",(0,o.jsxs)(r.h4,{id:"near",children:[(0,o.jsx)(r.code,{children:"near"})," (number, optional)"]}),"\n",(0,o.jsxs)(r.p,{children:["Distance of near clipping plane. Default ",(0,o.jsx)(r.code,{children:"0.1"}),"."]}),"\n",(0,o.jsxs)(r.h4,{id:"far",children:[(0,o.jsx)(r.code,{children:"far"})," (number, optional)"]}),"\n",(0,o.jsxs)(r.p,{children:["Distance of far clipping plane. Default ",(0,o.jsx)(r.code,{children:"1000"}),"."]}),"\n",(0,o.jsxs)(r.h4,{id:"focaldistance",children:[(0,o.jsx)(r.code,{children:"focalDistance"})," (number, optional)"]}),"\n",(0,o.jsxs)(r.p,{children:["Modifier of viewport scale. Corresponds to the number of pixels per meter. Default ",(0,o.jsx)(r.code,{children:"1"}),"."]}),"\n",(0,o.jsx)(r.h2,{id:"view-state",children:"View State"}),"\n",(0,o.jsxs)(r.p,{children:["To render, a ",(0,o.jsx)(r.code,{children:"FirstPersonView"})," needs to be combined with a ",(0,o.jsx)(r.code,{children:"viewState"})," object with the following parameters:"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"longitude"})," (number, optional) - longitude of the camera"]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"latitude"})," (number, optional) - latitude of the camera"]}),"\n"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"position"})," (number[3], optional) - meter offsets of the camera from the lng-lat anchor point. Default ",(0,o.jsx)(r.code,{children:"[0, 0, 0]"}),"."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"bearing"})," (number, optional) - bearing angle in degrees. Default ",(0,o.jsx)(r.code,{children:"0"})," (north)."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"pitch"})," (number, optional) - pitch angle in degrees. Default ",(0,o.jsx)(r.code,{children:"0"})," (horizontal)."]}),"\n"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"maxPitch"})," (number, optional) - max pitch angle. Default ",(0,o.jsx)(r.code,{children:"90"})," (down)."]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.code,{children:"minPitch"})," (number, optional) - min pitch angle. Default ",(0,o.jsx)(r.code,{children:"-90"})," (up)."]}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"controller",children:"Controller"}),"\n",(0,o.jsxs)(r.p,{children:["By default, ",(0,o.jsx)(r.code,{children:"FirstPersonView"})," uses the ",(0,o.jsx)(r.code,{children:"FirstPersonController"})," to handle interactivity. To enable the controller, use:"]}),"\n",(0,o.jsx)(r.pre,{children:(0,o.jsx)(r.code,{className:"language-js",children:"const view = new FirstPersonView({id: 'pov', controller: true});\n"})}),"\n",(0,o.jsxs)(r.p,{children:["Visit the ",(0,o.jsx)(r.a,{href:"/docs/api-reference/core/first-person-controller",children:"FirstPersonController"})," documentation for a full list of supported options."]}),"\n",(0,o.jsx)(r.h2,{id:"source",children:"Source"}),"\n",(0,o.jsx)(r.p,{children:(0,o.jsx)(r.a,{href:"https://github.com/visgl/deck.gl/tree/9.4-release/modules/core/src/views/first-person-view.ts",children:"modules/core/src/views/first-person-view.ts"})})]})}function h(e={}){let{wrapper:r}={...(0,s.R)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},28453(e,r,i){i.d(r,{R:()=>t,x:()=>l});var n=i(96540);let o={},s=n.createContext(o);function t(e){let r=n.useContext(s);return n.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function l(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:t(e.components),n.createElement(s.Provider,{value:r},e.children)}}}]);
2//# sourceMappingURL=f6d782a6.38e8cced.js.map