[{"data":1,"prerenderedAt":1876},["ShallowReactive",2],{"navigation":3,"/api/controls/camera-controls":470,"/api/controls/camera-controls-surround":1871},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,80,114,156,190,284,310,344,394,436],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":53,"path":54,"stem":55},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":57,"path":58,"stem":59},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":61,"path":62,"stem":63},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":65,"path":66,"stem":67},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":69,"path":70,"stem":71},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":73,"path":74,"stem":75},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":77,"path":78,"stem":79},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":81,"path":82,"stem":83,"children":84},"Controls","/api/controls","2.api/2.controls/index",[85,86,90,94,98,102,106,110],{"title":81,"path":82,"stem":83},{"title":87,"path":88,"stem":89},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":91,"path":92,"stem":93},"Drag Controls","/api/controls/drag-controls","2.api/2.controls/drag-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":437,"path":438,"stem":439,"children":440},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[441,442,446,450,454,458,462,466],{"title":437,"path":438,"stem":439},{"title":443,"path":444,"stem":445},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":447,"path":448,"stem":449},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":451,"path":452,"stem":453},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":455,"path":456,"stem":457},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":459,"path":460,"stem":461},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":463,"path":464,"stem":465},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":467,"path":468,"stem":469},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":471,"title":87,"body":472,"description":1865,"extension":1866,"links":1867,"meta":1868,"navigation":1378,"path":88,"seo":1869,"stem":89,"__hash__":1870},"docs/2.api/2.controls/camera-controls.md",{"type":473,"value":474,"toc":1856},"minimark",[475,481,496,505,509,800,806,810,813,1281,1284,1313,1484,1488,1616,1626,1629,1752,1756,1812,1852],[476,477,478],"scene-controls-wrapper",{},[479,480],"controls-camera-controls",{},[482,483,484,491,492,495],"p",{},[485,486,490],"a",{"href":487,"rel":488},"https://github.com/yomotsu/camera-controls",[489],"nofollow","CameraControls"," is a camera controller similar to ",[485,493,494],{"href":104},"OrbitControls"," yet supports smooth transitions and more features.",[482,497,498,499,504],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[485,500,503],{"href":501,"rel":502},"https://www.npmjs.com/package/camera-controls",[489],"npm",".",[506,507,15],"h2",{"id":508},"usage",[510,511,518],"pre",{"className":512,"code":513,"highlights":514,"language":516,"meta":517,"style":517},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { CameraControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CCameraControls />\n    \u003CBox :scale=\"2\">\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/Box>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[515],7,"vue","",[519,520,521,541,571,581,591,616,659,669,692,715,725,735,771,781,791],"code",{"__ignoreMap":517},[522,523,526,530,534,538],"span",{"class":524,"line":525},"line",1,[522,527,529],{"class":528},"sMK4o","\u003C",[522,531,533],{"class":532},"swJcz","script",[522,535,537],{"class":536},"spNyl"," setup",[522,539,540],{"class":528},">\n",[522,542,544,548,551,555,558,561,564,568],{"class":524,"line":543},2,[522,545,547],{"class":546},"s7zQu","import",[522,549,550],{"class":528}," {",[522,552,554],{"class":553},"sTEyZ"," CameraControls",[522,556,557],{"class":528}," }",[522,559,560],{"class":546}," from",[522,562,563],{"class":528}," \"",[522,565,567],{"class":566},"sfazB","@tresjs/cientos",[522,569,570],{"class":528},"\"\n",[522,572,574,577,579],{"class":524,"line":573},3,[522,575,576],{"class":528},"\u003C/",[522,578,533],{"class":532},[522,580,540],{"class":528},[522,582,584,586,589],{"class":524,"line":583},4,[522,585,529],{"class":528},[522,587,588],{"class":532},"template",[522,590,540],{"class":528},[522,592,594,597,600,603,606,609,612,614],{"class":524,"line":593},5,[522,595,596],{"class":528},"  \u003C",[522,598,599],{"class":532},"TresCanvas",[522,601,602],{"class":536}," clear-color",[522,604,605],{"class":528},"=",[522,607,608],{"class":528},"\"",[522,610,611],{"class":566},"#82DBC5",[522,613,608],{"class":528},[522,615,540],{"class":528},[522,617,619,622,625,628,631,633,635,638,642,645,647,649,651,654,656],{"class":524,"line":618},6,[522,620,621],{"class":528},"    \u003C",[522,623,624],{"class":532},"TresPerspectiveCamera",[522,626,627],{"class":528}," :",[522,629,630],{"class":536},"position",[522,632,605],{"class":528},[522,634,608],{"class":528},[522,636,637],{"class":528},"[",[522,639,641],{"class":640},"sbssI","3",[522,643,644],{"class":528},", ",[522,646,641],{"class":640},[522,648,644],{"class":528},[522,650,641],{"class":640},[522,652,653],{"class":528},"]",[522,655,608],{"class":528},[522,657,658],{"class":528}," />\n",[522,660,663,665,667],{"class":661,"line":515},[524,662],"highlight",[522,664,621],{"class":528},[522,666,490],{"class":532},[522,668,658],{"class":528},[522,670,672,674,676,678,681,683,685,688,690],{"class":524,"line":671},8,[522,673,621],{"class":528},[522,675,197],{"class":532},[522,677,627],{"class":528},[522,679,680],{"class":536},"scale",[522,682,605],{"class":528},[522,684,608],{"class":528},[522,686,687],{"class":640},"2",[522,689,608],{"class":528},[522,691,540],{"class":528},[522,693,695,698,701,704,706,708,711,713],{"class":524,"line":694},9,[522,696,697],{"class":528},"      \u003C",[522,699,700],{"class":532},"TresMeshToonMaterial",[522,702,703],{"class":536}," color",[522,705,605],{"class":528},[522,707,608],{"class":528},[522,709,710],{"class":566},"orange",[522,712,608],{"class":528},[522,714,658],{"class":528},[522,716,718,721,723],{"class":524,"line":717},10,[522,719,720],{"class":528},"    \u003C/",[522,722,197],{"class":532},[522,724,540],{"class":528},[522,726,728,730,733],{"class":524,"line":727},11,[522,729,621],{"class":528},[522,731,732],{"class":532},"TresAmbientLight",[522,734,658],{"class":528},[522,736,738,740,743,745,747,749,751,753,756,758,760,762,765,767,769],{"class":524,"line":737},12,[522,739,621],{"class":528},[522,741,742],{"class":532},"TresDirectionalLight",[522,744,627],{"class":528},[522,746,630],{"class":536},[522,748,605],{"class":528},[522,750,608],{"class":528},[522,752,637],{"class":528},[522,754,755],{"class":640},"0",[522,757,644],{"class":528},[522,759,687],{"class":640},[522,761,644],{"class":528},[522,763,764],{"class":640},"4",[522,766,653],{"class":528},[522,768,608],{"class":528},[522,770,658],{"class":528},[522,772,774,776,779],{"class":524,"line":773},13,[522,775,621],{"class":528},[522,777,778],{"class":532},"TresGridHelper",[522,780,658],{"class":528},[522,782,784,787,789],{"class":524,"line":783},14,[522,785,786],{"class":528},"  \u003C/",[522,788,599],{"class":532},[522,790,540],{"class":528},[522,792,794,796,798],{"class":524,"line":793},15,[522,795,576],{"class":528},[522,797,588],{"class":532},[522,799,540],{"class":528},[801,802,803],"prose-warning",{},[482,804,805],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[506,807,809],{"id":808},"props","Props",[482,811,812],{},"Certainly! Here's the properties of the object in raw markdown table format:",[814,815,816,833],"table",{},[817,818,819],"thead",{},[820,821,822,827,830],"tr",{},[823,824,826],"th",{"align":825},"left","Prop",[823,828,829],{"align":825},"Description",[823,831,832],{},"Default",[834,835,836,853,868,882,896,911,926,941,956,971,985,1002,1017,1031,1046,1061,1075,1090,1104,1118,1134,1149,1165,1179,1197,1212,1230,1245,1265],"tbody",{},[820,837,838,845,848],{},[839,840,841],"td",{"align":825},[842,843,844],"strong",{},"makeDefault",[839,846,847],{"align":825},"Whether to make this the default controls.",[839,849,850],{},[519,851,852],{},"false",[820,854,855,860,863],{},[839,856,857],{"align":825},[842,858,859],{},"camera",[839,861,862],{"align":825},"The camera to control.",[839,864,865],{},[519,866,867],{},"undefined",[820,869,870,875,878],{},[839,871,872],{"align":825},[842,873,874],{},"domElement",[839,876,877],{"align":825},"The DOM element to listen to.",[839,879,880],{},[519,881,867],{},[820,883,884,889,892],{},[839,885,886],{"align":825},[842,887,888],{},"minPolarAngle",[839,890,891],{"align":825},"Minimum vertical angle in radians.",[839,893,894],{},[519,895,755],{},[820,897,898,903,906],{},[839,899,900],{"align":825},[842,901,902],{},"maxPolarAngle",[839,904,905],{"align":825},"Maximum vertical angle in radians.",[839,907,908],{},[519,909,910],{},"Math.PI",[820,912,913,918,921],{},[839,914,915],{"align":825},[842,916,917],{},"minAzimuthAngle",[839,919,920],{"align":825},"Minimum horizontal angle in radians.",[839,922,923],{},[519,924,925],{},"-Infinity",[820,927,928,933,936],{},[839,929,930],{"align":825},[842,931,932],{},"maxAzimuthAngle",[839,934,935],{"align":825},"Maximum horizontal angle in radians.",[839,937,938],{},[519,939,940],{},"Infinity",[820,942,943,948,951],{},[839,944,945],{"align":825},[842,946,947],{},"distance",[839,949,950],{"align":825},"Current distance.",[839,952,953],{},[519,954,955],{},"camera.position.z",[820,957,958,963,966],{},[839,959,960],{"align":825},[842,961,962],{},"minDistance",[839,964,965],{"align":825},"Minimum distance for dolly. PerspectiveCamera only.",[839,967,968],{},[519,969,970],{},"Number.EPSILON",[820,972,973,978,981],{},[839,974,975],{"align":825},[842,976,977],{},"maxDistance",[839,979,980],{"align":825},"Maximum distance for dolly. PerspectiveCamera only.",[839,982,983],{},[519,984,940],{},[820,986,987,992,998],{},[839,988,989],{"align":825},[842,990,991],{},"infinityDolly",[839,993,994,997],{"align":825},[519,995,996],{},"true"," to enable Infinity Dolly for wheel and pinch.",[839,999,1000],{},[519,1001,852],{},[820,1003,1004,1009,1012],{},[839,1005,1006],{"align":825},[842,1007,1008],{},"minZoom",[839,1010,1011],{"align":825},"Minimum camera zoom.",[839,1013,1014],{},[519,1015,1016],{},"0.01",[820,1018,1019,1024,1027],{},[839,1020,1021],{"align":825},[842,1022,1023],{},"maxZoom",[839,1025,1026],{"align":825},"Maximum camera zoom.",[839,1028,1029],{},[519,1030,940],{},[820,1032,1033,1038,1041],{},[839,1034,1035],{"align":825},[842,1036,1037],{},"smoothTime",[839,1039,1040],{"align":825},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[839,1042,1043],{},[519,1044,1045],{},"0.25",[820,1047,1048,1053,1056],{},[839,1049,1050],{"align":825},[842,1051,1052],{},"draggingSmoothTime",[839,1054,1055],{"align":825},"The smoothTime while dragging.",[839,1057,1058],{},[519,1059,1060],{},"0.125",[820,1062,1063,1068,1071],{},[839,1064,1065],{"align":825},[842,1066,1067],{},"maxSpeed",[839,1069,1070],{"align":825},"Max transition speed in units per second.",[839,1072,1073],{},[519,1074,940],{},[820,1076,1077,1082,1085],{},[839,1078,1079],{"align":825},[842,1080,1081],{},"azimuthRotateSpeed",[839,1083,1084],{"align":825},"Speed of azimuth (horizontal) rotation.",[839,1086,1087],{},[519,1088,1089],{},"1.0",[820,1091,1092,1097,1100],{},[839,1093,1094],{"align":825},[842,1095,1096],{},"polarRotateSpeed",[839,1098,1099],{"align":825},"Speed of polar (vertical) rotation.",[839,1101,1102],{},[519,1103,1089],{},[820,1105,1106,1111,1114],{},[839,1107,1108],{"align":825},[842,1109,1110],{},"dollySpeed",[839,1112,1113],{"align":825},"Speed of mouse-wheel dollying.",[839,1115,1116],{},[519,1117,1089],{},[820,1119,1120,1125,1130],{},[839,1121,1122],{"align":825},[842,1123,1124],{},"dollyDragInverted",[839,1126,1127,1129],{"align":825},[519,1128,996],{}," to invert direction when dollying or zooming via drag.",[839,1131,1132],{},[519,1133,852],{},[820,1135,1136,1141,1144],{},[839,1137,1138],{"align":825},[842,1139,1140],{},"truckSpeed",[839,1142,1143],{"align":825},"Speed of drag for truck and pedestal.",[839,1145,1146],{},[519,1147,1148],{},"2.0",[820,1150,1151,1156,1161],{},[839,1152,1153],{"align":825},[842,1154,1155],{},"dollyToCursor",[839,1157,1158,1160],{"align":825},[519,1159,996],{}," to enable Dolly-in to the mouse cursor coords.",[839,1162,1163],{},[519,1164,852],{},[820,1166,1167,1172,1175],{},[839,1168,1169],{"align":825},[842,1170,1171],{},"dragToOffset",[839,1173,1174],{"align":825},"Whether to drag to offset.",[839,1176,1177],{},[519,1178,852],{},[820,1180,1181,1186,1193],{},[839,1182,1183],{"align":825},[842,1184,1185],{},"verticalDragToForward",[839,1187,1188,1189,1192],{"align":825},"The same as ",[519,1190,1191],{},".screenSpacePanning"," in Three.js's OrbitControls.",[839,1194,1195],{},[519,1196,852],{},[820,1198,1199,1204,1207],{},[839,1200,1201],{"align":825},[842,1202,1203],{},"boundaryFriction",[839,1205,1206],{"align":825},"Friction ratio of the boundary.",[839,1208,1209],{},[519,1210,1211],{},"0.0",[820,1213,1214,1219,1226],{},[839,1215,1216],{"align":825},[842,1217,1218],{},"restThreshold",[839,1220,1221,1222,1225],{"align":825},"Controls how soon the ",[519,1223,1224],{},"rest"," event fires as the camera slows.",[839,1227,1228],{},[519,1229,1016],{},[820,1231,1232,1237,1240],{},[839,1233,1234],{"align":825},[842,1235,1236],{},"colliderMeshes",[839,1238,1239],{"align":825},"An array of Meshes to collide with the camera. Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners.",[839,1241,1242],{},[519,1243,1244],{},"[]",[820,1246,1247,1252,1255],{},[839,1248,1249],{"align":825},[842,1250,1251],{},"mouseButtons",[839,1253,1254],{"align":825},"Configuration of actions on mouse input.",[839,1256,1257,1258,1264],{},"See ",[485,1259,1261],{"href":1260},"#user-input-config",[519,1262,1263],{},"User input config"," for details",[820,1266,1267,1272,1275],{},[839,1268,1269],{"align":825},[842,1270,1271],{},"touches",[839,1273,1274],{"align":825},"Configuration of actions on touch.",[839,1276,1257,1277,1264],{},[485,1278,1279],{"href":1260},[519,1280,1263],{},[506,1282,1263],{"id":1283},"user-input-config",[482,1285,1286,1287,1289,1290,1292,1293,1301,1302,1304,1305,1308,1309,1312],{},"You can easily override the default user input config by defining ",[519,1288,1251],{}," and/or ",[519,1291,1271],{}," props that correspond to ",[485,1294,1297,1300],{"href":1295,"rel":1296},"https://github.com/yomotsu/camera-controls?#user-input-config",[489],[519,1298,1299],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[519,1303,490],{}," class as ",[519,1306,1307],{},"BaseCameraControls"," which gives you access to the ",[519,1310,1311],{},"ACTION"," enum.",[510,1314,1316],{"className":512,"code":1315,"language":516,"meta":517,"style":517},"\u003Cscript lang=\"ts\" setup>\nimport { BaseCameraControls, CameraControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  ...\n  \u003CCameraControls\n    :mouse-buttons=\"{ left: BaseCameraControls.ACTION.DOLLY }\"\n    :touches=\"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }\"\n  />\n  ...\n\u003C/template>\n",[519,1317,1318,1340,1366,1374,1380,1388,1393,1400,1435,1467,1472,1476],{"__ignoreMap":517},[522,1319,1320,1322,1324,1327,1329,1331,1334,1336,1338],{"class":524,"line":525},[522,1321,529],{"class":528},[522,1323,533],{"class":532},[522,1325,1326],{"class":536}," lang",[522,1328,605],{"class":528},[522,1330,608],{"class":528},[522,1332,1333],{"class":566},"ts",[522,1335,608],{"class":528},[522,1337,537],{"class":536},[522,1339,540],{"class":528},[522,1341,1342,1344,1346,1349,1352,1354,1356,1358,1361,1363],{"class":524,"line":543},[522,1343,547],{"class":546},[522,1345,550],{"class":528},[522,1347,1348],{"class":553}," BaseCameraControls",[522,1350,1351],{"class":528},",",[522,1353,554],{"class":553},[522,1355,557],{"class":528},[522,1357,560],{"class":546},[522,1359,1360],{"class":528}," '",[522,1362,567],{"class":566},[522,1364,1365],{"class":528},"'\n",[522,1367,1368,1370,1372],{"class":524,"line":573},[522,1369,576],{"class":528},[522,1371,533],{"class":532},[522,1373,540],{"class":528},[522,1375,1376],{"class":524,"line":583},[522,1377,1379],{"emptyLinePlaceholder":1378},true,"\n",[522,1381,1382,1384,1386],{"class":524,"line":593},[522,1383,529],{"class":528},[522,1385,588],{"class":532},[522,1387,540],{"class":528},[522,1389,1390],{"class":524,"line":618},[522,1391,1392],{"class":553},"  ...\n",[522,1394,1395,1397],{"class":524,"line":515},[522,1396,596],{"class":528},[522,1398,1399],{"class":532},"CameraControls\n",[522,1401,1402,1405,1408,1410,1412,1415,1417,1420,1422,1424,1426,1428,1431,1433],{"class":524,"line":671},[522,1403,1404],{"class":528},"    :",[522,1406,1407],{"class":536},"mouse-buttons",[522,1409,605],{"class":528},[522,1411,608],{"class":528},[522,1413,1414],{"class":528},"{ ",[522,1416,825],{"class":532},[522,1418,1419],{"class":528},": ",[522,1421,1307],{"class":553},[522,1423,504],{"class":528},[522,1425,1311],{"class":553},[522,1427,504],{"class":528},[522,1429,1430],{"class":553},"DOLLY",[522,1432,557],{"class":528},[522,1434,570],{"class":528},[522,1436,1437,1439,1441,1443,1445,1447,1450,1452,1454,1456,1458,1460,1463,1465],{"class":524,"line":694},[522,1438,1404],{"class":528},[522,1440,1271],{"class":536},[522,1442,605],{"class":528},[522,1444,608],{"class":528},[522,1446,1414],{"class":528},[522,1448,1449],{"class":532},"one",[522,1451,1419],{"class":528},[522,1453,1307],{"class":553},[522,1455,504],{"class":528},[522,1457,1311],{"class":553},[522,1459,504],{"class":528},[522,1461,1462],{"class":553},"TOUCH_TRUCK",[522,1464,557],{"class":528},[522,1466,570],{"class":528},[522,1468,1469],{"class":524,"line":717},[522,1470,1471],{"class":528},"  />\n",[522,1473,1474],{"class":524,"line":727},[522,1475,1392],{"class":553},[522,1477,1478,1480,1482],{"class":524,"line":737},[522,1479,576],{"class":528},[522,1481,588],{"class":532},[522,1483,540],{"class":528},[1485,1486,1487],"h3",{"id":1407},"Mouse buttons",[814,1489,1490,1502],{},[817,1491,1492],{},[820,1493,1494,1497,1500],{},[823,1495,1496],{},"Button to assign",[823,1498,1499],{},"Options",[823,1501,832],{},[834,1503,1504,1535,1560,1590],{},[820,1505,1506,1511,1531],{},[839,1507,1508],{},[519,1509,1510],{},"mouseButtons.left",[839,1512,1513,1516,1517,1516,1520,1516,1523,1516,1525,1516,1528],{},[519,1514,1515],{},"ROTATE"," | ",[519,1518,1519],{},"TRUCK",[519,1521,1522],{},"OFFSET",[519,1524,1430],{},[519,1526,1527],{},"ZOOM",[519,1529,1530],{},"NONE",[839,1532,1533],{},[519,1534,1515],{},[820,1536,1537,1542,1556],{},[839,1538,1539],{},[519,1540,1541],{},"mouseButtons.right",[839,1543,1544,1516,1546,1516,1548,1516,1550,1516,1552,1516,1554],{},[519,1545,1515],{},[519,1547,1519],{},[519,1549,1522],{},[519,1551,1430],{},[519,1553,1527],{},[519,1555,1530],{},[839,1557,1558],{},[519,1559,1519],{},[820,1561,1562,1568,1582],{},[839,1563,1564,1567],{},[519,1565,1566],{},"mouseButtons.wheel"," ¹",[839,1569,1570,1516,1572,1516,1574,1516,1576,1516,1578,1516,1580],{},[519,1571,1515],{},[519,1573,1519],{},[519,1575,1522],{},[519,1577,1430],{},[519,1579,1527],{},[519,1581,1530],{},[839,1583,1584,1586,1587,1589],{},[519,1585,1430],{}," for Perspective camera, ",[519,1588,1527],{}," for Orthographic camera.",[820,1591,1592,1598,1612],{},[839,1593,1594,1597],{},[519,1595,1596],{},"mouseButtons.middle"," ²",[839,1599,1600,1516,1602,1516,1604,1516,1606,1516,1608,1516,1610],{},[519,1601,1515],{},[519,1603,1519],{},[519,1605,1522],{},[519,1607,1430],{},[519,1609,1527],{},[519,1611,1530],{},[839,1613,1614],{},[519,1615,1430],{},[1617,1618,1619,1623],"ol",{},[1620,1621,1622],"li",{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[1620,1624,1625],{},"Mouse wheel \"button\" click event.",[1485,1627,1628],{"id":1271},"Touches",[814,1630,1631,1642],{},[817,1632,1633],{},[820,1634,1635,1638,1640],{},[823,1636,1637],{},"Fingers to assign",[823,1639,1499],{},[823,1641,832],{},[834,1643,1644,1671,1719],{},[820,1645,1646,1651,1667],{},[839,1647,1648],{},[519,1649,1650],{},"touches.one",[839,1652,1653,1516,1656,1516,1658,1516,1661,1516,1663,1516,1665],{},[519,1654,1655],{},"TOUCH_ROTATE",[519,1657,1462],{},[519,1659,1660],{},"TOUCH_OFFSET",[519,1662,1430],{},[519,1664,1527],{},[519,1666,1530],{},[839,1668,1669],{},[519,1670,1655],{},[820,1672,1673,1678,1712],{},[839,1674,1675],{},[519,1676,1677],{},"touches.two",[839,1679,1680,1516,1683,1516,1686,1516,1689,1516,1692,1516,1695,1516,1698,1516,1701,1516,1704,1516,1706,1516,1708,1516,1710],{},[519,1681,1682],{},"TOUCH_DOLLY_TRUCK",[519,1684,1685],{},"TOUCH_DOLLY_OFFSET",[519,1687,1688],{},"TOUCH_DOLLY_ROTATE",[519,1690,1691],{},"TOUCH_ZOOM_TRUCK",[519,1693,1694],{},"TOUCH_ZOOM_OFFSET",[519,1696,1697],{},"TOUCH_ZOOM_ROTATE",[519,1699,1700],{},"TOUCH_DOLLY",[519,1702,1703],{},"TOUCH_ZOOM",[519,1705,1655],{},[519,1707,1462],{},[519,1709,1660],{},[519,1711,1530],{},[839,1713,1714,1586,1716,1718],{},[519,1715,1682],{},[519,1717,1691],{}," for Othographic camera.",[820,1720,1721,1726,1748],{},[839,1722,1723],{},[519,1724,1725],{},"touches.three",[839,1727,1728,1516,1730,1516,1732,1516,1734,1516,1736,1516,1738,1516,1740,1516,1742,1516,1744,1516,1746],{},[519,1729,1682],{},[519,1731,1685],{},[519,1733,1688],{},[519,1735,1691],{},[519,1737,1694],{},[519,1739,1697],{},[519,1741,1655],{},[519,1743,1462],{},[519,1745,1660],{},[519,1747,1530],{},[839,1749,1750],{},[519,1751,1462],{},[506,1753,1755],{"id":1754},"events","Events",[510,1757,1759],{"className":512,"code":1758,"language":516,"meta":517,"style":517},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[519,1760,1761],{"__ignoreMap":517},[522,1762,1763,1765,1767,1770,1773,1775,1777,1780,1782,1784,1787,1789,1791,1794,1796,1798,1801,1803,1805,1808,1810],{"class":524,"line":525},[522,1764,529],{"class":528},[522,1766,490],{"class":532},[522,1768,1769],{"class":528}," @",[522,1771,1772],{"class":536},"change",[522,1774,605],{"class":528},[522,1776,608],{"class":528},[522,1778,1779],{"class":553},"onChange",[522,1781,608],{"class":528},[522,1783,1769],{"class":528},[522,1785,1786],{"class":536},"start",[522,1788,605],{"class":528},[522,1790,608],{"class":528},[522,1792,1793],{"class":553},"onStart",[522,1795,608],{"class":528},[522,1797,1769],{"class":528},[522,1799,1800],{"class":536},"end",[522,1802,605],{"class":528},[522,1804,608],{"class":528},[522,1806,1807],{"class":553},"onEnd",[522,1809,608],{"class":528},[522,1811,658],{"class":528},[814,1813,1814,1823],{},[817,1815,1816],{},[820,1817,1818,1821],{},[823,1819,1820],{"align":825},"Event",[823,1822,829],{"align":825},[834,1824,1825,1834,1843],{},[820,1826,1827,1831],{},[839,1828,1829],{"align":825},[842,1830,1786],{},[839,1832,1833],{"align":825},"Dispatched when the control starts to change.",[820,1835,1836,1840],{},[839,1837,1838],{"align":825},[842,1839,1772],{},[839,1841,1842],{"align":825},"Dispatched when the control changes.",[820,1844,1845,1849],{},[839,1846,1847],{"align":825},[842,1848,1800],{},[839,1850,1851],{"align":825},"Dispatched when the control ends to change.",[1853,1854,1855],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":517,"searchDepth":525,"depth":543,"links":1857},[1858,1859,1860,1864],{"id":508,"depth":543,"text":15},{"id":808,"depth":543,"text":809},{"id":1283,"depth":543,"text":1263,"children":1861},[1862,1863],{"id":1407,"depth":573,"text":1487},{"id":1271,"depth":573,"text":1628},{"id":1754,"depth":543,"text":1755},"Is similar to OrbitControls yet supports smooth transitions and more features.","md",null,{},{"title":87,"description":1865},"Er67NB_D9l-p90cx_F8Ueo3oYf_90DhOHx1q_8YgH3g",[1872,1874],{"title":81,"path":82,"stem":83,"description":1873,"children":-1},"All currently supported controls",{"title":91,"path":92,"stem":93,"description":1875,"children":-1},"Drag and drop 3D objects in your scene with pointer events",1776202090762]