https://www.reactylon.com/_next/static/chunks/pages/docs/cameras-056bb06095198124.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[56420],{31870:(i,s,e)=>{"use strict";e.d(s,{A:()=>h}),e(14232);var n=e(2491),r=e.n(n),t=e(37876),a=navigator.userAgent.includes("Safari")&&!navigator.userAgent.includes("Chrome");let h=function(i){var s=i.id,e=i.url;return(0,t.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"end"},children:[s?(0,t.jsx)("canvas",{id:s,"touch-action":"none",style:{touchAction:"none"}}):null,e?(0,t.jsx)("img",{style:{float:"right",marginTop:10,cursor:"pointer "},onClick:function(){a?r().fire({title:"Safari browser?",html:'<p style="font-size: 1rem">This documentation utilizes <b style="color: cornflowerblue">Stackblitz WebContainers</b> to provide interactive code examples. These containers are fully supported in Chrome-based browsers and are currently in beta on Safari. <br/><br/>We recommend using a Chrome-based browser like Chrome or Edge for the best experience. If you continue using Safari, you\'ll be able to view the code, but execution is not supported.</p><br>',icon:"warning",showConfirmButton:!1,footer:'<a style="text-decoration: underline" href="'.concat(e,'" target="_blank">Proceed anyway</a>')}):window.open(e,"_blank")},src:"https://developer.stackblitz.com/img/open_in_stackblitz.svg"}):null]})}},36488:(i,s,e)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/cameras",function(){return e(73477)}])},39238:(i,s,e)=>{"use strict";e.d(s,{A:()=>u});var n=e(45721),r=e(14232),t=e(58630),a=e(37876),h=e(28032),l=e(57746),d=e(78658);(0,d.kz)({universalCamera:[l.d,0],box:[h.an,0]});var c=e(68887),k=e(88321);(0,d.kz)({arcRotateCamera:[k.Lq,0],box:[h.an,0]});var o=e(59755),p=e(63296),x=e(30604),j=e(61542);(0,d.kz)({followCamera:[j.p,0],box:[h.an,0],standardMaterial:[x.F,0]});var D=e(73608);(0,d.kz)({deviceOrientationCamera:[D.g,0],box:[h.an,0]});var g=e(94292);(0,d.kz)({flyCamera:[g.l,0],box:[h.an,0]});var y={"universal-camera":{Component:function(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("universalCamera",{name:"universal",position:new t.Pq(0,0,-3),target:t.Pq.Zero(),onCreate:function(i){return i.attachControl()}}),(0,a.jsx)("box",{name:"box",options:{size:.5}})]})},onSceneReady:n.IA},"arc-rotate-camera":{Component:function(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("arcRotateCamera",{name:"arc-rotate",alpha:0,beta:c.S0.ToRadians(70),radius:2,target:new t.Pq(0,0,0),onCreate:function(i){return i.attachControl()}}),(0,a.jsx)("box",{name:"box",options:{size:.5}})]})},onSceneReady:n.IA},"follow-camera":{Component:function(){var i=(0,d.YJ)(),s=(0,r.useRef)(null);return(0,r.useEffect)(function(){var e=new o.l("boxes",i,{updatable:!1});e.addShape(s.current,400,{positionFunction:function(i){var s=i.idx;i.position=new t.Pq(-50+131*s%100,-50+173*s%100,-50+197*s%100)}}),e.buildMesh();var n=0,r=i.activeCamera;function a(){var i=s.current;i.position&&(n+=.01,i.position.y=20*Math.sin(n),i.position.z=10*Math.sin(2*n),r.rotationOffset=18*n%360)}return r.lockedTarget=s.current,i.registerBeforeRender(a),function(){return i.unregisterBeforeRender(a)}},[]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("followCamera",{name:"follow",position:new t.Pq(0,10,-10),radius:30,heightOffset:10,rotationOffset:10,cameraAcceleration:.005,maxCameraSpeed:10,onCreate:function(i){return i.attachControl()}}),(0,a.jsx)("box",{ref:s,name:"box",options:{size:1.25},children:(0,a.jsx)("standardMaterial",{name:"material",emissiveColor:p.v9.Red()})})]})},onSceneReady:n.IA},"device-orientation-camera":{Component:function(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("deviceOrientationCamera",{name:"device-orientation",position:new t.Pq(0,0,-1.5),target:new t.Pq(0,0,0),onCreate:function(i){return i.attachControl()}}),(0,a.jsx)("box",{name:"box",options:{size:.5}})]})},onSceneReady:n.IA},"fly-camera":{Component:function(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("flyCamera",{name:"fly",position:new t.Pq(0,0,-5),speed:.2,rollCorrect:10,angularSensibility:10,bankedTurn:!0,bankedTurnLimit:c.S0.ToRadians(90),bankedTurnMultiplier:1,onCreate:function(i){return i.attachControl()}}),(0,a.jsx)("box",{name:"box",options:{size:.5}})]})},onSceneReady:n.IA}};let u=(0,n.jy)({},y)},45721:(i,s,e)=>{"use strict";e.d(s,{$B:()=>m,H3:()=>F,IA:()=>y,bD:()=>u,jy:()=>g,sz:()=>C});var n=e(67251),r=e(23745),t=e(45794),a=e(42969),h=e(59860),l=e(68887),d=e(58630),c=e(71774),k=e(78658),o=e(37876);e(72091);var p=["id","Component"],x=["id","Component"];function j(i,s){var e=Object.keys(i);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(i);s&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(i,s).enumerable})),e.push.apply(e,n)}return e}function D(i){for(var s=1;s<arguments.length;s++){var e=null!=arguments[s]?arguments[s]:{};

