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