[{"data":1,"prerenderedAt":4483},["ShallowReactive",2],{"navigation":3,"/api/controls":474,"/api/controls-surround":495,"control-list":500},[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,84,114,156,190,284,310,344,394,440],{"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,80],{"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},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-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,436],{"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},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":437,"path":438,"stem":439},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":441,"path":442,"stem":443,"children":444},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[445,446,450,454,458,462,466,470],{"title":441,"path":442,"stem":443},{"title":447,"path":448,"stem":449},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":451,"path":452,"stem":453},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":455,"path":456,"stem":457},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":459,"path":460,"stem":461},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":463,"path":464,"stem":465},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":467,"path":468,"stem":469},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":471,"path":472,"stem":473},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":475,"title":85,"body":476,"description":488,"extension":489,"links":490,"meta":491,"navigation":492,"path":86,"seo":493,"stem":87,"__hash__":494},"docs/2.api/2.controls/index.md",{"type":477,"value":478,"toc":483},"minimark",[479],[480,481],"api-list",{"list-name":482},"control-list",{"title":484,"searchDepth":485,"depth":486,"links":487},"",1,2,[],"All currently supported controls","md",null,{},true,{"title":85,"description":488},"G_8gDVh6wxBKwr8OPaeiDq4nR7BnxAMmQ9FukYHaIDI",[496,498],{"title":81,"path":82,"stem":83,"description":497,"children":-1},"Position objects in front of the camera with CSS-like positioning.",{"title":91,"path":92,"stem":93,"description":499,"children":-1},"Is similar to OrbitControls yet supports smooth transitions and more features.",[501,1894,2291,2622,3357,3715],{"id":502,"title":91,"body":503,"description":499,"extension":489,"links":490,"meta":1891,"navigation":492,"path":92,"seo":1892,"stem":93,"__hash__":1893},"docs/2.api/2.controls/camera-controls.md",{"type":477,"value":504,"toc":1882},[505,511,526,535,539,827,833,837,840,1308,1311,1340,1510,1514,1642,1652,1655,1778,1782,1838,1878],[506,507,508],"scene-controls-wrapper",{},[509,510],"controls-camera-controls",{},[512,513,514,521,522,525],"p",{},[515,516,520],"a",{"href":517,"rel":518},"https://github.com/yomotsu/camera-controls",[519],"nofollow","CameraControls"," is a camera controller similar to ",[515,523,524],{"href":104},"OrbitControls"," yet supports smooth transitions and more features.",[512,527,528,529,534],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[515,530,533],{"href":531,"rel":532},"https://www.npmjs.com/package/camera-controls",[519],"npm",".",[536,537,15],"h2",{"id":538},"usage",[540,541,547],"pre",{"className":542,"code":543,"highlights":544,"language":546,"meta":484,"style":484},"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",[545],7,"vue",[548,549,550,569,598,608,618,643,686,696,719,742,752,762,798,808,818],"code",{"__ignoreMap":484},[551,552,554,558,562,566],"span",{"class":553,"line":485},"line",[551,555,557],{"class":556},"sMK4o","\u003C",[551,559,561],{"class":560},"swJcz","script",[551,563,565],{"class":564},"spNyl"," setup",[551,567,568],{"class":556},">\n",[551,570,571,575,578,582,585,588,591,595],{"class":553,"line":486},[551,572,574],{"class":573},"s7zQu","import",[551,576,577],{"class":556}," {",[551,579,581],{"class":580},"sTEyZ"," CameraControls",[551,583,584],{"class":556}," }",[551,586,587],{"class":573}," from",[551,589,590],{"class":556}," \"",[551,592,594],{"class":593},"sfazB","@tresjs/cientos",[551,596,597],{"class":556},"\"\n",[551,599,601,604,606],{"class":553,"line":600},3,[551,602,603],{"class":556},"\u003C/",[551,605,561],{"class":560},[551,607,568],{"class":556},[551,609,611,613,616],{"class":553,"line":610},4,[551,612,557],{"class":556},[551,614,615],{"class":560},"template",[551,617,568],{"class":556},[551,619,621,624,627,630,633,636,639,641],{"class":553,"line":620},5,[551,622,623],{"class":556},"  \u003C",[551,625,626],{"class":560},"TresCanvas",[551,628,629],{"class":564}," clear-color",[551,631,632],{"class":556},"=",[551,634,635],{"class":556},"\"",[551,637,638],{"class":593},"#82DBC5",[551,640,635],{"class":556},[551,642,568],{"class":556},[551,644,646,649,652,655,658,660,662,665,669,672,674,676,678,681,683],{"class":553,"line":645},6,[551,647,648],{"class":556},"    \u003C",[551,650,651],{"class":560},"TresPerspectiveCamera",[551,653,654],{"class":556}," :",[551,656,657],{"class":564},"position",[551,659,632],{"class":556},[551,661,635],{"class":556},[551,663,664],{"class":556},"[",[551,666,668],{"class":667},"sbssI","3",[551,670,671],{"class":556},", ",[551,673,668],{"class":667},[551,675,671],{"class":556},[551,677,668],{"class":667},[551,679,680],{"class":556},"]",[551,682,635],{"class":556},[551,684,685],{"class":556}," />\n",[551,687,690,692,694],{"class":688,"line":545},[553,689],"highlight",[551,691,648],{"class":556},[551,693,520],{"class":560},[551,695,685],{"class":556},[551,697,699,701,703,705,708,710,712,715,717],{"class":553,"line":698},8,[551,700,648],{"class":556},[551,702,197],{"class":560},[551,704,654],{"class":556},[551,706,707],{"class":564},"scale",[551,709,632],{"class":556},[551,711,635],{"class":556},[551,713,714],{"class":667},"2",[551,716,635],{"class":556},[551,718,568],{"class":556},[551,720,722,725,728,731,733,735,738,740],{"class":553,"line":721},9,[551,723,724],{"class":556},"      \u003C",[551,726,727],{"class":560},"TresMeshToonMaterial",[551,729,730],{"class":564}," color",[551,732,632],{"class":556},[551,734,635],{"class":556},[551,736,737],{"class":593},"orange",[551,739,635],{"class":556},[551,741,685],{"class":556},[551,743,745,748,750],{"class":553,"line":744},10,[551,746,747],{"class":556},"    \u003C/",[551,749,197],{"class":560},[551,751,568],{"class":556},[551,753,755,757,760],{"class":553,"line":754},11,[551,756,648],{"class":556},[551,758,759],{"class":560},"TresAmbientLight",[551,761,685],{"class":556},[551,763,765,767,770,772,774,776,778,780,783,785,787,789,792,794,796],{"class":553,"line":764},12,[551,766,648],{"class":556},[551,768,769],{"class":560},"TresDirectionalLight",[551,771,654],{"class":556},[551,773,657],{"class":564},[551,775,632],{"class":556},[551,777,635],{"class":556},[551,779,664],{"class":556},[551,781,782],{"class":667},"0",[551,784,671],{"class":556},[551,786,714],{"class":667},[551,788,671],{"class":556},[551,790,791],{"class":667},"4",[551,793,680],{"class":556},[551,795,635],{"class":556},[551,797,685],{"class":556},[551,799,801,803,806],{"class":553,"line":800},13,[551,802,648],{"class":556},[551,804,805],{"class":560},"TresGridHelper",[551,807,685],{"class":556},[551,809,811,814,816],{"class":553,"line":810},14,[551,812,813],{"class":556},"  \u003C/",[551,815,626],{"class":560},[551,817,568],{"class":556},[551,819,821,823,825],{"class":553,"line":820},15,[551,822,603],{"class":556},[551,824,615],{"class":560},[551,826,568],{"class":556},[828,829,830],"prose-warning",{},[512,831,832],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[536,834,836],{"id":835},"props","Props",[512,838,839],{},"Certainly! Here's the properties of the object in raw markdown table format:",[841,842,843,860],"table",{},[844,845,846],"thead",{},[847,848,849,854,857],"tr",{},[850,851,853],"th",{"align":852},"left","Prop",[850,855,856],{"align":852},"Description",[850,858,859],{},"Default",[861,862,863,880,895,909,923,938,953,968,983,998,1012,1029,1044,1058,1073,1088,1102,1117,1131,1145,1161,1176,1192,1206,1224,1239,1257,1272,1292],"tbody",{},[847,864,865,872,875],{},[866,867,868],"td",{"align":852},[869,870,871],"strong",{},"makeDefault",[866,873,874],{"align":852},"Whether to make this the default controls.",[866,876,877],{},[548,878,879],{},"false",[847,881,882,887,890],{},[866,883,884],{"align":852},[869,885,886],{},"camera",[866,888,889],{"align":852},"The camera to control.",[866,891,892],{},[548,893,894],{},"undefined",[847,896,897,902,905],{},[866,898,899],{"align":852},[869,900,901],{},"domElement",[866,903,904],{"align":852},"The DOM element to listen to.",[866,906,907],{},[548,908,894],{},[847,910,911,916,919],{},[866,912,913],{"align":852},[869,914,915],{},"minPolarAngle",[866,917,918],{"align":852},"Minimum vertical angle in radians.",[866,920,921],{},[548,922,782],{},[847,924,925,930,933],{},[866,926,927],{"align":852},[869,928,929],{},"maxPolarAngle",[866,931,932],{"align":852},"Maximum vertical angle in radians.",[866,934,935],{},[548,936,937],{},"Math.PI",[847,939,940,945,948],{},[866,941,942],{"align":852},[869,943,944],{},"minAzimuthAngle",[866,946,947],{"align":852},"Minimum horizontal angle in radians.",[866,949,950],{},[548,951,952],{},"-Infinity",[847,954,955,960,963],{},[866,956,957],{"align":852},[869,958,959],{},"maxAzimuthAngle",[866,961,962],{"align":852},"Maximum horizontal angle in radians.",[866,964,965],{},[548,966,967],{},"Infinity",[847,969,970,975,978],{},[866,971,972],{"align":852},[869,973,974],{},"distance",[866,976,977],{"align":852},"Current distance.",[866,979,980],{},[548,981,982],{},"camera.position.z",[847,984,985,990,993],{},[866,986,987],{"align":852},[869,988,989],{},"minDistance",[866,991,992],{"align":852},"Minimum distance for dolly. PerspectiveCamera only.",[866,994,995],{},[548,996,997],{},"Number.EPSILON",[847,999,1000,1005,1008],{},[866,1001,1002],{"align":852},[869,1003,1004],{},"maxDistance",[866,1006,1007],{"align":852},"Maximum distance for dolly. PerspectiveCamera only.",[866,1009,1010],{},[548,1011,967],{},[847,1013,1014,1019,1025],{},[866,1015,1016],{"align":852},[869,1017,1018],{},"infinityDolly",[866,1020,1021,1024],{"align":852},[548,1022,1023],{},"true"," to enable Infinity Dolly for wheel and pinch.",[866,1026,1027],{},[548,1028,879],{},[847,1030,1031,1036,1039],{},[866,1032,1033],{"align":852},[869,1034,1035],{},"minZoom",[866,1037,1038],{"align":852},"Minimum camera zoom.",[866,1040,1041],{},[548,1042,1043],{},"0.01",[847,1045,1046,1051,1054],{},[866,1047,1048],{"align":852},[869,1049,1050],{},"maxZoom",[866,1052,1053],{"align":852},"Maximum camera zoom.",[866,1055,1056],{},[548,1057,967],{},[847,1059,1060,1065,1068],{},[866,1061,1062],{"align":852},[869,1063,1064],{},"smoothTime",[866,1066,1067],{"align":852},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[866,1069,1070],{},[548,1071,1072],{},"0.25",[847,1074,1075,1080,1083],{},[866,1076,1077],{"align":852},[869,1078,1079],{},"draggingSmoothTime",[866,1081,1082],{"align":852},"The smoothTime while dragging.",[866,1084,1085],{},[548,1086,1087],{},"0.125",[847,1089,1090,1095,1098],{},[866,1091,1092],{"align":852},[869,1093,1094],{},"maxSpeed",[866,1096,1097],{"align":852},"Max transition speed in units per second.",[866,1099,1100],{},[548,1101,967],{},[847,1103,1104,1109,1112],{},[866,1105,1106],{"align":852},[869,1107,1108],{},"azimuthRotateSpeed",[866,1110,1111],{"align":852},"Speed of azimuth (horizontal) rotation.",[866,1113,1114],{},[548,1115,1116],{},"1.0",[847,1118,1119,1124,1127],{},[866,1120,1121],{"align":852},[869,1122,1123],{},"polarRotateSpeed",[866,1125,1126],{"align":852},"Speed of polar (vertical) rotation.",[866,1128,1129],{},[548,1130,1116],{},[847,1132,1133,1138,1141],{},[866,1134,1135],{"align":852},[869,1136,1137],{},"dollySpeed",[866,1139,1140],{"align":852},"Speed of mouse-wheel dollying.",[866,1142,1143],{},[548,1144,1116],{},[847,1146,1147,1152,1157],{},[866,1148,1149],{"align":852},[869,1150,1151],{},"dollyDragInverted",[866,1153,1154,1156],{"align":852},[548,1155,1023],{}," to invert direction when dollying or zooming via drag.",[866,1158,1159],{},[548,1160,879],{},[847,1162,1163,1168,1171],{},[866,1164,1165],{"align":852},[869,1166,1167],{},"truckSpeed",[866,1169,1170],{"align":852},"Speed of drag for truck and pedestal.",[866,1172,1173],{},[548,1174,1175],{},"2.0",[847,1177,1178,1183,1188],{},[866,1179,1180],{"align":852},[869,1181,1182],{},"dollyToCursor",[866,1184,1185,1187],{"align":852},[548,1186,1023],{}," to enable Dolly-in to the mouse cursor coords.",[866,1189,1190],{},[548,1191,879],{},[847,1193,1194,1199,1202],{},[866,1195,1196],{"align":852},[869,1197,1198],{},"dragToOffset",[866,1200,1201],{"align":852},"Whether to drag to offset.",[866,1203,1204],{},[548,1205,879],{},[847,1207,1208,1213,1220],{},[866,1209,1210],{"align":852},[869,1211,1212],{},"verticalDragToForward",[866,1214,1215,1216,1219],{"align":852},"The same as ",[548,1217,1218],{},".screenSpacePanning"," in Three.js's OrbitControls.",[866,1221,1222],{},[548,1223,879],{},[847,1225,1226,1231,1234],{},[866,1227,1228],{"align":852},[869,1229,1230],{},"boundaryFriction",[866,1232,1233],{"align":852},"Friction ratio of the boundary.",[866,1235,1236],{},[548,1237,1238],{},"0.0",[847,1240,1241,1246,1253],{},[866,1242,1243],{"align":852},[869,1244,1245],{},"restThreshold",[866,1247,1248,1249,1252],{"align":852},"Controls how soon the ",[548,1250,1251],{},"rest"," event fires as the camera slows.",[866,1254,1255],{},[548,1256,1043],{},[847,1258,1259,1264,1267],{},[866,1260,1261],{"align":852},[869,1262,1263],{},"colliderMeshes",[866,1265,1266],{"align":852},"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.",[866,1268,1269],{},[548,1270,1271],{},"[]",[847,1273,1274,1279,1282],{},[866,1275,1276],{"align":852},[869,1277,1278],{},"mouseButtons",[866,1280,1281],{"align":852},"Configuration of actions on mouse input.",[866,1283,1284,1285,1291],{},"See ",[515,1286,1288],{"href":1287},"#user-input-config",[548,1289,1290],{},"User input config"," for details",[847,1293,1294,1299,1302],{},[866,1295,1296],{"align":852},[869,1297,1298],{},"touches",[866,1300,1301],{"align":852},"Configuration of actions on touch.",[866,1303,1284,1304,1291],{},[515,1305,1306],{"href":1287},[548,1307,1290],{},[536,1309,1290],{"id":1310},"user-input-config",[512,1312,1313,1314,1316,1317,1319,1320,1328,1329,1331,1332,1335,1336,1339],{},"You can easily override the default user input config by defining ",[548,1315,1278],{}," and/or ",[548,1318,1298],{}," props that correspond to ",[515,1321,1324,1327],{"href":1322,"rel":1323},"https://github.com/yomotsu/camera-controls?#user-input-config",[519],[548,1325,1326],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[548,1330,520],{}," class as ",[548,1333,1334],{},"BaseCameraControls"," which gives you access to the ",[548,1337,1338],{},"ACTION"," enum.",[540,1341,1343],{"className":542,"code":1342,"language":546,"meta":484,"style":484},"\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",[548,1344,1345,1367,1393,1401,1406,1414,1419,1426,1461,1493,1498,1502],{"__ignoreMap":484},[551,1346,1347,1349,1351,1354,1356,1358,1361,1363,1365],{"class":553,"line":485},[551,1348,557],{"class":556},[551,1350,561],{"class":560},[551,1352,1353],{"class":564}," lang",[551,1355,632],{"class":556},[551,1357,635],{"class":556},[551,1359,1360],{"class":593},"ts",[551,1362,635],{"class":556},[551,1364,565],{"class":564},[551,1366,568],{"class":556},[551,1368,1369,1371,1373,1376,1379,1381,1383,1385,1388,1390],{"class":553,"line":486},[551,1370,574],{"class":573},[551,1372,577],{"class":556},[551,1374,1375],{"class":580}," BaseCameraControls",[551,1377,1378],{"class":556},",",[551,1380,581],{"class":580},[551,1382,584],{"class":556},[551,1384,587],{"class":573},[551,1386,1387],{"class":556}," '",[551,1389,594],{"class":593},[551,1391,1392],{"class":556},"'\n",[551,1394,1395,1397,1399],{"class":553,"line":600},[551,1396,603],{"class":556},[551,1398,561],{"class":560},[551,1400,568],{"class":556},[551,1402,1403],{"class":553,"line":610},[551,1404,1405],{"emptyLinePlaceholder":492},"\n",[551,1407,1408,1410,1412],{"class":553,"line":620},[551,1409,557],{"class":556},[551,1411,615],{"class":560},[551,1413,568],{"class":556},[551,1415,1416],{"class":553,"line":645},[551,1417,1418],{"class":580},"  ...\n",[551,1420,1421,1423],{"class":553,"line":545},[551,1422,623],{"class":556},[551,1424,1425],{"class":560},"CameraControls\n",[551,1427,1428,1431,1434,1436,1438,1441,1443,1446,1448,1450,1452,1454,1457,1459],{"class":553,"line":698},[551,1429,1430],{"class":556},"    :",[551,1432,1433],{"class":564},"mouse-buttons",[551,1435,632],{"class":556},[551,1437,635],{"class":556},[551,1439,1440],{"class":556},"{ ",[551,1442,852],{"class":560},[551,1444,1445],{"class":556},": ",[551,1447,1334],{"class":580},[551,1449,534],{"class":556},[551,1451,1338],{"class":580},[551,1453,534],{"class":556},[551,1455,1456],{"class":580},"DOLLY",[551,1458,584],{"class":556},[551,1460,597],{"class":556},[551,1462,1463,1465,1467,1469,1471,1473,1476,1478,1480,1482,1484,1486,1489,1491],{"class":553,"line":721},[551,1464,1430],{"class":556},[551,1466,1298],{"class":564},[551,1468,632],{"class":556},[551,1470,635],{"class":556},[551,1472,1440],{"class":556},[551,1474,1475],{"class":560},"one",[551,1477,1445],{"class":556},[551,1479,1334],{"class":580},[551,1481,534],{"class":556},[551,1483,1338],{"class":580},[551,1485,534],{"class":556},[551,1487,1488],{"class":580},"TOUCH_TRUCK",[551,1490,584],{"class":556},[551,1492,597],{"class":556},[551,1494,1495],{"class":553,"line":744},[551,1496,1497],{"class":556},"  />\n",[551,1499,1500],{"class":553,"line":754},[551,1501,1418],{"class":580},[551,1503,1504,1506,1508],{"class":553,"line":764},[551,1505,603],{"class":556},[551,1507,615],{"class":560},[551,1509,568],{"class":556},[1511,1512,1513],"h3",{"id":1433},"Mouse buttons",[841,1515,1516,1528],{},[844,1517,1518],{},[847,1519,1520,1523,1526],{},[850,1521,1522],{},"Button to assign",[850,1524,1525],{},"Options",[850,1527,859],{},[861,1529,1530,1561,1586,1616],{},[847,1531,1532,1537,1557],{},[866,1533,1534],{},[548,1535,1536],{},"mouseButtons.left",[866,1538,1539,1542,1543,1542,1546,1542,1549,1542,1551,1542,1554],{},[548,1540,1541],{},"ROTATE"," | ",[548,1544,1545],{},"TRUCK",[548,1547,1548],{},"OFFSET",[548,1550,1456],{},[548,1552,1553],{},"ZOOM",[548,1555,1556],{},"NONE",[866,1558,1559],{},[548,1560,1541],{},[847,1562,1563,1568,1582],{},[866,1564,1565],{},[548,1566,1567],{},"mouseButtons.right",[866,1569,1570,1542,1572,1542,1574,1542,1576,1542,1578,1542,1580],{},[548,1571,1541],{},[548,1573,1545],{},[548,1575,1548],{},[548,1577,1456],{},[548,1579,1553],{},[548,1581,1556],{},[866,1583,1584],{},[548,1585,1545],{},[847,1587,1588,1594,1608],{},[866,1589,1590,1593],{},[548,1591,1592],{},"mouseButtons.wheel"," ¹",[866,1595,1596,1542,1598,1542,1600,1542,1602,1542,1604,1542,1606],{},[548,1597,1541],{},[548,1599,1545],{},[548,1601,1548],{},[548,1603,1456],{},[548,1605,1553],{},[548,1607,1556],{},[866,1609,1610,1612,1613,1615],{},[548,1611,1456],{}," for Perspective camera, ",[548,1614,1553],{}," for Orthographic camera.",[847,1617,1618,1624,1638],{},[866,1619,1620,1623],{},[548,1621,1622],{},"mouseButtons.middle"," ²",[866,1625,1626,1542,1628,1542,1630,1542,1632,1542,1634,1542,1636],{},[548,1627,1541],{},[548,1629,1545],{},[548,1631,1548],{},[548,1633,1456],{},[548,1635,1553],{},[548,1637,1556],{},[866,1639,1640],{},[548,1641,1456],{},[1643,1644,1645,1649],"ol",{},[1646,1647,1648],"li",{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[1646,1650,1651],{},"Mouse wheel \"button\" click event.",[1511,1653,1654],{"id":1298},"Touches",[841,1656,1657,1668],{},[844,1658,1659],{},[847,1660,1661,1664,1666],{},[850,1662,1663],{},"Fingers to assign",[850,1665,1525],{},[850,1667,859],{},[861,1669,1670,1697,1745],{},[847,1671,1672,1677,1693],{},[866,1673,1674],{},[548,1675,1676],{},"touches.one",[866,1678,1679,1542,1682,1542,1684,1542,1687,1542,1689,1542,1691],{},[548,1680,1681],{},"TOUCH_ROTATE",[548,1683,1488],{},[548,1685,1686],{},"TOUCH_OFFSET",[548,1688,1456],{},[548,1690,1553],{},[548,1692,1556],{},[866,1694,1695],{},[548,1696,1681],{},[847,1698,1699,1704,1738],{},[866,1700,1701],{},[548,1702,1703],{},"touches.two",[866,1705,1706,1542,1709,1542,1712,1542,1715,1542,1718,1542,1721,1542,1724,1542,1727,1542,1730,1542,1732,1542,1734,1542,1736],{},[548,1707,1708],{},"TOUCH_DOLLY_TRUCK",[548,1710,1711],{},"TOUCH_DOLLY_OFFSET",[548,1713,1714],{},"TOUCH_DOLLY_ROTATE",[548,1716,1717],{},"TOUCH_ZOOM_TRUCK",[548,1719,1720],{},"TOUCH_ZOOM_OFFSET",[548,1722,1723],{},"TOUCH_ZOOM_ROTATE",[548,1725,1726],{},"TOUCH_DOLLY",[548,1728,1729],{},"TOUCH_ZOOM",[548,1731,1681],{},[548,1733,1488],{},[548,1735,1686],{},[548,1737,1556],{},[866,1739,1740,1612,1742,1744],{},[548,1741,1708],{},[548,1743,1717],{}," for Othographic camera.",[847,1746,1747,1752,1774],{},[866,1748,1749],{},[548,1750,1751],{},"touches.three",[866,1753,1754,1542,1756,1542,1758,1542,1760,1542,1762,1542,1764,1542,1766,1542,1768,1542,1770,1542,1772],{},[548,1755,1708],{},[548,1757,1711],{},[548,1759,1714],{},[548,1761,1717],{},[548,1763,1720],{},[548,1765,1723],{},[548,1767,1681],{},[548,1769,1488],{},[548,1771,1686],{},[548,1773,1556],{},[866,1775,1776],{},[548,1777,1488],{},[536,1779,1781],{"id":1780},"events","Events",[540,1783,1785],{"className":542,"code":1784,"language":546,"meta":484,"style":484},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[548,1786,1787],{"__ignoreMap":484},[551,1788,1789,1791,1793,1796,1799,1801,1803,1806,1808,1810,1813,1815,1817,1820,1822,1824,1827,1829,1831,1834,1836],{"class":553,"line":485},[551,1790,557],{"class":556},[551,1792,520],{"class":560},[551,1794,1795],{"class":556}," @",[551,1797,1798],{"class":564},"change",[551,1800,632],{"class":556},[551,1802,635],{"class":556},[551,1804,1805],{"class":580},"onChange",[551,1807,635],{"class":556},[551,1809,1795],{"class":556},[551,1811,1812],{"class":564},"start",[551,1814,632],{"class":556},[551,1816,635],{"class":556},[551,1818,1819],{"class":580},"onStart",[551,1821,635],{"class":556},[551,1823,1795],{"class":556},[551,1825,1826],{"class":564},"end",[551,1828,632],{"class":556},[551,1830,635],{"class":556},[551,1832,1833],{"class":580},"onEnd",[551,1835,635],{"class":556},[551,1837,685],{"class":556},[841,1839,1840,1849],{},[844,1841,1842],{},[847,1843,1844,1847],{},[850,1845,1846],{"align":852},"Event",[850,1848,856],{"align":852},[861,1850,1851,1860,1869],{},[847,1852,1853,1857],{},[866,1854,1855],{"align":852},[869,1856,1812],{},[866,1858,1859],{"align":852},"Dispatched when the control starts to change.",[847,1861,1862,1866],{},[866,1863,1864],{"align":852},[869,1865,1798],{},[866,1867,1868],{"align":852},"Dispatched when the control changes.",[847,1870,1871,1875],{},[866,1872,1873],{"align":852},[869,1874,1826],{},[866,1876,1877],{"align":852},"Dispatched when the control ends to change.",[1879,1880,1881],"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":484,"searchDepth":485,"depth":486,"links":1883},[1884,1885,1886,1890],{"id":538,"depth":486,"text":15},{"id":835,"depth":486,"text":836},{"id":1310,"depth":486,"text":1290,"children":1887},[1888,1889],{"id":1433,"depth":600,"text":1513},{"id":1298,"depth":600,"text":1654},{"id":1780,"depth":486,"text":1781},{},{"title":91,"description":499},"Er67NB_D9l-p90cx_F8Ueo3oYf_90DhOHx1q_8YgH3g",{"id":1895,"title":95,"body":1896,"description":1914,"extension":489,"links":490,"meta":2288,"navigation":492,"path":96,"seo":2289,"stem":97,"__hash__":2290},"docs/2.api/2.controls/keyboard-controls.md",{"type":477,"value":1897,"toc":2283},[1898,1903,1909,1918,1935,1937,2099,2103,2105,2186,2188,2244,2280],[506,1899,1900],{},[1901,1902],"controls-keyboard-controls",{},[512,1904,1905,1908],{},[548,1906,1907],{},"\u003CKeyboardControls />"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[1910,1911,1912,1915],"ul",{},[1646,1913,1914],{},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",[1646,1916,1917],{},"Arrow keys",[1919,1920,1921],"prose-note",{},[512,1922,1923,1926,1927,1930,1931,534],{},[548,1924,1925],{},"KeyboardControls"," uses ",[548,1928,1929],{},"PointerLockControls"," under the hood. You can use ",[515,1932,1934],{"href":1933},"pointer-lock-controls#props","PointerLockControls props and events",[536,1936,15],{"id":538},[540,1938,1941],{"className":542,"code":1939,"highlights":1940,"language":546,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { KeyboardControls, Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003CBox :position-y=\"0.5\" />\n    \u003CKeyboardControls />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[600,744],[548,1942,1943,1963,1983,2008,2016,2020,2028,2036,2044,2066,2075,2083,2091],{"__ignoreMap":484},[551,1944,1945,1947,1949,1951,1953,1955,1957,1959,1961],{"class":553,"line":485},[551,1946,557],{"class":556},[551,1948,561],{"class":560},[551,1950,565],{"class":564},[551,1952,1353],{"class":564},[551,1954,632],{"class":556},[551,1956,635],{"class":556},[551,1958,1360],{"class":593},[551,1960,635],{"class":556},[551,1962,568],{"class":556},[551,1964,1965,1967,1969,1972,1974,1976,1978,1981],{"class":553,"line":486},[551,1966,574],{"class":573},[551,1968,577],{"class":556},[551,1970,1971],{"class":580}," TresCanvas",[551,1973,584],{"class":556},[551,1975,587],{"class":573},[551,1977,1387],{"class":556},[551,1979,1980],{"class":593},"@tresjs/core",[551,1982,1392],{"class":556},[551,1984,1986,1988,1990,1993,1995,1998,2000,2002,2004,2006],{"class":1985,"line":600},[553,689],[551,1987,574],{"class":573},[551,1989,577],{"class":556},[551,1991,1992],{"class":580}," KeyboardControls",[551,1994,1378],{"class":556},[551,1996,1997],{"class":580}," Box",[551,1999,584],{"class":556},[551,2001,587],{"class":573},[551,2003,1387],{"class":556},[551,2005,594],{"class":593},[551,2007,1392],{"class":556},[551,2009,2010,2012,2014],{"class":553,"line":610},[551,2011,603],{"class":556},[551,2013,561],{"class":560},[551,2015,568],{"class":556},[551,2017,2018],{"class":553,"line":620},[551,2019,1405],{"emptyLinePlaceholder":492},[551,2021,2022,2024,2026],{"class":553,"line":645},[551,2023,557],{"class":556},[551,2025,615],{"class":560},[551,2027,568],{"class":556},[551,2029,2030,2032,2034],{"class":553,"line":545},[551,2031,623],{"class":556},[551,2033,626],{"class":560},[551,2035,568],{"class":556},[551,2037,2038,2040,2042],{"class":553,"line":698},[551,2039,648],{"class":556},[551,2041,651],{"class":560},[551,2043,685],{"class":556},[551,2045,2046,2048,2050,2052,2055,2057,2059,2062,2064],{"class":553,"line":721},[551,2047,648],{"class":556},[551,2049,197],{"class":560},[551,2051,654],{"class":556},[551,2053,2054],{"class":564},"position-y",[551,2056,632],{"class":556},[551,2058,635],{"class":556},[551,2060,2061],{"class":667},"0.5",[551,2063,635],{"class":556},[551,2065,685],{"class":556},[551,2067,2069,2071,2073],{"class":2068,"line":744},[553,689],[551,2070,648],{"class":556},[551,2072,1925],{"class":560},[551,2074,685],{"class":556},[551,2076,2077,2079,2081],{"class":553,"line":754},[551,2078,648],{"class":556},[551,2080,805],{"class":560},[551,2082,685],{"class":556},[551,2084,2085,2087,2089],{"class":553,"line":764},[551,2086,813],{"class":556},[551,2088,626],{"class":560},[551,2090,568],{"class":556},[551,2092,2093,2095,2097],{"class":553,"line":800},[551,2094,603],{"class":556},[551,2096,615],{"class":560},[551,2098,568],{"class":556},[828,2100,2101],{},[512,2102,832],{},[536,2104,836],{"id":835},[841,2106,2107,2117],{},[844,2108,2109],{},[847,2110,2111,2113,2115],{},[850,2112,853],{"align":852},[850,2114,856],{"align":852},[850,2116,859],{},[861,2118,2119,2132,2148,2160,2172],{},[847,2120,2121,2126,2129],{},[866,2122,2123],{"align":852},[869,2124,2125],{},"moveSpeed",[866,2127,2128],{"align":852},"Speed movement.",[866,2130,2131],{},"0.2",[847,2133,2134,2138,2144],{},[866,2135,2136],{"align":852},[869,2137,871],{},[866,2139,2140,2141,2143],{"align":852},"If ",[548,2142,1023],{},", the controls will be set as the default controls for the scene.",[866,2145,2146],{},[548,2147,1023],{},[847,2149,2150,2154,2156],{},[866,2151,2152],{"align":852},[869,2153,886],{},[866,2155,889],{"align":852},[866,2157,2158],{},[548,2159,894],{},[847,2161,2162,2166,2168],{},[866,2163,2164],{"align":852},[869,2165,901],{},[866,2167,904],{"align":852},[866,2169,2170],{},[548,2171,894],{},[847,2173,2174,2179,2182],{},[866,2175,2176],{"align":852},[869,2177,2178],{},"selector",[866,2180,2181],{"align":852},"Accept an id element as string. If set, the new element will be used as the trigger",[866,2183,2184],{},[548,2185,894],{},[536,2187,1781],{"id":1780},[540,2189,2191],{"className":542,"code":2190,"language":546,"meta":484,"style":484},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[548,2192,2193],{"__ignoreMap":484},[551,2194,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213,2216,2218,2220,2223,2227,2230,2233,2237,2240,2242],{"class":553,"line":485},[551,2196,557],{"class":556},[551,2198,1925],{"class":560},[551,2200,1795],{"class":556},[551,2202,1798],{"class":564},[551,2204,632],{"class":556},[551,2206,635],{"class":556},[551,2208,1805],{"class":580},[551,2210,635],{"class":556},[551,2212,1795],{"class":556},[551,2214,2215],{"class":564},"is-lock",[551,2217,632],{"class":556},[551,2219,635],{"class":556},[551,2221,2222],{"class":556},"(",[551,2224,2226],{"class":2225},"sHdIc","state",[551,2228,2229],{"class":556},")",[551,2231,2232],{"class":564}," =>",[551,2234,2236],{"class":2235},"s2Zo4"," isActive",[551,2238,2239],{"class":580},"(state)",[551,2241,635],{"class":556},[551,2243,685],{"class":580},[841,2245,2246,2254],{},[844,2247,2248],{},[847,2249,2250,2252],{},[850,2251,1846],{"align":852},[850,2253,856],{"align":852},[861,2255,2256,2272],{},[847,2257,2258,2263],{},[866,2259,2260],{"align":852},[869,2261,2262],{},"isLock",[866,2264,2265,2266,2268,2269,2271],{"align":852},"Return ",[548,2267,1023],{}," if \"lock\", ",[548,2270,879],{}," if \"unlock\" events are triggered.",[847,2273,2274,2278],{},[866,2275,2276],{"align":852},[869,2277,1798],{},[866,2279,1868],{"align":852},[1879,2281,2282],{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":484,"searchDepth":485,"depth":486,"links":2284},[2285,2286,2287],{"id":538,"depth":486,"text":15},{"id":835,"depth":486,"text":836},{"id":1780,"depth":486,"text":1781},{},{"title":95,"description":1914},"Oix2-Nx3pvTy-NyphfuJ57zwsLs_Vfgz8LsTCMVbO8c",{"id":2292,"title":99,"body":2293,"description":2618,"extension":489,"links":490,"meta":2619,"navigation":492,"path":100,"seo":2620,"stem":101,"__hash__":2621},"docs/2.api/2.controls/map-controls.md",{"type":477,"value":2294,"toc":2614},[2295,2300,2308,2310,2530,2535,2537,2607,2612],[506,2296,2297],{},[2298,2299],"controls-map-controls",{},[512,2301,2302,2307],{},[515,2303,2306],{"href":2304,"rel":2305},"https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls",[519],"MapControls"," similar to OrbitControls, this control is intended for transforming a camera over a map from bird's eye perspective, but uses a specific preset for mouse/touch interaction and disables screen space panning by default.",[536,2309,15],{"id":538},[540,2311,2314],{"className":542,"code":2312,"highlights":2313,"language":546,"meta":484,"style":484},"\u003Cscript setup>\nimport { MapControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CMapControls />\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",[545],[548,2315,2316,2326,2345,2353,2361,2379,2411,2420,2440,2458,2466,2474,2506,2514,2522],{"__ignoreMap":484},[551,2317,2318,2320,2322,2324],{"class":553,"line":485},[551,2319,557],{"class":556},[551,2321,561],{"class":560},[551,2323,565],{"class":564},[551,2325,568],{"class":556},[551,2327,2328,2330,2332,2335,2337,2339,2341,2343],{"class":553,"line":486},[551,2329,574],{"class":573},[551,2331,577],{"class":556},[551,2333,2334],{"class":580}," MapControls",[551,2336,584],{"class":556},[551,2338,587],{"class":573},[551,2340,590],{"class":556},[551,2342,594],{"class":593},[551,2344,597],{"class":556},[551,2346,2347,2349,2351],{"class":553,"line":600},[551,2348,603],{"class":556},[551,2350,561],{"class":560},[551,2352,568],{"class":556},[551,2354,2355,2357,2359],{"class":553,"line":610},[551,2356,557],{"class":556},[551,2358,615],{"class":560},[551,2360,568],{"class":556},[551,2362,2363,2365,2367,2369,2371,2373,2375,2377],{"class":553,"line":620},[551,2364,623],{"class":556},[551,2366,626],{"class":560},[551,2368,629],{"class":564},[551,2370,632],{"class":556},[551,2372,635],{"class":556},[551,2374,638],{"class":593},[551,2376,635],{"class":556},[551,2378,568],{"class":556},[551,2380,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401,2403,2405,2407,2409],{"class":553,"line":645},[551,2382,648],{"class":556},[551,2384,651],{"class":560},[551,2386,654],{"class":556},[551,2388,657],{"class":564},[551,2390,632],{"class":556},[551,2392,635],{"class":556},[551,2394,664],{"class":556},[551,2396,668],{"class":667},[551,2398,671],{"class":556},[551,2400,668],{"class":667},[551,2402,671],{"class":556},[551,2404,668],{"class":667},[551,2406,680],{"class":556},[551,2408,635],{"class":556},[551,2410,685],{"class":556},[551,2412,2414,2416,2418],{"class":2413,"line":545},[553,689],[551,2415,648],{"class":556},[551,2417,2306],{"class":560},[551,2419,685],{"class":556},[551,2421,2422,2424,2426,2428,2430,2432,2434,2436,2438],{"class":553,"line":698},[551,2423,648],{"class":556},[551,2425,197],{"class":560},[551,2427,654],{"class":556},[551,2429,707],{"class":564},[551,2431,632],{"class":556},[551,2433,635],{"class":556},[551,2435,714],{"class":667},[551,2437,635],{"class":556},[551,2439,568],{"class":556},[551,2441,2442,2444,2446,2448,2450,2452,2454,2456],{"class":553,"line":721},[551,2443,724],{"class":556},[551,2445,727],{"class":560},[551,2447,730],{"class":564},[551,2449,632],{"class":556},[551,2451,635],{"class":556},[551,2453,737],{"class":593},[551,2455,635],{"class":556},[551,2457,685],{"class":556},[551,2459,2460,2462,2464],{"class":553,"line":744},[551,2461,747],{"class":556},[551,2463,197],{"class":560},[551,2465,568],{"class":556},[551,2467,2468,2470,2472],{"class":553,"line":754},[551,2469,648],{"class":556},[551,2471,759],{"class":560},[551,2473,685],{"class":556},[551,2475,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502,2504],{"class":553,"line":764},[551,2477,648],{"class":556},[551,2479,769],{"class":560},[551,2481,654],{"class":556},[551,2483,657],{"class":564},[551,2485,632],{"class":556},[551,2487,635],{"class":556},[551,2489,664],{"class":556},[551,2491,782],{"class":667},[551,2493,671],{"class":556},[551,2495,714],{"class":667},[551,2497,671],{"class":556},[551,2499,791],{"class":667},[551,2501,680],{"class":556},[551,2503,635],{"class":556},[551,2505,685],{"class":556},[551,2507,2508,2510,2512],{"class":553,"line":800},[551,2509,648],{"class":556},[551,2511,805],{"class":560},[551,2513,685],{"class":556},[551,2515,2516,2518,2520],{"class":553,"line":810},[551,2517,813],{"class":556},[551,2519,626],{"class":560},[551,2521,568],{"class":556},[551,2523,2524,2526,2528],{"class":553,"line":820},[551,2525,603],{"class":556},[551,2527,615],{"class":560},[551,2529,568],{"class":556},[828,2531,2532],{},[512,2533,2534],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[536,2536,836],{"id":835},[841,2538,2539,2549],{},[844,2540,2541],{},[847,2542,2543,2545,2547],{},[850,2544,853],{"align":852},[850,2546,856],{"align":852},[850,2548,859],{},[861,2550,2551,2565,2577,2590],{},[847,2552,2553,2557,2561],{},[866,2554,2555],{"align":852},[869,2556,871],{},[866,2558,2140,2559,2143],{"align":852},[548,2560,1023],{},[866,2562,2563],{},[548,2564,879],{},[847,2566,2567,2571,2573],{},[866,2568,2569],{"align":852},[869,2570,886],{},[866,2572,889],{"align":852},[866,2574,2575],{},[548,2576,894],{},[847,2578,2579,2583,2586],{},[866,2580,2581],{"align":852},[869,2582,901],{},[866,2584,2585],{"align":852},"The dom element to listen to.",[866,2587,2588],{},[548,2589,894],{},[847,2591,2592,2597,2603],{},[866,2593,2594],{"align":852},[869,2595,2596],{},"screenSpacePanning",[866,2598,2599,2600,2602],{"align":852},"Defines how the camera's position is translated when panning. If ",[548,2601,1023],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[866,2604,2605],{},[548,2606,879],{},[1919,2608,2609],{},[512,2610,2611],{},"All the props of the orbit controls component apply here too.",[1879,2613,1881],{},{"title":484,"searchDepth":485,"depth":486,"links":2615},[2616,2617],{"id":538,"depth":486,"text":15},{"id":835,"depth":486,"text":836},"similar to OrbitControls but for map views",{},{"title":99,"description":2618},"3Gr5ZfaS0tXm4RGuh0wLyX1tmIw4ZrdyL-nbg-P_RPU",{"id":2623,"title":103,"body":2624,"description":3353,"extension":489,"links":490,"meta":3354,"navigation":492,"path":104,"seo":3355,"stem":105,"__hash__":3356},"docs/2.api/2.controls/orbit-controls.md",{"type":477,"value":2625,"toc":3348},[2626,2631,2638,2640,2860,2864,2866,3259,3261,3310,3346],[506,2627,2628],{},[2629,2630],"controls-orbit-controls",{},[512,2632,2633,2637],{},[515,2634,524],{"href":2635,"rel":2636},"https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls",[519]," is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.",[536,2639,15],{"id":538},[540,2641,2644],{"className":542,"code":2642,"highlights":2643,"language":546,"meta":484,"style":484},"\u003Cscript setup>\nimport { OrbitControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003COrbitControls />\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",[545],[548,2645,2646,2656,2675,2683,2691,2709,2741,2750,2770,2788,2796,2804,2836,2844,2852],{"__ignoreMap":484},[551,2647,2648,2650,2652,2654],{"class":553,"line":485},[551,2649,557],{"class":556},[551,2651,561],{"class":560},[551,2653,565],{"class":564},[551,2655,568],{"class":556},[551,2657,2658,2660,2662,2665,2667,2669,2671,2673],{"class":553,"line":486},[551,2659,574],{"class":573},[551,2661,577],{"class":556},[551,2663,2664],{"class":580}," OrbitControls",[551,2666,584],{"class":556},[551,2668,587],{"class":573},[551,2670,590],{"class":556},[551,2672,594],{"class":593},[551,2674,597],{"class":556},[551,2676,2677,2679,2681],{"class":553,"line":600},[551,2678,603],{"class":556},[551,2680,561],{"class":560},[551,2682,568],{"class":556},[551,2684,2685,2687,2689],{"class":553,"line":610},[551,2686,557],{"class":556},[551,2688,615],{"class":560},[551,2690,568],{"class":556},[551,2692,2693,2695,2697,2699,2701,2703,2705,2707],{"class":553,"line":620},[551,2694,623],{"class":556},[551,2696,626],{"class":560},[551,2698,629],{"class":564},[551,2700,632],{"class":556},[551,2702,635],{"class":556},[551,2704,638],{"class":593},[551,2706,635],{"class":556},[551,2708,568],{"class":556},[551,2710,2711,2713,2715,2717,2719,2721,2723,2725,2727,2729,2731,2733,2735,2737,2739],{"class":553,"line":645},[551,2712,648],{"class":556},[551,2714,651],{"class":560},[551,2716,654],{"class":556},[551,2718,657],{"class":564},[551,2720,632],{"class":556},[551,2722,635],{"class":556},[551,2724,664],{"class":556},[551,2726,668],{"class":667},[551,2728,671],{"class":556},[551,2730,668],{"class":667},[551,2732,671],{"class":556},[551,2734,668],{"class":667},[551,2736,680],{"class":556},[551,2738,635],{"class":556},[551,2740,685],{"class":556},[551,2742,2744,2746,2748],{"class":2743,"line":545},[553,689],[551,2745,648],{"class":556},[551,2747,524],{"class":560},[551,2749,685],{"class":556},[551,2751,2752,2754,2756,2758,2760,2762,2764,2766,2768],{"class":553,"line":698},[551,2753,648],{"class":556},[551,2755,197],{"class":560},[551,2757,654],{"class":556},[551,2759,707],{"class":564},[551,2761,632],{"class":556},[551,2763,635],{"class":556},[551,2765,714],{"class":667},[551,2767,635],{"class":556},[551,2769,568],{"class":556},[551,2771,2772,2774,2776,2778,2780,2782,2784,2786],{"class":553,"line":721},[551,2773,724],{"class":556},[551,2775,727],{"class":560},[551,2777,730],{"class":564},[551,2779,632],{"class":556},[551,2781,635],{"class":556},[551,2783,737],{"class":593},[551,2785,635],{"class":556},[551,2787,685],{"class":556},[551,2789,2790,2792,2794],{"class":553,"line":744},[551,2791,747],{"class":556},[551,2793,197],{"class":560},[551,2795,568],{"class":556},[551,2797,2798,2800,2802],{"class":553,"line":754},[551,2799,648],{"class":556},[551,2801,759],{"class":560},[551,2803,685],{"class":556},[551,2805,2806,2808,2810,2812,2814,2816,2818,2820,2822,2824,2826,2828,2830,2832,2834],{"class":553,"line":764},[551,2807,648],{"class":556},[551,2809,769],{"class":560},[551,2811,654],{"class":556},[551,2813,657],{"class":564},[551,2815,632],{"class":556},[551,2817,635],{"class":556},[551,2819,664],{"class":556},[551,2821,782],{"class":667},[551,2823,671],{"class":556},[551,2825,714],{"class":667},[551,2827,671],{"class":556},[551,2829,791],{"class":667},[551,2831,680],{"class":556},[551,2833,635],{"class":556},[551,2835,685],{"class":556},[551,2837,2838,2840,2842],{"class":553,"line":800},[551,2839,648],{"class":556},[551,2841,805],{"class":560},[551,2843,685],{"class":556},[551,2845,2846,2848,2850],{"class":553,"line":810},[551,2847,813],{"class":556},[551,2849,626],{"class":560},[551,2851,568],{"class":556},[551,2853,2854,2856,2858],{"class":553,"line":820},[551,2855,603],{"class":556},[551,2857,615],{"class":560},[551,2859,568],{"class":556},[828,2861,2862],{},[512,2863,832],{},[536,2865,836],{"id":835},[841,2867,2868,2878],{},[844,2869,2870],{},[847,2871,2872,2874,2876],{},[850,2873,853],{"align":852},[850,2875,856],{"align":852},[850,2877,859],{},[861,2879,2880,2894,2906,2918,2932,2948,2967,2981,2999,3013,3028,3043,3064,3082,3095,3108,3121,3134,3147,3160,3174,3188,3202,3217,3231,3245],{},[847,2881,2882,2886,2890],{},[866,2883,2884],{"align":852},[869,2885,871],{},[866,2887,2140,2888,2143],{"align":852},[548,2889,1023],{},[866,2891,2892],{},[548,2893,879],{},[847,2895,2896,2900,2902],{},[866,2897,2898],{"align":852},[869,2899,886],{},[866,2901,889],{"align":852},[866,2903,2904],{},[548,2905,894],{},[847,2907,2908,2912,2914],{},[866,2909,2910],{"align":852},[869,2911,901],{},[866,2913,2585],{"align":852},[866,2915,2916],{},[548,2917,894],{},[847,2919,2920,2925,2928],{},[866,2921,2922],{"align":852},[869,2923,2924],{},"target",[866,2926,2927],{"align":852},"The target to orbit around.",[866,2929,2930],{},[548,2931,894],{},[847,2933,2934,2939,2944],{},[866,2935,2936],{"align":852},[869,2937,2938],{},"enableDamping",[866,2940,2140,2941,2943],{"align":852},[548,2942,1023],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[866,2945,2946],{},[548,2947,1023],{},[847,2949,2950,2955,2962],{},[866,2951,2952],{"align":852},[869,2953,2954],{},"dampingFactor",[866,2956,2957,2958,2961],{"align":852},"The damping inertia used if ",[548,2959,2960],{},".enableDamping"," is set to true.",[866,2963,2964],{},[548,2965,2966],{},"0.05",[847,2968,2969,2974,2977],{},[866,2970,2971],{"align":852},[869,2972,2973],{},"autoRotate",[866,2975,2976],{"align":852},"Set to true to automatically rotate around the target.",[866,2978,2979],{},[548,2980,879],{},[847,2982,2983,2988,2995],{},[866,2984,2985],{"align":852},[869,2986,2987],{},"autoRotateSpeed",[866,2989,2990,2991,2994],{"align":852},"How fast to rotate around the target if ",[548,2992,2993],{},".autoRotate"," is true.",[866,2996,2997],{},[548,2998,714],{},[847,3000,3001,3006,3009],{},[866,3002,3003],{"align":852},[869,3004,3005],{},"enablePan",[866,3007,3008],{"align":852},"Whether to enable panning.",[866,3010,3011],{},[548,3012,1023],{},[847,3014,3015,3020,3023],{},[866,3016,3017],{"align":852},[869,3018,3019],{},"keyPanSpeed",[866,3021,3022],{"align":852},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[866,3024,3025],{},[548,3026,3027],{},"7.0",[847,3029,3030,3035,3038],{},[866,3031,3032],{"align":852},[869,3033,3034],{},"keys",[866,3036,3037],{"align":852},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[866,3039,3040],{},[548,3041,3042],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[847,3044,3045,3049,3060],{},[866,3046,3047],{"align":852},[869,3048,959],{},[866,3050,3051,3052,3055,3056,3059],{"align":852},"How far you can orbit horizontally, upper limit. If set, the interval ",[551,3053,3054],{}," min, max"," must be a sub-interval of ",[551,3057,3058],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[866,3061,3062],{},[548,3063,967],{},[847,3065,3066,3070,3078],{},[866,3067,3068],{"align":852},[869,3069,944],{},[866,3071,3072,3073,3055,3075,3077],{"align":852},"How far you can orbit horizontally, lower limit. If set, the interval ",[551,3074,3054],{},[551,3076,3058],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[866,3079,3080],{},[548,3081,952],{},[847,3083,3084,3088,3091],{},[866,3085,3086],{"align":852},[869,3087,929],{},[866,3089,3090],{"align":852},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[866,3092,3093],{},[548,3094,937],{},[847,3096,3097,3101,3104],{},[866,3098,3099],{"align":852},[869,3100,915],{},[866,3102,3103],{"align":852},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[866,3105,3106],{},[548,3107,782],{},[847,3109,3110,3114,3117],{},[866,3111,3112],{"align":852},[869,3113,989],{},[866,3115,3116],{"align":852},"The minimum distance of the camera to the target. Default is 0.",[866,3118,3119],{},[548,3120,782],{},[847,3122,3123,3127,3130],{},[866,3124,3125],{"align":852},[869,3126,1004],{},[866,3128,3129],{"align":852},"The maximum distance of the camera to the target. Default is Infinity.",[866,3131,3132],{},[548,3133,967],{},[847,3135,3136,3140,3143],{},[866,3137,3138],{"align":852},[869,3139,1035],{},[866,3141,3142],{"align":852},"The minimum field of view angle, in radians. Default is 0.",[866,3144,3145],{},[548,3146,782],{},[847,3148,3149,3153,3156],{},[866,3150,3151],{"align":852},[869,3152,1050],{},[866,3154,3155],{"align":852},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[866,3157,3158],{},[548,3159,967],{},[847,3161,3162,3166,3169],{},[866,3163,3164],{"align":852},[869,3165,1298],{},[866,3167,3168],{"align":852},"This object contains references to the touch actions used by the controls.",[866,3170,3171],{},[548,3172,3173],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[847,3175,3176,3180,3183],{},[866,3177,3178],{"align":852},[869,3179,1278],{},[866,3181,3182],{"align":852},"This object contains references to the mouse actions used by the controls. LEFT: Rotate around the target, MIDDLE: Zoom the camera, RIGHT: Pan the camera.",[866,3184,3185],{},[548,3186,3187],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[847,3189,3190,3195,3198],{},[866,3191,3192],{"align":852},[869,3193,3194],{},"enableZoom",[866,3196,3197],{"align":852},"Whether to enable zooming.",[866,3199,3200],{},[548,3201,1023],{},[847,3203,3204,3209,3212],{},[866,3205,3206],{"align":852},[869,3207,3208],{},"zoomSpeed",[866,3210,3211],{"align":852},"How fast to zoom in and out. Default is 1.",[866,3213,3214],{},[548,3215,3216],{},"1",[847,3218,3219,3224,3227],{},[866,3220,3221],{"align":852},[869,3222,3223],{},"enableRotate",[866,3225,3226],{"align":852},"Whether to enable rotating.",[866,3228,3229],{},[548,3230,1023],{},[847,3232,3233,3238,3241],{},[866,3234,3235],{"align":852},[869,3236,3237],{},"rotateSpeed",[866,3239,3240],{"align":852},"How fast to rotate around the target. Default is 1.",[866,3242,3243],{},[548,3244,3216],{},[847,3246,3247,3251,3255],{},[866,3248,3249],{"align":852},[869,3250,2596],{},[866,3252,2599,3253,2602],{"align":852},[548,3254,1023],{},[866,3256,3257],{},[548,3258,1023],{},[536,3260,1781],{"id":1780},[540,3262,3264],{"className":542,"code":3263,"language":546,"meta":484,"style":484},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[548,3265,3266],{"__ignoreMap":484},[551,3267,3268,3270,3272,3274,3276,3278,3280,3282,3284,3286,3288,3290,3292,3294,3296,3298,3300,3302,3304,3306,3308],{"class":553,"line":485},[551,3269,557],{"class":556},[551,3271,524],{"class":560},[551,3273,1795],{"class":556},[551,3275,1798],{"class":564},[551,3277,632],{"class":556},[551,3279,635],{"class":556},[551,3281,1805],{"class":580},[551,3283,635],{"class":556},[551,3285,1795],{"class":556},[551,3287,1812],{"class":564},[551,3289,632],{"class":556},[551,3291,635],{"class":556},[551,3293,1819],{"class":580},[551,3295,635],{"class":556},[551,3297,1795],{"class":556},[551,3299,1826],{"class":564},[551,3301,632],{"class":556},[551,3303,635],{"class":556},[551,3305,1833],{"class":580},[551,3307,635],{"class":556},[551,3309,685],{"class":556},[841,3311,3312,3320],{},[844,3313,3314],{},[847,3315,3316,3318],{},[850,3317,1846],{"align":852},[850,3319,856],{"align":852},[861,3321,3322,3330,3338],{},[847,3323,3324,3328],{},[866,3325,3326],{"align":852},[869,3327,1812],{},[866,3329,1859],{"align":852},[847,3331,3332,3336],{},[866,3333,3334],{"align":852},[869,3335,1798],{},[866,3337,1868],{"align":852},[847,3339,3340,3344],{},[866,3341,3342],{"align":852},[869,3343,1826],{},[866,3345,1877],{"align":852},[1879,3347,1881],{},{"title":484,"searchDepth":485,"depth":486,"links":3349},[3350,3351,3352],{"id":538,"depth":486,"text":15},{"id":835,"depth":486,"text":836},{"id":1780,"depth":486,"text":1781},"Allows you to orbit around the scene",{},{"title":103,"description":3353},"IQCftiJiGyLobGnbQSjgWE8zZkH7Aq-fMxmuEUs6EWI",{"id":3358,"title":107,"body":3359,"description":3711,"extension":489,"links":490,"meta":3712,"navigation":492,"path":108,"seo":3713,"stem":109,"__hash__":3714},"docs/2.api/2.controls/pointer-lock-controls.md",{"type":477,"value":3360,"toc":3706},[3361,3366,3373,3392,3394,3551,3555,3557,3622,3624,3671,3704],[506,3362,3363],{},[3364,3365],"controls-pointer-lock-controls",{},[512,3367,3368,3372],{},[515,3369,1929],{"href":3370,"rel":3371},"https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls",[519]," is a camera controller that allows you to capture the mouse movement and simulate a first person camera. It is a perfect choice for first person 3D games.",[828,3374,3375],{},[512,3376,3377,3378,3391],{},"This control uses the ",[551,3379,3381,3384],{"style":3380},"background-color:#222;padding:0.25rem;border-radius:4px;",[515,3382],{"href":104,"style":3383},"color:#f7f7f7;text-decoration:none",[515,3385,3388],{"href":3386,"rel":3387},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API",[519],[548,3389,3390],{},"Pointer Lock API",", the same rules are applied, for example, you need to interact with the browser to \"lock\" or start the event.\nIn addition, you need to wait 1 second between canceling and re-starting the event",[536,3393,15],{"id":538},[540,3395,3398],{"className":542,"code":3396,"highlights":3397,"language":546,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { PointerLockControls, Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003CBox :position-y=\"0.5\" />\n    \u003CPointerLockControls />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[600,744],[548,3399,3400,3420,3438,3462,3470,3474,3482,3490,3498,3518,3527,3535,3543],{"__ignoreMap":484},[551,3401,3402,3404,3406,3408,3410,3412,3414,3416,3418],{"class":553,"line":485},[551,3403,557],{"class":556},[551,3405,561],{"class":560},[551,3407,565],{"class":564},[551,3409,1353],{"class":564},[551,3411,632],{"class":556},[551,3413,635],{"class":556},[551,3415,1360],{"class":593},[551,3417,635],{"class":556},[551,3419,568],{"class":556},[551,3421,3422,3424,3426,3428,3430,3432,3434,3436],{"class":553,"line":486},[551,3423,574],{"class":573},[551,3425,577],{"class":556},[551,3427,1971],{"class":580},[551,3429,584],{"class":556},[551,3431,587],{"class":573},[551,3433,1387],{"class":556},[551,3435,1980],{"class":593},[551,3437,1392],{"class":556},[551,3439,3441,3443,3445,3448,3450,3452,3454,3456,3458,3460],{"class":3440,"line":600},[553,689],[551,3442,574],{"class":573},[551,3444,577],{"class":556},[551,3446,3447],{"class":580}," PointerLockControls",[551,3449,1378],{"class":556},[551,3451,1997],{"class":580},[551,3453,584],{"class":556},[551,3455,587],{"class":573},[551,3457,1387],{"class":556},[551,3459,594],{"class":593},[551,3461,1392],{"class":556},[551,3463,3464,3466,3468],{"class":553,"line":610},[551,3465,603],{"class":556},[551,3467,561],{"class":560},[551,3469,568],{"class":556},[551,3471,3472],{"class":553,"line":620},[551,3473,1405],{"emptyLinePlaceholder":492},[551,3475,3476,3478,3480],{"class":553,"line":645},[551,3477,557],{"class":556},[551,3479,615],{"class":560},[551,3481,568],{"class":556},[551,3483,3484,3486,3488],{"class":553,"line":545},[551,3485,623],{"class":556},[551,3487,626],{"class":560},[551,3489,568],{"class":556},[551,3491,3492,3494,3496],{"class":553,"line":698},[551,3493,648],{"class":556},[551,3495,651],{"class":560},[551,3497,685],{"class":556},[551,3499,3500,3502,3504,3506,3508,3510,3512,3514,3516],{"class":553,"line":721},[551,3501,648],{"class":556},[551,3503,197],{"class":560},[551,3505,654],{"class":556},[551,3507,2054],{"class":564},[551,3509,632],{"class":556},[551,3511,635],{"class":556},[551,3513,2061],{"class":667},[551,3515,635],{"class":556},[551,3517,685],{"class":556},[551,3519,3521,3523,3525],{"class":3520,"line":744},[553,689],[551,3522,648],{"class":556},[551,3524,1929],{"class":560},[551,3526,685],{"class":556},[551,3528,3529,3531,3533],{"class":553,"line":754},[551,3530,648],{"class":556},[551,3532,805],{"class":560},[551,3534,685],{"class":556},[551,3536,3537,3539,3541],{"class":553,"line":764},[551,3538,813],{"class":556},[551,3540,626],{"class":560},[551,3542,568],{"class":556},[551,3544,3545,3547,3549],{"class":553,"line":800},[551,3546,603],{"class":556},[551,3548,615],{"class":560},[551,3550,568],{"class":556},[828,3552,3553],{},[512,3554,832],{},[536,3556,836],{"id":835},[841,3558,3559,3569],{},[844,3560,3561],{},[847,3562,3563,3565,3567],{},[850,3564,853],{"align":852},[850,3566,856],{"align":852},[850,3568,859],{},[861,3570,3571,3585,3597,3609],{},[847,3572,3573,3577,3581],{},[866,3574,3575],{"align":852},[869,3576,871],{},[866,3578,2140,3579,2143],{"align":852},[548,3580,1023],{},[866,3582,3583],{},[548,3584,879],{},[847,3586,3587,3591,3593],{},[866,3588,3589],{"align":852},[869,3590,886],{},[866,3592,889],{"align":852},[866,3594,3595],{},[548,3596,894],{},[847,3598,3599,3603,3605],{},[866,3600,3601],{"align":852},[869,3602,901],{},[866,3604,2585],{"align":852},[866,3606,3607],{},[548,3608,894],{},[847,3610,3611,3615,3618],{},[866,3612,3613],{"align":852},[869,3614,2178],{},[866,3616,3617],{"align":852},"Accept an id element as string, if it is set, the new element will be used as the trigger",[866,3619,3620],{},[548,3621,894],{},[536,3623,1781],{"id":1780},[540,3625,3627],{"className":542,"code":3626,"language":546,"meta":484,"style":484},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[548,3628,3629],{"__ignoreMap":484},[551,3630,3631,3633,3635,3637,3639,3641,3643,3645,3647,3649,3651,3653,3655,3657,3659,3661,3663,3665,3667,3669],{"class":553,"line":485},[551,3632,557],{"class":556},[551,3634,1929],{"class":560},[551,3636,1795],{"class":556},[551,3638,1798],{"class":564},[551,3640,632],{"class":556},[551,3642,635],{"class":556},[551,3644,1805],{"class":580},[551,3646,635],{"class":556},[551,3648,1795],{"class":556},[551,3650,2215],{"class":564},[551,3652,632],{"class":556},[551,3654,635],{"class":556},[551,3656,2222],{"class":556},[551,3658,2226],{"class":2225},[551,3660,2229],{"class":556},[551,3662,2232],{"class":564},[551,3664,2236],{"class":2235},[551,3666,2239],{"class":580},[551,3668,635],{"class":556},[551,3670,685],{"class":580},[841,3672,3673,3681],{},[844,3674,3675],{},[847,3676,3677,3679],{},[850,3678,1846],{"align":852},[850,3680,856],{"align":852},[861,3682,3683,3696],{},[847,3684,3685,3689],{},[866,3686,3687],{"align":852},[869,3688,2262],{},[866,3690,2265,3691,2268,3693,3695],{"align":852},[548,3692,1023],{},[548,3694,879],{}," if \"unlock\" events are trigger.",[847,3697,3698,3702],{},[866,3699,3700],{"align":852},[869,3701,1798],{},[866,3703,1868],{"align":852},[1879,3705,2282],{},{"title":484,"searchDepth":485,"depth":486,"links":3707},[3708,3709,3710],{"id":538,"depth":486,"text":15},{"id":835,"depth":486,"text":836},{"id":1780,"depth":486,"text":1781},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":107,"description":3711},"D_6d4pTGDPfnlucQrxiFcUWuxhufIMPSU-uRuD7K7M4",{"id":3716,"title":111,"body":3717,"description":4479,"extension":489,"links":490,"meta":4480,"navigation":492,"path":112,"seo":4481,"stem":113,"__hash__":4482},"docs/2.api/2.controls/transform-controls.md",{"type":477,"value":3718,"toc":4469},[3719,3727,3732,3734,3745,4000,4018,4022,4025,4029,4035,4038,4075,4079,4084,4087,4122,4125,4130,4133,4168,4170,4400,4402,4463,4466],[512,3720,3721,3722,3726],{},"The ",[515,3723,111],{"href":3724,"rel":3725},"https://threejs.org/docs/#examples/en/controls/TransformControls",[519]," are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender",[506,3728,3729],{},[3730,3731],"controls-transform-controls",{},[536,3733,15],{"id":538},[512,3735,3736,3737,3740,3741,3744],{},"To use the Transform Controls, simply add the ",[548,3738,3739],{},"TransformControls"," component to your scene. You can pass the ",[548,3742,3743],{},"templateRef","of the instance you want to control as a prop.",[540,3746,3749],{"className":542,"code":3747,"highlights":3748,"language":546,"meta":484,"style":484},"\u003Cscript setup>\nconst boxRef = shallowRef()\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n    \u003COrbitControls make-default />\n    \u003CTransformControls :object=\"boxRef\" />\n    \u003CTresMesh ref=\"boxRef\" :position=\"[0, 4, 0]\" cast-shadow>\n      \u003CTresBoxGeometry :args=\"[1.5, 1.5, 1.5]\" />\n      \u003CTresMeshToonMaterial color=\"#4F4F4F\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[545,698],[548,3750,3751,3761,3777,3785,3793,3801,3841,3853,3876,3923,3957,3976,3984,3992],{"__ignoreMap":484},[551,3752,3753,3755,3757,3759],{"class":553,"line":485},[551,3754,557],{"class":556},[551,3756,561],{"class":560},[551,3758,565],{"class":564},[551,3760,568],{"class":556},[551,3762,3763,3766,3769,3771,3774],{"class":553,"line":486},[551,3764,3765],{"class":564},"const",[551,3767,3768],{"class":580}," boxRef ",[551,3770,632],{"class":556},[551,3772,3773],{"class":2235}," shallowRef",[551,3775,3776],{"class":580},"()\n",[551,3778,3779,3781,3783],{"class":553,"line":600},[551,3780,603],{"class":556},[551,3782,561],{"class":560},[551,3784,568],{"class":556},[551,3786,3787,3789,3791],{"class":553,"line":610},[551,3788,557],{"class":556},[551,3790,615],{"class":560},[551,3792,568],{"class":556},[551,3794,3795,3797,3799],{"class":553,"line":620},[551,3796,623],{"class":556},[551,3798,626],{"class":560},[551,3800,568],{"class":556},[551,3802,3803,3805,3807,3809,3812,3814,3816,3818,3821,3823,3825,3827,3830,3832,3835,3837,3839],{"class":553,"line":645},[551,3804,648],{"class":556},[551,3806,651],{"class":560},[551,3808,654],{"class":556},[551,3810,3811],{"class":564},"args",[551,3813,632],{"class":556},[551,3815,635],{"class":556},[551,3817,664],{"class":556},[551,3819,3820],{"class":667},"45",[551,3822,671],{"class":556},[551,3824,3216],{"class":667},[551,3826,671],{"class":556},[551,3828,3829],{"class":667},"0.1",[551,3831,671],{"class":556},[551,3833,3834],{"class":667},"1000",[551,3836,680],{"class":556},[551,3838,635],{"class":556},[551,3840,685],{"class":556},[551,3842,3844,3846,3848,3851],{"class":3843,"line":545},[553,689],[551,3845,648],{"class":556},[551,3847,524],{"class":560},[551,3849,3850],{"class":564}," make-default",[551,3852,685],{"class":556},[551,3854,3856,3858,3860,3862,3865,3867,3869,3872,3874],{"class":3855,"line":698},[553,689],[551,3857,648],{"class":556},[551,3859,3739],{"class":560},[551,3861,654],{"class":556},[551,3863,3864],{"class":564},"object",[551,3866,632],{"class":556},[551,3868,635],{"class":556},[551,3870,3871],{"class":580},"boxRef",[551,3873,635],{"class":556},[551,3875,685],{"class":556},[551,3877,3878,3880,3883,3886,3888,3890,3892,3894,3896,3898,3900,3902,3904,3906,3908,3910,3912,3914,3916,3918,3921],{"class":553,"line":721},[551,3879,648],{"class":556},[551,3881,3882],{"class":560},"TresMesh",[551,3884,3885],{"class":564}," ref",[551,3887,632],{"class":556},[551,3889,635],{"class":556},[551,3891,3871],{"class":593},[551,3893,635],{"class":556},[551,3895,654],{"class":556},[551,3897,657],{"class":564},[551,3899,632],{"class":556},[551,3901,635],{"class":556},[551,3903,664],{"class":556},[551,3905,782],{"class":667},[551,3907,671],{"class":556},[551,3909,791],{"class":667},[551,3911,671],{"class":556},[551,3913,782],{"class":667},[551,3915,680],{"class":556},[551,3917,635],{"class":556},[551,3919,3920],{"class":564}," cast-shadow",[551,3922,568],{"class":556},[551,3924,3925,3927,3930,3932,3934,3936,3938,3940,3943,3945,3947,3949,3951,3953,3955],{"class":553,"line":744},[551,3926,724],{"class":556},[551,3928,3929],{"class":560},"TresBoxGeometry",[551,3931,654],{"class":556},[551,3933,3811],{"class":564},[551,3935,632],{"class":556},[551,3937,635],{"class":556},[551,3939,664],{"class":556},[551,3941,3942],{"class":667},"1.5",[551,3944,671],{"class":556},[551,3946,3942],{"class":667},[551,3948,671],{"class":556},[551,3950,3942],{"class":667},[551,3952,680],{"class":556},[551,3954,635],{"class":556},[551,3956,685],{"class":556},[551,3958,3959,3961,3963,3965,3967,3969,3972,3974],{"class":553,"line":754},[551,3960,724],{"class":556},[551,3962,727],{"class":560},[551,3964,730],{"class":564},[551,3966,632],{"class":556},[551,3968,635],{"class":556},[551,3970,3971],{"class":593},"#4F4F4F",[551,3973,635],{"class":556},[551,3975,685],{"class":556},[551,3977,3978,3980,3982],{"class":553,"line":764},[551,3979,747],{"class":556},[551,3981,3882],{"class":560},[551,3983,568],{"class":556},[551,3985,3986,3988,3990],{"class":553,"line":800},[551,3987,813],{"class":556},[551,3989,626],{"class":560},[551,3991,568],{"class":556},[551,3993,3994,3996,3998],{"class":553,"line":810},[551,3995,603],{"class":556},[551,3997,615],{"class":560},[551,3999,568],{"class":556},[828,4001,4002],{},[512,4003,4004,4005,4009,4010,4012,4013,4015,4016,534],{},"If you are using other controls ",[551,4006,4007],{"style":3380},[515,4008,524],{"href":104,"style":3383}," they will interfere with each other when dragging. To avoid this, you can set the ",[548,4011,871],{}," prop to ",[548,4014,1023],{}," on the ",[869,4017,524],{},[536,4019,4021],{"id":4020},"modes","Modes",[512,4023,4024],{},"The Transform Controls can be used in three different modes:",[1511,4026,4028],{"id":4027},"translate","Translate",[512,4030,4031],{},[4032,4033],"img",{"alt":4028,"src":4034},"/cientos/transform-controls-translate.png",[512,4036,4037],{},"The default mode allows you to move the object around the scene.",[540,4039,4041],{"className":542,"code":4040,"language":546,"meta":484,"style":484},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" />\n",[548,4042,4043],{"__ignoreMap":484},[551,4044,4045,4047,4049,4052,4054,4056,4058,4060,4062,4064,4066,4068,4071,4073],{"class":553,"line":485},[551,4046,557],{"class":556},[551,4048,3739],{"class":560},[551,4050,4051],{"class":564}," mode",[551,4053,632],{"class":556},[551,4055,635],{"class":556},[551,4057,4027],{"class":593},[551,4059,635],{"class":556},[551,4061,654],{"class":556},[551,4063,3864],{"class":564},[551,4065,632],{"class":556},[551,4067,635],{"class":556},[551,4069,4070],{"class":580},"sphereRef",[551,4072,635],{"class":556},[551,4074,685],{"class":556},[1511,4076,4078],{"id":4077},"rotate","Rotate",[512,4080,4081],{},[4032,4082],{"alt":4078,"src":4083},"/cientos/transform-controls-rotate.png",[512,4085,4086],{},"The rotate mode allows you to rotate the object around the scene.",[540,4088,4090],{"className":542,"code":4089,"language":546,"meta":484,"style":484},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" />\n",[548,4091,4092],{"__ignoreMap":484},[551,4093,4094,4096,4098,4100,4102,4104,4106,4108,4110,4112,4114,4116,4118,4120],{"class":553,"line":485},[551,4095,557],{"class":556},[551,4097,3739],{"class":560},[551,4099,4051],{"class":564},[551,4101,632],{"class":556},[551,4103,635],{"class":556},[551,4105,4077],{"class":593},[551,4107,635],{"class":556},[551,4109,654],{"class":556},[551,4111,3864],{"class":564},[551,4113,632],{"class":556},[551,4115,635],{"class":556},[551,4117,3871],{"class":580},[551,4119,635],{"class":556},[551,4121,685],{"class":556},[1511,4123,4124],{"id":707},"Scale",[512,4126,4127],{},[4032,4128],{"alt":4124,"src":4129},"/cientos/transform-controls-scale.png",[512,4131,4132],{},"The scale mode allows you to scale the object around the scene.",[540,4134,4136],{"className":542,"code":4135,"language":546,"meta":484,"style":484},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\n",[548,4137,4138],{"__ignoreMap":484},[551,4139,4140,4142,4144,4146,4148,4150,4152,4154,4156,4158,4160,4162,4164,4166],{"class":553,"line":485},[551,4141,557],{"class":556},[551,4143,3739],{"class":560},[551,4145,4051],{"class":564},[551,4147,632],{"class":556},[551,4149,635],{"class":556},[551,4151,707],{"class":593},[551,4153,635],{"class":556},[551,4155,654],{"class":556},[551,4157,3864],{"class":564},[551,4159,632],{"class":556},[551,4161,635],{"class":556},[551,4163,4070],{"class":580},[551,4165,635],{"class":556},[551,4167,685],{"class":556},[536,4169,836],{"id":835},[841,4171,4172,4182],{},[844,4173,4174],{},[847,4175,4176,4178,4180],{},[850,4177,853],{"align":852},[850,4179,856],{"align":852},[850,4181,859],{},[861,4183,4184,4204,4225,4241,4276,4296,4310,4324,4338,4352,4368,4384],{},[847,4185,4186,4190,4199],{},[866,4187,4188],{"align":852},[869,4189,3864],{},[866,4191,4192,4193,4198],{"align":852},"The instance ",[515,4194,4197],{"href":4195,"rel":4196},"https://threejs.org/docs/index.html#api/en/core/Object3D",[519],"Object3D"," to control.",[866,4200,4201],{},[548,4202,4203],{},"null",[847,4205,4206,4211,4221],{},[866,4207,4208],{"align":852},[869,4209,4210],{},"mode",[866,4212,4213,4214,671,4216,4218,4219,534],{"align":852},"The mode of the controls. Can be ",[548,4215,4027],{},[548,4217,4077],{}," or ",[548,4220,707],{},[866,4222,4223],{},[548,4224,4027],{},[847,4226,4227,4232,4237],{},[866,4228,4229],{"align":852},[869,4230,4231],{},"enabled",[866,4233,2140,4234,4236],{"align":852},[548,4235,1023],{},", the controls will be enabled.",[866,4238,4239],{},[548,4240,1023],{},[847,4242,4243,4248,4272],{},[866,4244,4245],{"align":852},[869,4246,4247],{},"axis",[866,4249,4250,4251,671,4254,671,4257,671,4260,671,4263,671,4266,671,4269,534],{"align":852},"The axis to use for the controls. Can be ",[548,4252,4253],{},"X",[548,4255,4256],{},"Y",[548,4258,4259],{},"Z",[548,4261,4262],{},"XY",[548,4264,4265],{},"YZ",[548,4267,4268],{},"XZ",[548,4270,4271],{},"XYZ",[866,4273,4274],{},[548,4275,4271],{},[847,4277,4278,4283,4292],{},[866,4279,4280],{"align":852},[869,4281,4282],{},"space",[866,4284,4285,4286,4218,4289,534],{"align":852},"The space to use for the controls. Can be ",[548,4287,4288],{},"local",[548,4290,4291],{},"world",[866,4293,4294],{},[548,4295,4288],{},[847,4297,4298,4303,4306],{},[866,4299,4300],{"align":852},[869,4301,4302],{},"size",[866,4304,4305],{"align":852},"The size of the controls.",[866,4307,4308],{},[548,4309,3216],{},[847,4311,4312,4317,4320],{},[866,4313,4314],{"align":852},[869,4315,4316],{},"translationSnap",[866,4318,4319],{"align":852},"The distance to snap to when translating. (World units)",[866,4321,4322],{},[548,4323,4203],{},[847,4325,4326,4331,4334],{},[866,4327,4328],{"align":852},[869,4329,4330],{},"rotationSnap",[866,4332,4333],{"align":852},"The angle to snap to when rotating. (Radians)",[866,4335,4336],{},[548,4337,4203],{},[847,4339,4340,4345,4348],{},[866,4341,4342],{"align":852},[869,4343,4344],{},"scaleSnap",[866,4346,4347],{"align":852},"The scale to snap to when scaling.",[866,4349,4350],{},[548,4351,4203],{},[847,4353,4354,4359,4364],{},[866,4355,4356],{"align":852},[869,4357,4358],{},"showX",[866,4360,2140,4361,4363],{"align":852},[548,4362,1023],{},", the X-axis helper will be shown.",[866,4365,4366],{},[548,4367,1023],{},[847,4369,4370,4375,4380],{},[866,4371,4372],{"align":852},[869,4373,4374],{},"showY",[866,4376,2140,4377,4379],{"align":852},[548,4378,1023],{},", the Y-axis helper will be shown.",[866,4381,4382],{},[548,4383,1023],{},[847,4385,4386,4391,4396],{},[866,4387,4388],{"align":852},[869,4389,4390],{},"showZ",[866,4392,2140,4393,4395],{"align":852},[548,4394,1023],{},", the Z-axis helper will be shown.",[866,4397,4398],{},[548,4399,1023],{},[536,4401,1781],{"id":1780},[841,4403,4404,4412],{},[844,4405,4406],{},[847,4407,4408,4410],{},[850,4409,1846],{"align":852},[850,4411,856],{"align":852},[861,4413,4414,4424,4433,4443,4453],{},[847,4415,4416,4421],{},[866,4417,4418],{"align":852},[869,4419,4420],{},"dragging",[866,4422,4423],{"align":852},"Fired when the user starts or stops dragging the controls.",[847,4425,4426,4430],{},[866,4427,4428],{"align":852},[869,4429,1798],{},[866,4431,4432],{"align":852},"Fired when the user changes the controls.",[847,4434,4435,4440],{},[866,4436,4437],{"align":852},[869,4438,4439],{},"mouseDown",[866,4441,4442],{"align":852},"Fired when the user clicks on the controls.",[847,4444,4445,4450],{},[866,4446,4447],{"align":852},[869,4448,4449],{},"mouseUp",[866,4451,4452],{"align":852},"Fired when the user releases the mouse button on the controls.",[847,4454,4455,4460],{},[866,4456,4457],{"align":852},[869,4458,4459],{},"objectChange",[866,4461,4462],{"align":852},"Fired when the user changes the object.",[1879,4464,4465],{"scoped":492},"\nimg {\n    aspect-ratio: 16/9;\n    object-fit: cover;\n    object-position: top;\n    border-radius: 8px;\n}\n",[1879,4467,4468],{},"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":484,"searchDepth":485,"depth":486,"links":4470},[4471,4472,4477,4478],{"id":538,"depth":486,"text":15},{"id":4020,"depth":486,"text":4021,"children":4473},[4474,4475,4476],{"id":4027,"depth":600,"text":4028},{"id":4077,"depth":600,"text":4078},{"id":707,"depth":600,"text":4124},{"id":835,"depth":486,"text":836},{"id":1780,"depth":486,"text":1781},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":111,"description":4479},"_oLjZPc3YQUArU7wqNKfUEMez4NtYo2Rc8q7SCJPpVI",1781273441417]