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