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