1s%2?j(Object(e),!0).forEach(function(s){(0,a.A)(i,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(e)):j(Object(e)).forEach(function(s){Object.defineProperty(i,s,Object.getOwnPropertyDescriptor(e,s))})}return i}function g(i,s){var e=Object.entries(s).map(function(i){var s=(0,t.A)(i,2);return D({id:s[0]},s[1])});return{renderFeature:function(){return(0,o.jsx)(c.A,D(D({},i),{},{children:e.map(function(i){var s=i.id,e=i.Component,n=(0,h.A)(i,p);return(0,o.jsx)(k.Z5,D(D({},n),{},{children:(0,o.jsx)(e,{})}),s)})}))},renderFeatureForTest:function(e){var n,r,t,a,l=s[e];if(!l)throw Error("Unknown sceneId: ".concat(e));return r=(n=D({id:e},l)).id,t=n.Component,a=(0,h.A)(n,x),(0,o.jsx)(c.A,D(D({},i),{},{children:(0,o.jsx)(k.Z5,D(D({},a),{},{children:(0,o.jsx)(t,{})}),r)}))}}}var y=function(i){i.createDefaultLight()},u=function(i,s,e,n){i.createDefaultCamera(!0,void 0,!0);var r=i.activeCamera;s&&(r.radius=s),e&&(r.alpha=l.S0.ToRadians(e)),n&&(r.beta=l.S0.ToRadians(n))},C=function(i,s,e,n){i.createDefaultCameraOrLight(!0,void 0,!0);var r=i.activeCamera;s&&(r.radius=s),e&&(r.alpha=l.S0.ToRadians(e)),n&&(r.beta=l.S0.ToRadians(n))},F=(0,r.A)(function i(){(0,n.A)(this,i)},null,[{key:"getFaceUVs",value:function(i,s){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return Array(6).fill(null).map(function(n,r){return new d.IU(r/i,(0+e)/s,(r+1)/i,(1+e)/s)})}},{key:"getFaceUVsT",value:function(){return[new d.IU(.75,.333,1,.666),new d.IU(.25,.333,.5,.666),new d.IU(.5,.333,.75,.666),new d.IU(0,.333,.25,.666),new d.IU(.25,.666,.5,1),new d.IU(.25,0,.5,.333)]}}]);function m(){return window.innerWidth<=768}},68888:(i,s,e)=>{"use strict";e.d(s,{WA:()=>h});var n=e(18118),r=e(96950),t=e(15944);function a(i){let s=[],e=[],n=[],a=[],h=i.radius||.5,l=i.tessellation||64,d=i.arc&&(i.arc<=0||i.arc>1)?1:i.arc||1,c=0===i.sideOrientation?0:i.sideOrientation||r.P.DEFAULTSIDE;s.push(0,0,0),a.push(.5,.5);let k=2*Math.PI*d,o=1===d?k/l:k/(l-1),p=0;for(let i=0;i<l;i++){let i=Math.cos(p),e=Math.sin(p),n=(i+1)/2,r=(1-e)/2;s.push(h*i,h*e,0),a.push(n,t.rX?1-r:r),p+=o}1===d&&(s.push(s[3],s[4],s[5]),a.push(a[2],t.rX?1-a[3]:a[3]));let x=s.length/3;for(let i=1;i<x-1;i++)e.push(i+1,0,i);r.P.ComputeNormals(s,e,n),r.P._ComputeSides(c,s,e,n,a,i.frontUVs,i.backUVs);let j=new r.P;return j.indices=e,j.positions=s,j.normals=n,j.uvs=a,j}function h(i,s={},e=null){let r=new n.e(i,e);return s.sideOrientation=n.e._GetDefaultSideOrientation(s.sideOrientation),r._originalBuilderSideOrientation=s.sideOrientation,a(s).applyToMesh(r,s.updatable),r}r.P.CreateDisc=a,n.e.CreateDisc=(i,s,e,n=null,r,t)=>h(i,{radius:s,tessellation:e,sideOrientation:t,updatable:r},n)},71774:(i,s,e)=>{"use strict";e.d(s,{A:()=>y});var n=e(42969),r=e(63857),t=e(43081),a=e.n(t),h=e(14232),l=e(335),d=e(7536),c=e(13767),k=e(79279),o=e(71002),p=e(37876);function x(i,s){var e=Object.keys(i);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(i);s&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(i,s).enumerable})),e.push.apply(e,n)}return e}function j(i){for(var s=1;s<arguments.length;s++){var e=null!=arguments[s]?arguments[s]:{};s%2?x(Object(e),!0).forEach(function(s){(0,n.A)(i,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(e)):x(Object(e)).forEac

1h(function(s){Object.defineProperty(i,s,Object.getOwnPropertyDescriptor(e,s))})}return i}e(72091),e(21576),(0,d.h)();var D=function(){var i=(0,r.A)(a().mark(function i(s){return a().wrap(function(i){for(;;)switch(i.prev=i.next){case 0:s.createDefaultCameraOrLight(!0,void 0,!0);case 1:case"end":return i.stop()}},i)}));return function(s){return i.apply(this,arguments)}}();function g(){this.click()}let y=function(i){var s=i.children,e=i.canvasId,n=i.xrDefaultExperienceOptions,t=i.isPhysics,d=i.isAudio,x=i.forceWebGL,y=(0,h.useState)(),u=y[0],C=y[1],F=(0,h.useRef)(null);(0,h.useEffect)(function(){var i=!1,s=[];return(0,r.A)(a().mark(function e(){return a().wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(!t){e.next=4;break}return e.next=3,(0,o.A)();case 3:F.current=e.sent;case 4:if(!i){e.next=6;break}return e.abrupt("return");case 6:(s=Array.from(document.getElementsByTagName("canvas"))).forEach(function(i){i.addEventListener("pointerenter",g)}),C(s);case 9:case"end":return e.stop()}},e)}))(),function(){i=!0,s.forEach(function(i){i.removeEventListener("pointerenter",g)})}},[]);var m=function(){var i=(null==u?void 0:u.length)>1,o=h.Children.count(s)>1,g=window.__E2E__;return(0,p.jsx)(l.N,{forceWebGL:g?window.forceWebGL:x||!!n,canvasId:e,isMultipleCanvas:i,loadingScreenOptions:{component:k.A},engineOptions:{audioEngine:d},manualRenderLoop:g?function(i,s){var e;window.renderFrames=(e=(0,r.A)(a().mark(function e(n){var r;return a().wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return r=s.scenes.map(function(i){return new Promise(function(s){i.useConstantAnimationDeltaTime=!0,i.deltaT

1ime=16.66,i.executeWhenReady(s)})}),e.next=3,Promise.all(r);case 3:return s.resize(),e.abrupt("return",new Promise(function(e){var r=0,t=s.onEndFrameObservable.add(function(){++r>=n&&(s.onEndFrameObservable.remove(t),s.stopRenderLoop(i),e({renderedFrames:r,engineName:s.name}))});s.runRenderLoop(i)}));case 5:case"end":return e.stop()}},e)})),function(i){return e.apply(this,arguments)})}:void 0,children:h.Children.map(s,function(i,s){return h.cloneElement(i,{xrDefaultExperienceOptions:n?j(j({},n),{},{handSupportOptions:j(j({},n.handSupportOptions),{},{jointMeshes:{invisible:!0}})}):void 0,canvas:o?u[s]:void 0,onSceneReady:i.props.onSceneReady||D,physicsOptions:t?{plugin:new c.P(!0,F.current)}:void 0})})})};return u?n?(0,p.jsx)("div",{style:{position:"relative"},children:m()}):m():null}},73477:(i,s,e)=>{"use strict";e.r(s),e.d(s,{default:()=>x,useTOC:()=>p});var n=e(42969),r=e(71807),t=e(14798),a=e(34256),h=e(31870),l=e(39238),d=e(30087),c=e(37876);function k(i,s){var e=Object.keys(i);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(i);s&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(i,s).enumerable})),e.push.apply(e,n)}return e}function o(i){for(var s=1;s<arguments.length;s++){var e=null!=arguments[s]?arguments[s]:{};s%2?k(Object(e),!0).forEach(function(s){(0,n.A)(i,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(e)):k(Object(e)).forEac

1h(function(s){Object.defineProperty(i,s,Object.getOwnPropertyDescriptor(e,s))})}return i}function p(i){return[{value:"Universal Camera",id:"universal-camera",depth:2},{value:"Arc Rotate Camera",id:"arc-rotate-camera",depth:2},{value:"Follow Camera",id:"follow-camera",depth:2},{value:"Device Orientation Camera",id:"device-orientation-camera",depth:2},{value:"Fly Camera",id:"fly-camera",depth:2},{value:"Learn More",id:"learn-more",depth:3}]}let x=(0,r.e)(function(i){var s=i.toc,e=void 0===s?p(i):s,n=o(o({a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",span:"span",ul:"ul"},(0,a.R)()),i.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(n.h1,{children:"Cameras"}),"\n",(0,c.jsxs)(n.p,{children:["The ",(0,c.jsx)("b",{children:"cameras"})," are virtual viewpoints through which a scene is observed and rendered. They defines what is visible on the screen and influences how the viewer perceives the 3D environment. In Babylon.js, cameras are crucial for navigation and interaction within the scene.\nCore aspects of a camera:"]}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsx)(n.li,{children:"Position and orientation: the camera has a position in the 3D space and a direction in which it is looking. This defines the viewpoint from which the scene is rendered."}),"\n",(0,c.jsx)(n.li,{children:"Field of View (FOV): the camera’s field of view determines the extent of the observable world that is seen at any given moment. A wider FOV can create a more immersive experience but may also cause distortion."}),"\n",(0,c.jsx)(n.li,{children:"Projection: cameras can use different types of projections, such as perspective (which mimics the way the human eye sees) or orthographic (which maintains the object’s size regardless of distance)."}),"\n",(0,c.jsx)(n.li,{children:"Controls: cameras can be equipped with various controls, allowing users to navigate the scene using mouse or keyboard input. Common controls include zooming, panning, and rotating."}),"\n",(0,c.jsx)(n.li,{children:"Animation: cameras can be animated to create dynamic scenes, providing smooth transitions between different viewpoints."}),"\n"]}),"\n",(0,c.jsx)(n.p,{children:"There are several types of camera. Here are the main ones:"}),"\n",(0,c.jsx)(n.h2,{id:e[0].id,children:e[0].value}),"\n",(0,c.jsxs)(n.p,{children:["A combination of the ",(0,c.jsx)(n.code,{children:"FreeCamera"})," and ",(0,c.jsx)(n.code,{children:"ArcRotateCamera"}),", offering more control options for navigating the scene."]}),"\n",(0,c.jsx)(n.pre,{icon:d.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,c.jsxs)(n.code,{children:[(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"universalCamera"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    name"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:'"universal"'})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    position"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"-"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"8"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9

1CDCFE","--shiki-light":"#E50000"},children:"    target"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"Vector3"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"Zero"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    onCreate"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" =>"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:" camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"attachControl"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsx)(n.span,{children:(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})})]})}),"\n",(0,c.jsx)(h.A,{id:"universal-camera",url:"https://stackblitz.com/edit/reactylon-universal-camera?file=src%2FContent.tsx"}),"\n",(0,c.jsx)(n.h2,{id:e[1].id,children:e[1].value}),"\n",(0,c.jsx)(n.p,{children:"Allows for orbiting around a target point. It’s ideal for showcasing 3D models and environments."}),"\n",(0,c.jsx)(n.pre,{icon:d.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,c.jsxs)(n.code,{children:[(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"arcRotateCamera"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    name"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:'"arc-rotate"'})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    alpha"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    beta"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"Tools"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"ToRadians"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"70"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9

1CDCFE","--shiki-light":"#E50000"},children:"    radius"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"2"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    target"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    onCreate"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" =>"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:" camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"attachControl"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsx)(n.span,{children:(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"/>"})})]})}),"\n",(0,c.jsx)(h.A,{id:"arc-rotate-camera",url:"https://stackblitz.com/edit/reactylon-arc-rotate-camera?file=src%2FContent.tsx"}),"\n",(0,c.jsx)(n.h2,{id:e[2].id,children:e[2].value}),"\n",(0,c.jsx)(n.p,{children:"Designed to follow a target object smoothly, often used in games to keep the player character in view."}),"\n",(0,c.jsx)(n.pre,{icon:d.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,c.jsxs)(n.code,{children:[(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"followCamera"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    name"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'follow'"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    position"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"-"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9

1CDCFE","--shiki-light":"#E50000"},children:"    radius"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"30"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    heightOffset"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    rotationOffset"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    cameraAcceleration"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0.005"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    maxCameraSpeed"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    onCreate"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" =>"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:" camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"attachControl"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsx)(n.span,{children:(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"/>"})})]})}),"\n",(0,c.jsx)(h.A,{id:"follow-camera",url:"https://stackblitz.com/edit/reactylon-follow-camera?file=src%2FContent.tsx"}),"\n",(0,c.jsx)(n.h2,{id:e[3].id,children:e[3].value}),"\n",(0,c.jsx)(n.p,{children:"It leverages the device’s sensors (typically on mobile devices) to control the camera’s orientation based on the physical orientation of the device."}),"\n",(0,c.jsx)(n.pre,{icon:d.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,c.jsxs)(n.code,{children:[(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"deviceOrientationCamera"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9

1CDCFE","--shiki-light":"#E50000"},children:"    name"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'device-orientation'"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:" "})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    position"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"-"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1.5"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:" "})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    target"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    onCreate"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" =>"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:" camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"attachControl"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsx)(n.span,{children:(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"/>"})})]})}),"\n",(0,c.jsx)(h.A,{id:"device-orientation-camera",url:"https://stackblitz.com/edit/reactylon-device-orientation-camera?file=src%2FContent.tsx"}),"\n",(0,c.jsx)(n.h2,{id:e[4].id,children:e[4].value}),"\n",(0,c.jsxs)(n.p,{children:["Designed for flight simulations or open-environment navigation where users can freely move and rotate the camera with 

1no constraints. The ",(0,c.jsx)(n.code,{children:"FlyCamera"})," allows movement through the following controls by default:"]}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsxs)(n.li,{children:[(0,c.jsx)(n.code,{children:"W/S"})," (or ",(0,c.jsx)(n.code,{children:"Up/Down Arrow"}),"): move forward and backward."]}),"\n",(0,c.jsxs)(n.li,{children:[(0,c.jsx)(n.code,{children:"A/D"})," (or ",(0,c.jsx)(n.code,{children:"Left/Right Arrow"}),"): strafe left and right."]}),"\n",(0,c.jsxs)(n.li,{children:[(0,c.jsx)(n.code,{children:"Q/E"}),": move up and down."]}),"\n",(0,c.jsx)(n.li,{children:"Mouse movement: controls the camera’s yaw (left/right rotation) and pitch (up/down rotation)."}),"\n"]}),"\n",(0,c.jsx)(n.pre,{icon:d.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,c.jsxs)(n.code,{children:[(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"flyCamera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'fly'"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:" "})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    position"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"-"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"5"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:" "})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    rollCorrect"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:" "})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    speed"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0.2"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    bankedTurn"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:" "})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9

1CDCFE","--shiki-light":"#E50000"},children:"    bankedTurnLimit"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"Tools"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"ToRadians"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"90"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:" "})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    bankedTurnMultiplier"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsxs)(n.span,{children:[(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:"    onCreate"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" =>"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:" camera"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"attachControl"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,c.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"})]}),"\n",(0,c.jsx)(n.span,{children:(0,c.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"/>"})})]})}),"\n",(0,c.jsx)(h.A,{id:"fly-camera",url:"https://stackblitz.com/edit/reactylon-fly-camera?file=src%2FContent.tsx"}),"\n",(0,c.jsx)("br",{}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h3,{id:e[5].id,children:e[5].value}),"\n",(0,c.jsxs)(n.p,{children:["For other cameras, properties and customizations, please refer to Babylon.js documentation: ",(0,c.jsx)(n.a,{href:"https://doc.babylonjs.com/features/featuresDeepDive/cameras/camera_introduction",children:"https://doc.babylonjs.com/features/featuresDeepDive/cameras/camera_introduction"}),"."]}),"\n",l.A.renderFeature()]})},"/docs/cameras",{filePath:"pages/docs/cameras.mdx",pageMap:t.O,frontMatter:{description:"Cameras define what’s visible in a 3D scene and are crucial for navigation and interaction, offering different views and perspectives."},title:"Cameras"},"undefined"==typeof RemoteContent?p:RemoteContent.useTOC)},79279:(i,s,e)=>{"use strict";e.d(s,{A:()=>r}),e(14232);var n=e(37876);let r=function(){return(0,n.jsxs)("div",{className:"loader",style:{display:"flex",width:"100%",height:"100%",backgroundColor:"black",position:"relative"},children:[(0,n.jsx)("div",{style:{display:"flex",width:"100%",justifyContent:"center",alignItems:"center"},children:(0,n.jsx)("img",{src:"/logo.svg",width:190})}),(0,n.jsx)("div",{style:{width:300,gridArea:1,top:"50%",left:"50%",transform:"translate(-50%, -50%)",position:"absolute"},children:(0,n.jsx)("img",{src:"/spark.svg",style:{animation:"0.75s linear 0s infinite normal none running spin",transformOrigin:"50% 50%"}})})]})}}},i=>{i.O(0,[46593,23891,28770,60683,202,50351,60390,71807,32900,75229,22160,19933,25277,46506,74341,66931,14798,90636,38792],()=>i(i.s=36488)),_N_E=i.O()}]);