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