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