[{"data":1,"prerenderedAt":3519},["ShallowReactive",2],{"navigation":3,"/api/composables/use-loop":239,"/api/composables/use-loop-surround":3514},[4,29,78,173,205,215,219,223,227,231,235],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":120,"body":241,"description":3508,"extension":3509,"links":3510,"meta":3511,"navigation":39,"path":121,"seo":3512,"stem":122,"__hash__":3513},"docs/3.api/2.composables/3.use-loop.md",{"type":242,"value":243,"toc":3494},"minimark",[244,256,262,267,286,465,470,478,746,750,756,1239,1243,1253,1447,1471,1476,1479,2389,2428,2432,2440,2692,2700,2769,2775,2783,2790,2811,2815,3490],[245,246,247,248,251,252,255],"p",{},"The ",[249,250,120],"code",{}," composable allows you to register callbacks that run before and after each render cycle, or take complete control of the rendering process within ",[249,253,254],{},"TresCanvas"," components.",[257,258,259],"dotted-diagram",{},[260,261],"diagrams-render-loop",{},[263,264,266],"h2",{"id":265},"usage","Usage",[268,269,270],"warning",{},[245,271,272,274,275,280,281,285],{},[249,273,120],{}," can only be used in child components of a ",[276,277,278],"a",{"href":94},[249,279,254],{}," component, as its data is provided by ",[276,282,283],{"href":94},[249,284,254],{},".",[287,288,293],"pre",{"className":289,"code":290,"language":291,"meta":292,"style":292},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useLoop } from '@tresjs/core'\n\nconst { onBeforeRender, onRender } = useLoop()\n\nonBeforeRender(() => {\n  console.log('before render')\n})\n\nonRender(() => {\n  console.log('after render')\n})\n","ts","",[249,294,295,328,334,364,369,387,412,419,424,438,458],{"__ignoreMap":292},[296,297,300,304,308,312,315,318,321,325],"span",{"class":298,"line":299},"line",1,[296,301,303],{"class":302},"s7zQu","import",[296,305,307],{"class":306},"sMK4o"," {",[296,309,311],{"class":310},"sTEyZ"," useLoop",[296,313,314],{"class":306}," }",[296,316,317],{"class":302}," from",[296,319,320],{"class":306}," '",[296,322,324],{"class":323},"sfazB","@tresjs/core",[296,326,327],{"class":306},"'\n",[296,329,331],{"class":298,"line":330},2,[296,332,333],{"emptyLinePlaceholder":39},"\n",[296,335,337,341,343,346,349,352,355,358,361],{"class":298,"line":336},3,[296,338,340],{"class":339},"spNyl","const",[296,342,307],{"class":306},[296,344,345],{"class":310}," onBeforeRender",[296,347,348],{"class":306},",",[296,350,351],{"class":310}," onRender ",[296,353,354],{"class":306},"}",[296,356,357],{"class":306}," =",[296,359,311],{"class":360},"s2Zo4",[296,362,363],{"class":310},"()\n",[296,365,367],{"class":298,"line":366},4,[296,368,333],{"emptyLinePlaceholder":39},[296,370,372,375,378,381,384],{"class":298,"line":371},5,[296,373,374],{"class":360},"onBeforeRender",[296,376,377],{"class":310},"(",[296,379,380],{"class":306},"()",[296,382,383],{"class":339}," =>",[296,385,386],{"class":306}," {\n",[296,388,390,393,395,398,401,404,407,409],{"class":298,"line":389},6,[296,391,392],{"class":310},"  console",[296,394,285],{"class":306},[296,396,397],{"class":360},"log",[296,399,377],{"class":400},"swJcz",[296,402,403],{"class":306},"'",[296,405,406],{"class":323},"before render",[296,408,403],{"class":306},[296,410,411],{"class":400},")\n",[296,413,415,417],{"class":298,"line":414},7,[296,416,354],{"class":306},[296,418,411],{"class":310},[296,420,422],{"class":298,"line":421},8,[296,423,333],{"emptyLinePlaceholder":39},[296,425,427,430,432,434,436],{"class":298,"line":426},9,[296,428,429],{"class":360},"onRender",[296,431,377],{"class":310},[296,433,380],{"class":306},[296,435,383],{"class":339},[296,437,386],{"class":306},[296,439,441,443,445,447,449,451,454,456],{"class":298,"line":440},10,[296,442,392],{"class":310},[296,444,285],{"class":306},[296,446,397],{"class":360},[296,448,377],{"class":400},[296,450,403],{"class":306},[296,452,453],{"class":323},"after render",[296,455,403],{"class":306},[296,457,411],{"class":400},[296,459,461,463],{"class":298,"line":460},11,[296,462,354],{"class":306},[296,464,411],{"class":310},[466,467,469],"h3",{"id":468},"priority","Priority",[245,471,247,472,474,475,477],{},[249,473,374],{}," and ",[249,476,429],{}," callbacks can be registered with a priority. The priority is a number that determines the order in which the callbacks are executed. The default priority is 0.",[479,480,481,616],"code-group",{},[287,482,484],{"className":289,"code":483,"filename":374,"language":291,"meta":292,"style":292},"onBeforeRender(() => {\n  console.log('earlier before render')\n}, -10)\n\nonBeforeRender(() => {\n  console.log('just before render')\n})\n\nonBeforeRender(() => {\n  console.log('even closer before render')\n}, 10)\n",[249,485,486,498,517,531,535,547,566,572,576,588,607],{"__ignoreMap":292},[296,487,488,490,492,494,496],{"class":298,"line":299},[296,489,374],{"class":360},[296,491,377],{"class":310},[296,493,380],{"class":306},[296,495,383],{"class":339},[296,497,386],{"class":306},[296,499,500,502,504,506,508,510,513,515],{"class":298,"line":330},[296,501,392],{"class":310},[296,503,285],{"class":306},[296,505,397],{"class":360},[296,507,377],{"class":400},[296,509,403],{"class":306},[296,511,512],{"class":323},"earlier before render",[296,514,403],{"class":306},[296,516,411],{"class":400},[296,518,519,522,525,529],{"class":298,"line":336},[296,520,521],{"class":306},"},",[296,523,524],{"class":306}," -",[296,526,528],{"class":527},"sbssI","10",[296,530,411],{"class":310},[296,532,533],{"class":298,"line":366},[296,534,333],{"emptyLinePlaceholder":39},[296,536,537,539,541,543,545],{"class":298,"line":371},[296,538,374],{"class":360},[296,540,377],{"class":310},[296,542,380],{"class":306},[296,544,383],{"class":339},[296,546,386],{"class":306},[296,548,549,551,553,555,557,559,562,564],{"class":298,"line":389},[296,550,392],{"class":310},[296,552,285],{"class":306},[296,554,397],{"class":360},[296,556,377],{"class":400},[296,558,403],{"class":306},[296,560,561],{"class":323},"just before render",[296,563,403],{"class":306},[296,565,411],{"class":400},[296,567,568,570],{"class":298,"line":414},[296,569,354],{"class":306},[296,571,411],{"class":310},[296,573,574],{"class":298,"line":421},[296,575,333],{"emptyLinePlaceholder":39},[296,577,578,580,582,584,586],{"class":298,"line":426},[296,579,374],{"class":360},[296,581,377],{"class":310},[296,583,380],{"class":306},[296,585,383],{"class":339},[296,587,386],{"class":306},[296,589,590,592,594,596,598,600,603,605],{"class":298,"line":440},[296,591,392],{"class":310},[296,593,285],{"class":306},[296,595,397],{"class":360},[296,597,377],{"class":400},[296,599,403],{"class":306},[296,601,602],{"class":323},"even closer before render",[296,604,403],{"class":306},[296,606,411],{"class":400},[296,608,609,611,614],{"class":298,"line":460},[296,610,521],{"class":306},[296,612,613],{"class":527}," 10",[296,615,411],{"class":310},[287,617,619],{"className":289,"code":618,"filename":429,"language":291,"meta":292,"style":292},"onRender(() => {\n  console.log('even closer after render')\n}, -10)\n\nonRender(() => {\n  console.log('just after render')\n})\n\nonRender(() => {\n  console.log('later after render')\n}, 10)\n",[249,620,621,633,652,662,666,678,697,703,707,719,738],{"__ignoreMap":292},[296,622,623,625,627,629,631],{"class":298,"line":299},[296,624,429],{"class":360},[296,626,377],{"class":310},[296,628,380],{"class":306},[296,630,383],{"class":339},[296,632,386],{"class":306},[296,634,635,637,639,641,643,645,648,650],{"class":298,"line":330},[296,636,392],{"class":310},[296,638,285],{"class":306},[296,640,397],{"class":360},[296,642,377],{"class":400},[296,644,403],{"class":306},[296,646,647],{"class":323},"even closer after render",[296,649,403],{"class":306},[296,651,411],{"class":400},[296,653,654,656,658,660],{"class":298,"line":336},[296,655,521],{"class":306},[296,657,524],{"class":306},[296,659,528],{"class":527},[296,661,411],{"class":310},[296,663,664],{"class":298,"line":366},[296,665,333],{"emptyLinePlaceholder":39},[296,667,668,670,672,674,676],{"class":298,"line":371},[296,669,429],{"class":360},[296,671,377],{"class":310},[296,673,380],{"class":306},[296,675,383],{"class":339},[296,677,386],{"class":306},[296,679,680,682,684,686,688,690,693,695],{"class":298,"line":389},[296,681,392],{"class":310},[296,683,285],{"class":306},[296,685,397],{"class":360},[296,687,377],{"class":400},[296,689,403],{"class":306},[296,691,692],{"class":323},"just after render",[296,694,403],{"class":306},[296,696,411],{"class":400},[296,698,699,701],{"class":298,"line":414},[296,700,354],{"class":306},[296,702,411],{"class":310},[296,704,705],{"class":298,"line":421},[296,706,333],{"emptyLinePlaceholder":39},[296,708,709,711,713,715,717],{"class":298,"line":426},[296,710,429],{"class":360},[296,712,377],{"class":310},[296,714,380],{"class":306},[296,716,383],{"class":339},[296,718,386],{"class":306},[296,720,721,723,725,727,729,731,734,736],{"class":298,"line":440},[296,722,392],{"class":310},[296,724,285],{"class":306},[296,726,397],{"class":360},[296,728,377],{"class":400},[296,730,403],{"class":306},[296,732,733],{"class":323},"later after render",[296,735,403],{"class":306},[296,737,411],{"class":400},[296,739,740,742,744],{"class":298,"line":460},[296,741,521],{"class":306},[296,743,613],{"class":527},[296,745,411],{"class":310},[466,747,749],{"id":748},"register-update-callbacks","Register update callbacks",[245,751,752,753,755],{},"The most common use of ",[249,754,374],{}," is to register update callbacks for animations, such as rotating or moving objects in the scene.",[479,757,758,1124],{},[287,759,764],{"className":760,"code":761,"filename":762,"language":763,"meta":292,"style":292},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useLoop } from '@tresjs/core'\n\nconst { onBeforeRender } = useLoop()\n\nconst cube = ref\u003CMesh>()\n\n// Frame-rate independent animation using delta time\nonBeforeRender(({ delta, elapsed }) => {\n  if (cube.value) {\n    // Smooth rotation based on frame time\n    cube.value.rotation.y += delta * 2 // 2 radians per second\n\n    // Oscillating movement based on elapsed time\n    cube.value.position.y = Math.sin(elapsed * 3) * 0.5\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh ref=\"cube\">\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n    \u003CTresMeshNormalMaterial />\n  \u003C/TresMesh>\n\u003C/template>\n","AnimatedCube.vue","vue",[249,765,766,793,811,815,832,836,859,863,869,894,916,921,955,960,966,1012,1018,1025,1035,1040,1050,1071,1095,1105,1115],{"__ignoreMap":292},[296,767,768,771,774,777,780,783,786,788,790],{"class":298,"line":299},[296,769,770],{"class":306},"\u003C",[296,772,773],{"class":400},"script",[296,775,776],{"class":339}," setup",[296,778,779],{"class":339}," lang",[296,781,782],{"class":306},"=",[296,784,785],{"class":306},"\"",[296,787,291],{"class":323},[296,789,785],{"class":306},[296,791,792],{"class":306},">\n",[296,794,795,797,799,801,803,805,807,809],{"class":298,"line":330},[296,796,303],{"class":302},[296,798,307],{"class":306},[296,800,311],{"class":310},[296,802,314],{"class":306},[296,804,317],{"class":302},[296,806,320],{"class":306},[296,808,324],{"class":323},[296,810,327],{"class":306},[296,812,813],{"class":298,"line":336},[296,814,333],{"emptyLinePlaceholder":39},[296,816,817,819,821,824,826,828,830],{"class":298,"line":366},[296,818,340],{"class":339},[296,820,307],{"class":306},[296,822,823],{"class":310}," onBeforeRender ",[296,825,354],{"class":306},[296,827,357],{"class":306},[296,829,311],{"class":360},[296,831,363],{"class":310},[296,833,834],{"class":298,"line":371},[296,835,333],{"emptyLinePlaceholder":39},[296,837,838,840,843,845,848,850,854,857],{"class":298,"line":389},[296,839,340],{"class":339},[296,841,842],{"class":310}," cube ",[296,844,782],{"class":306},[296,846,847],{"class":360}," ref",[296,849,770],{"class":306},[296,851,853],{"class":852},"sBMFI","Mesh",[296,855,856],{"class":306},">",[296,858,363],{"class":310},[296,860,861],{"class":298,"line":414},[296,862,333],{"emptyLinePlaceholder":39},[296,864,865],{"class":298,"line":421},[296,866,868],{"class":867},"sHwdD","// Frame-rate independent animation using delta time\n",[296,870,871,873,875,878,882,884,887,890,892],{"class":298,"line":426},[296,872,374],{"class":360},[296,874,377],{"class":310},[296,876,877],{"class":306},"({",[296,879,881],{"class":880},"sHdIc"," delta",[296,883,348],{"class":306},[296,885,886],{"class":880}," elapsed",[296,888,889],{"class":306}," })",[296,891,383],{"class":339},[296,893,386],{"class":306},[296,895,896,899,902,905,907,910,913],{"class":298,"line":440},[296,897,898],{"class":302},"  if",[296,900,901],{"class":400}," (",[296,903,904],{"class":310},"cube",[296,906,285],{"class":306},[296,908,909],{"class":310},"value",[296,911,912],{"class":400},") ",[296,914,915],{"class":306},"{\n",[296,917,918],{"class":298,"line":460},[296,919,920],{"class":867},"    // Smooth rotation based on frame time\n",[296,922,924,927,929,931,933,936,938,941,944,946,949,952],{"class":298,"line":923},12,[296,925,926],{"class":310},"    cube",[296,928,285],{"class":306},[296,930,909],{"class":310},[296,932,285],{"class":306},[296,934,935],{"class":310},"rotation",[296,937,285],{"class":306},[296,939,940],{"class":310},"y",[296,942,943],{"class":306}," +=",[296,945,881],{"class":310},[296,947,948],{"class":306}," *",[296,950,951],{"class":527}," 2",[296,953,954],{"class":867}," // 2 radians per second\n",[296,956,958],{"class":298,"line":957},13,[296,959,333],{"emptyLinePlaceholder":39},[296,961,963],{"class":298,"line":962},14,[296,964,965],{"class":867},"    // Oscillating movement based on elapsed time\n",[296,967,969,971,973,975,977,980,982,984,986,989,991,994,996,999,1001,1004,1006,1009],{"class":298,"line":968},15,[296,970,926],{"class":310},[296,972,285],{"class":306},[296,974,909],{"class":310},[296,976,285],{"class":306},[296,978,979],{"class":310},"position",[296,981,285],{"class":306},[296,983,940],{"class":310},[296,985,357],{"class":306},[296,987,988],{"class":310}," Math",[296,990,285],{"class":306},[296,992,993],{"class":360},"sin",[296,995,377],{"class":400},[296,997,998],{"class":310},"elapsed",[296,1000,948],{"class":306},[296,1002,1003],{"class":527}," 3",[296,1005,912],{"class":400},[296,1007,1008],{"class":306},"*",[296,1010,1011],{"class":527}," 0.5\n",[296,1013,1015],{"class":298,"line":1014},16,[296,1016,1017],{"class":306},"  }\n",[296,1019,1021,1023],{"class":298,"line":1020},17,[296,1022,354],{"class":306},[296,1024,411],{"class":310},[296,1026,1028,1031,1033],{"class":298,"line":1027},18,[296,1029,1030],{"class":306},"\u003C/",[296,1032,773],{"class":400},[296,1034,792],{"class":306},[296,1036,1038],{"class":298,"line":1037},19,[296,1039,333],{"emptyLinePlaceholder":39},[296,1041,1043,1045,1048],{"class":298,"line":1042},20,[296,1044,770],{"class":306},[296,1046,1047],{"class":400},"template",[296,1049,792],{"class":306},[296,1051,1053,1056,1059,1061,1063,1065,1067,1069],{"class":298,"line":1052},21,[296,1054,1055],{"class":306},"  \u003C",[296,1057,1058],{"class":400},"TresMesh",[296,1060,847],{"class":339},[296,1062,782],{"class":306},[296,1064,785],{"class":306},[296,1066,904],{"class":323},[296,1068,785],{"class":306},[296,1070,792],{"class":306},[296,1072,1074,1077,1080,1083,1085,1087,1090,1092],{"class":298,"line":1073},22,[296,1075,1076],{"class":306},"    \u003C",[296,1078,1079],{"class":400},"TresBoxGeometry",[296,1081,1082],{"class":339}," :args",[296,1084,782],{"class":306},[296,1086,785],{"class":306},[296,1088,1089],{"class":323},"[1, 1, 1]",[296,1091,785],{"class":306},[296,1093,1094],{"class":306}," />\n",[296,1096,1098,1100,1103],{"class":298,"line":1097},23,[296,1099,1076],{"class":306},[296,1101,1102],{"class":400},"TresMeshNormalMaterial",[296,1104,1094],{"class":306},[296,1106,1108,1111,1113],{"class":298,"line":1107},24,[296,1109,1110],{"class":306},"  \u003C/",[296,1112,1058],{"class":400},[296,1114,792],{"class":306},[296,1116,1118,1120,1122],{"class":298,"line":1117},25,[296,1119,1030],{"class":306},[296,1121,1047],{"class":400},[296,1123,792],{"class":306},[287,1125,1128],{"className":760,"code":1126,"filename":1127,"language":763,"meta":292,"style":292},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport AnimatedCube from './AnimatedCube.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CAnimatedCube />\n  \u003C/TresCanvas>\n\u003C/template>\n","App.vue",[249,1129,1130,1150,1169,1186,1194,1198,1206,1214,1223,1231],{"__ignoreMap":292},[296,1131,1132,1134,1136,1138,1140,1142,1144,1146,1148],{"class":298,"line":299},[296,1133,770],{"class":306},[296,1135,773],{"class":400},[296,1137,776],{"class":339},[296,1139,779],{"class":339},[296,1141,782],{"class":306},[296,1143,785],{"class":306},[296,1145,291],{"class":323},[296,1147,785],{"class":306},[296,1149,792],{"class":306},[296,1151,1152,1154,1156,1159,1161,1163,1165,1167],{"class":298,"line":330},[296,1153,303],{"class":302},[296,1155,307],{"class":306},[296,1157,1158],{"class":310}," TresCanvas",[296,1160,314],{"class":306},[296,1162,317],{"class":302},[296,1164,320],{"class":306},[296,1166,324],{"class":323},[296,1168,327],{"class":306},[296,1170,1171,1173,1176,1179,1181,1184],{"class":298,"line":336},[296,1172,303],{"class":302},[296,1174,1175],{"class":310}," AnimatedCube ",[296,1177,1178],{"class":302},"from",[296,1180,320],{"class":306},[296,1182,1183],{"class":323},"./AnimatedCube.vue",[296,1185,327],{"class":306},[296,1187,1188,1190,1192],{"class":298,"line":366},[296,1189,1030],{"class":306},[296,1191,773],{"class":400},[296,1193,792],{"class":306},[296,1195,1196],{"class":298,"line":371},[296,1197,333],{"emptyLinePlaceholder":39},[296,1199,1200,1202,1204],{"class":298,"line":389},[296,1201,770],{"class":306},[296,1203,1047],{"class":400},[296,1205,792],{"class":306},[296,1207,1208,1210,1212],{"class":298,"line":414},[296,1209,1055],{"class":306},[296,1211,254],{"class":400},[296,1213,792],{"class":306},[296,1215,1216,1218,1221],{"class":298,"line":421},[296,1217,1076],{"class":306},[296,1219,1220],{"class":400},"AnimatedCube",[296,1222,1094],{"class":306},[296,1224,1225,1227,1229],{"class":298,"line":426},[296,1226,1110],{"class":306},[296,1228,254],{"class":400},[296,1230,792],{"class":306},[296,1232,1233,1235,1237],{"class":298,"line":440},[296,1234,1030],{"class":306},[296,1236,1047],{"class":400},[296,1238,792],{"class":306},[466,1240,1242],{"id":1241},"take-over-the-render-loop","Take Over the Render Loop",[245,1244,1245,1246,1249,1250,1252],{},"You can take complete control of the rendering process by using the ",[249,1247,1248],{},"render"," method from ",[249,1251,120],{},". This allows you to implement custom rendering logic, post-processing effects, or conditional rendering.",[287,1254,1256],{"className":289,"code":1255,"language":291,"meta":292,"style":292},"import { useLoop, useTresContext } from '@tresjs/core'\n\nconst { render } = useLoop()\nconst { renderer, scene, camera } = useTresContext()\n\n// Take over the render loop with custom logic\nrender((notifySuccess) => {\n  // Your custom rendering logic here\n  if (camera.activeCamera.value) {\n    renderer.instance.render(scene.value, camera.activeCamera.value)\n\n    // IMPORTANT: Call notifySuccess() to indicate the frame was rendered successfully\n    notifySuccess()\n  }\n})\n",[249,1257,1258,1281,1285,1302,1329,1333,1338,1356,1361,1383,1421,1425,1430,1437,1441],{"__ignoreMap":292},[296,1259,1260,1262,1264,1266,1268,1271,1273,1275,1277,1279],{"class":298,"line":299},[296,1261,303],{"class":302},[296,1263,307],{"class":306},[296,1265,311],{"class":310},[296,1267,348],{"class":306},[296,1269,1270],{"class":310}," useTresContext",[296,1272,314],{"class":306},[296,1274,317],{"class":302},[296,1276,320],{"class":306},[296,1278,324],{"class":323},[296,1280,327],{"class":306},[296,1282,1283],{"class":298,"line":330},[296,1284,333],{"emptyLinePlaceholder":39},[296,1286,1287,1289,1291,1294,1296,1298,1300],{"class":298,"line":336},[296,1288,340],{"class":339},[296,1290,307],{"class":306},[296,1292,1293],{"class":310}," render ",[296,1295,354],{"class":306},[296,1297,357],{"class":306},[296,1299,311],{"class":360},[296,1301,363],{"class":310},[296,1303,1304,1306,1308,1311,1313,1316,1318,1321,1323,1325,1327],{"class":298,"line":366},[296,1305,340],{"class":339},[296,1307,307],{"class":306},[296,1309,1310],{"class":310}," renderer",[296,1312,348],{"class":306},[296,1314,1315],{"class":310}," scene",[296,1317,348],{"class":306},[296,1319,1320],{"class":310}," camera ",[296,1322,354],{"class":306},[296,1324,357],{"class":306},[296,1326,1270],{"class":360},[296,1328,363],{"class":310},[296,1330,1331],{"class":298,"line":371},[296,1332,333],{"emptyLinePlaceholder":39},[296,1334,1335],{"class":298,"line":389},[296,1336,1337],{"class":867},"// Take over the render loop with custom logic\n",[296,1339,1340,1342,1344,1346,1349,1352,1354],{"class":298,"line":414},[296,1341,1248],{"class":360},[296,1343,377],{"class":310},[296,1345,377],{"class":306},[296,1347,1348],{"class":880},"notifySuccess",[296,1350,1351],{"class":306},")",[296,1353,383],{"class":339},[296,1355,386],{"class":306},[296,1357,1358],{"class":298,"line":421},[296,1359,1360],{"class":867},"  // Your custom rendering logic here\n",[296,1362,1363,1365,1367,1370,1372,1375,1377,1379,1381],{"class":298,"line":426},[296,1364,898],{"class":302},[296,1366,901],{"class":400},[296,1368,1369],{"class":310},"camera",[296,1371,285],{"class":306},[296,1373,1374],{"class":310},"activeCamera",[296,1376,285],{"class":306},[296,1378,909],{"class":310},[296,1380,912],{"class":400},[296,1382,915],{"class":306},[296,1384,1385,1388,1390,1393,1395,1397,1399,1402,1404,1406,1408,1411,1413,1415,1417,1419],{"class":298,"line":440},[296,1386,1387],{"class":310},"    renderer",[296,1389,285],{"class":306},[296,1391,1392],{"class":310},"instance",[296,1394,285],{"class":306},[296,1396,1248],{"class":360},[296,1398,377],{"class":400},[296,1400,1401],{"class":310},"scene",[296,1403,285],{"class":306},[296,1405,909],{"class":310},[296,1407,348],{"class":306},[296,1409,1410],{"class":310}," camera",[296,1412,285],{"class":306},[296,1414,1374],{"class":310},[296,1416,285],{"class":306},[296,1418,909],{"class":310},[296,1420,411],{"class":400},[296,1422,1423],{"class":298,"line":460},[296,1424,333],{"emptyLinePlaceholder":39},[296,1426,1427],{"class":298,"line":923},[296,1428,1429],{"class":867},"    // IMPORTANT: Call notifySuccess() to indicate the frame was rendered successfully\n",[296,1431,1432,1435],{"class":298,"line":957},[296,1433,1434],{"class":360},"    notifySuccess",[296,1436,363],{"class":400},[296,1438,1439],{"class":298,"line":962},[296,1440,1017],{"class":306},[296,1442,1443,1445],{"class":298,"line":968},[296,1444,354],{"class":306},[296,1446,411],{"class":310},[268,1448,1449],{},[245,1450,1451,1455,1456,1459,1460,1463,1464,1463,1467,1470],{},[1452,1453,1454],"strong",{},"Success Callback Required",": You must call the provided callback (named ",[249,1457,1458],{},"notifySuccess()"," in the example above) to properly notify the render loop that the frame was completed. This is essential for the render modes (",[249,1461,1462],{},"always",", ",[249,1465,1466],{},"on-demand",[249,1468,1469],{},"manual",") to function correctly.",[1472,1473,1475],"h4",{"id":1474},"custom-rendering-examples","Custom Rendering Examples",[245,1477,1478],{},"Here are examples showing different custom rendering scenarios:",[479,1480,1481,1719,2054],{},[287,1482,1485],{"className":760,"code":1483,"filename":1484,"language":763,"meta":292,"style":292},"\u003Cscript setup lang=\"ts\">\nimport { useLoop, useTresContext } from '@tresjs/core'\n\nconst { render } = useLoop()\nconst { renderer, scene, camera } = useTresContext()\n\nconst shouldRender = ref(true)\n\nrender((notifySuccess) => {\n  // Only render when condition is met\n  if (shouldRender.value && camera.activeCamera.value) {\n    renderer.instance.render(scene.value, camera.activeCamera.value)\n  }\n\n  // Always call notifySuccess, even if we didn't render\n  notifySuccess()\n})\n\u003C/script>\n","Conditional Rendering",[249,1486,1487,1507,1529,1533,1549,1573,1577,1596,1600,1616,1621,1651,1685,1689,1693,1698,1705,1711],{"__ignoreMap":292},[296,1488,1489,1491,1493,1495,1497,1499,1501,1503,1505],{"class":298,"line":299},[296,1490,770],{"class":306},[296,1492,773],{"class":400},[296,1494,776],{"class":339},[296,1496,779],{"class":339},[296,1498,782],{"class":306},[296,1500,785],{"class":306},[296,1502,291],{"class":323},[296,1504,785],{"class":306},[296,1506,792],{"class":306},[296,1508,1509,1511,1513,1515,1517,1519,1521,1523,1525,1527],{"class":298,"line":330},[296,1510,303],{"class":302},[296,1512,307],{"class":306},[296,1514,311],{"class":310},[296,1516,348],{"class":306},[296,1518,1270],{"class":310},[296,1520,314],{"class":306},[296,1522,317],{"class":302},[296,1524,320],{"class":306},[296,1526,324],{"class":323},[296,1528,327],{"class":306},[296,1530,1531],{"class":298,"line":336},[296,1532,333],{"emptyLinePlaceholder":39},[296,1534,1535,1537,1539,1541,1543,1545,1547],{"class":298,"line":366},[296,1536,340],{"class":339},[296,1538,307],{"class":306},[296,1540,1293],{"class":310},[296,1542,354],{"class":306},[296,1544,357],{"class":306},[296,1546,311],{"class":360},[296,1548,363],{"class":310},[296,1550,1551,1553,1555,1557,1559,1561,1563,1565,1567,1569,1571],{"class":298,"line":371},[296,1552,340],{"class":339},[296,1554,307],{"class":306},[296,1556,1310],{"class":310},[296,1558,348],{"class":306},[296,1560,1315],{"class":310},[296,1562,348],{"class":306},[296,1564,1320],{"class":310},[296,1566,354],{"class":306},[296,1568,357],{"class":306},[296,1570,1270],{"class":360},[296,1572,363],{"class":310},[296,1574,1575],{"class":298,"line":389},[296,1576,333],{"emptyLinePlaceholder":39},[296,1578,1579,1581,1584,1586,1588,1590,1594],{"class":298,"line":414},[296,1580,340],{"class":339},[296,1582,1583],{"class":310}," shouldRender ",[296,1585,782],{"class":306},[296,1587,847],{"class":360},[296,1589,377],{"class":310},[296,1591,1593],{"class":1592},"sfNiH","true",[296,1595,411],{"class":310},[296,1597,1598],{"class":298,"line":421},[296,1599,333],{"emptyLinePlaceholder":39},[296,1601,1602,1604,1606,1608,1610,1612,1614],{"class":298,"line":426},[296,1603,1248],{"class":360},[296,1605,377],{"class":310},[296,1607,377],{"class":306},[296,1609,1348],{"class":880},[296,1611,1351],{"class":306},[296,1613,383],{"class":339},[296,1615,386],{"class":306},[296,1617,1618],{"class":298,"line":440},[296,1619,1620],{"class":867},"  // Only render when condition is met\n",[296,1622,1623,1625,1627,1630,1632,1634,1637,1639,1641,1643,1645,1647,1649],{"class":298,"line":460},[296,1624,898],{"class":302},[296,1626,901],{"class":400},[296,1628,1629],{"class":310},"shouldRender",[296,1631,285],{"class":306},[296,1633,909],{"class":310},[296,1635,1636],{"class":306}," &&",[296,1638,1410],{"class":310},[296,1640,285],{"class":306},[296,1642,1374],{"class":310},[296,1644,285],{"class":306},[296,1646,909],{"class":310},[296,1648,912],{"class":400},[296,1650,915],{"class":306},[296,1652,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683],{"class":298,"line":923},[296,1654,1387],{"class":310},[296,1656,285],{"class":306},[296,1658,1392],{"class":310},[296,1660,285],{"class":306},[296,1662,1248],{"class":360},[296,1664,377],{"class":400},[296,1666,1401],{"class":310},[296,1668,285],{"class":306},[296,1670,909],{"class":310},[296,1672,348],{"class":306},[296,1674,1410],{"class":310},[296,1676,285],{"class":306},[296,1678,1374],{"class":310},[296,1680,285],{"class":306},[296,1682,909],{"class":310},[296,1684,411],{"class":400},[296,1686,1687],{"class":298,"line":957},[296,1688,1017],{"class":306},[296,1690,1691],{"class":298,"line":962},[296,1692,333],{"emptyLinePlaceholder":39},[296,1694,1695],{"class":298,"line":968},[296,1696,1697],{"class":867},"  // Always call notifySuccess, even if we didn't render\n",[296,1699,1700,1703],{"class":298,"line":1014},[296,1701,1702],{"class":360},"  notifySuccess",[296,1704,363],{"class":400},[296,1706,1707,1709],{"class":298,"line":1020},[296,1708,354],{"class":306},[296,1710,411],{"class":310},[296,1712,1713,1715,1717],{"class":298,"line":1027},[296,1714,1030],{"class":306},[296,1716,773],{"class":400},[296,1718,792],{"class":306},[287,1720,1723],{"className":760,"code":1721,"filename":1722,"language":763,"meta":292,"style":292},"\u003Cscript setup lang=\"ts\">\nimport { useLoop, useTresContext } from '@tresjs/core'\nimport { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'\nimport { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'\n\nconst { render } = useLoop()\nconst { renderer, scene, camera } = useTresContext()\n\n// Setup post-processing composer\nconst composer = new EffectComposer(renderer.instance)\n\nrender((notifySuccess) => {\n  // Initialize composer on first render\n  if (composer.passes.length === 0 && camera.activeCamera.value) {\n    const renderPass = new RenderPass(scene.value, camera.activeCamera.value)\n    composer.addPass(renderPass)\n  }\n\n  // Render with post-processing\n  composer.render()\n\n  // Notify that the frame is complete\n  notifySuccess()\n})\n\u003C/script>\n","Post-processing",[249,1724,1725,1745,1767,1787,1807,1811,1827,1851,1855,1860,1882,1886,1902,1907,1948,1984,2001,2005,2009,2014,2025,2029,2034,2040,2046],{"__ignoreMap":292},[296,1726,1727,1729,1731,1733,1735,1737,1739,1741,1743],{"class":298,"line":299},[296,1728,770],{"class":306},[296,1730,773],{"class":400},[296,1732,776],{"class":339},[296,1734,779],{"class":339},[296,1736,782],{"class":306},[296,1738,785],{"class":306},[296,1740,291],{"class":323},[296,1742,785],{"class":306},[296,1744,792],{"class":306},[296,1746,1747,1749,1751,1753,1755,1757,1759,1761,1763,1765],{"class":298,"line":330},[296,1748,303],{"class":302},[296,1750,307],{"class":306},[296,1752,311],{"class":310},[296,1754,348],{"class":306},[296,1756,1270],{"class":310},[296,1758,314],{"class":306},[296,1760,317],{"class":302},[296,1762,320],{"class":306},[296,1764,324],{"class":323},[296,1766,327],{"class":306},[296,1768,1769,1771,1773,1776,1778,1780,1782,1785],{"class":298,"line":336},[296,1770,303],{"class":302},[296,1772,307],{"class":306},[296,1774,1775],{"class":310}," EffectComposer",[296,1777,314],{"class":306},[296,1779,317],{"class":302},[296,1781,320],{"class":306},[296,1783,1784],{"class":323},"three/examples/jsm/postprocessing/EffectComposer.js",[296,1786,327],{"class":306},[296,1788,1789,1791,1793,1796,1798,1800,1802,1805],{"class":298,"line":366},[296,1790,303],{"class":302},[296,1792,307],{"class":306},[296,1794,1795],{"class":310}," RenderPass",[296,1797,314],{"class":306},[296,1799,317],{"class":302},[296,1801,320],{"class":306},[296,1803,1804],{"class":323},"three/examples/jsm/postprocessing/RenderPass.js",[296,1806,327],{"class":306},[296,1808,1809],{"class":298,"line":371},[296,1810,333],{"emptyLinePlaceholder":39},[296,1812,1813,1815,1817,1819,1821,1823,1825],{"class":298,"line":389},[296,1814,340],{"class":339},[296,1816,307],{"class":306},[296,1818,1293],{"class":310},[296,1820,354],{"class":306},[296,1822,357],{"class":306},[296,1824,311],{"class":360},[296,1826,363],{"class":310},[296,1828,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849],{"class":298,"line":414},[296,1830,340],{"class":339},[296,1832,307],{"class":306},[296,1834,1310],{"class":310},[296,1836,348],{"class":306},[296,1838,1315],{"class":310},[296,1840,348],{"class":306},[296,1842,1320],{"class":310},[296,1844,354],{"class":306},[296,1846,357],{"class":306},[296,1848,1270],{"class":360},[296,1850,363],{"class":310},[296,1852,1853],{"class":298,"line":421},[296,1854,333],{"emptyLinePlaceholder":39},[296,1856,1857],{"class":298,"line":426},[296,1858,1859],{"class":867},"// Setup post-processing composer\n",[296,1861,1862,1864,1867,1869,1872,1874,1877,1879],{"class":298,"line":440},[296,1863,340],{"class":339},[296,1865,1866],{"class":310}," composer ",[296,1868,782],{"class":306},[296,1870,1871],{"class":306}," new",[296,1873,1775],{"class":360},[296,1875,1876],{"class":310},"(renderer",[296,1878,285],{"class":306},[296,1880,1881],{"class":310},"instance)\n",[296,1883,1884],{"class":298,"line":460},[296,1885,333],{"emptyLinePlaceholder":39},[296,1887,1888,1890,1892,1894,1896,1898,1900],{"class":298,"line":923},[296,1889,1248],{"class":360},[296,1891,377],{"class":310},[296,1893,377],{"class":306},[296,1895,1348],{"class":880},[296,1897,1351],{"class":306},[296,1899,383],{"class":339},[296,1901,386],{"class":306},[296,1903,1904],{"class":298,"line":957},[296,1905,1906],{"class":867},"  // Initialize composer on first render\n",[296,1908,1909,1911,1913,1916,1918,1921,1923,1926,1929,1932,1934,1936,1938,1940,1942,1944,1946],{"class":298,"line":962},[296,1910,898],{"class":302},[296,1912,901],{"class":400},[296,1914,1915],{"class":310},"composer",[296,1917,285],{"class":306},[296,1919,1920],{"class":310},"passes",[296,1922,285],{"class":306},[296,1924,1925],{"class":310},"length",[296,1927,1928],{"class":306}," ===",[296,1930,1931],{"class":527}," 0",[296,1933,1636],{"class":306},[296,1935,1410],{"class":310},[296,1937,285],{"class":306},[296,1939,1374],{"class":310},[296,1941,285],{"class":306},[296,1943,909],{"class":310},[296,1945,912],{"class":400},[296,1947,915],{"class":306},[296,1949,1950,1953,1956,1958,1960,1962,1964,1966,1968,1970,1972,1974,1976,1978,1980,1982],{"class":298,"line":968},[296,1951,1952],{"class":339},"    const",[296,1954,1955],{"class":310}," renderPass",[296,1957,357],{"class":306},[296,1959,1871],{"class":306},[296,1961,1795],{"class":360},[296,1963,377],{"class":400},[296,1965,1401],{"class":310},[296,1967,285],{"class":306},[296,1969,909],{"class":310},[296,1971,348],{"class":306},[296,1973,1410],{"class":310},[296,1975,285],{"class":306},[296,1977,1374],{"class":310},[296,1979,285],{"class":306},[296,1981,909],{"class":310},[296,1983,411],{"class":400},[296,1985,1986,1989,1991,1994,1996,1999],{"class":298,"line":1014},[296,1987,1988],{"class":310},"    composer",[296,1990,285],{"class":306},[296,1992,1993],{"class":360},"addPass",[296,1995,377],{"class":400},[296,1997,1998],{"class":310},"renderPass",[296,2000,411],{"class":400},[296,2002,2003],{"class":298,"line":1020},[296,2004,1017],{"class":306},[296,2006,2007],{"class":298,"line":1027},[296,2008,333],{"emptyLinePlaceholder":39},[296,2010,2011],{"class":298,"line":1037},[296,2012,2013],{"class":867},"  // Render with post-processing\n",[296,2015,2016,2019,2021,2023],{"class":298,"line":1042},[296,2017,2018],{"class":310},"  composer",[296,2020,285],{"class":306},[296,2022,1248],{"class":360},[296,2024,363],{"class":400},[296,2026,2027],{"class":298,"line":1052},[296,2028,333],{"emptyLinePlaceholder":39},[296,2030,2031],{"class":298,"line":1073},[296,2032,2033],{"class":867},"  // Notify that the frame is complete\n",[296,2035,2036,2038],{"class":298,"line":1097},[296,2037,1702],{"class":360},[296,2039,363],{"class":400},[296,2041,2042,2044],{"class":298,"line":1107},[296,2043,354],{"class":306},[296,2045,411],{"class":310},[296,2047,2048,2050,2052],{"class":298,"line":1117},[296,2049,1030],{"class":306},[296,2051,773],{"class":400},[296,2053,792],{"class":306},[287,2055,2058],{"className":760,"code":2056,"filename":2057,"language":763,"meta":292,"style":292},"\u003Cscript setup lang=\"ts\">\nimport { useLoop, useTresContext } from '@tresjs/core'\nimport { WebGLRenderTarget } from 'three'\n\nconst { render } = useLoop()\nconst { renderer, scene, camera } = useTresContext()\n\nconst renderTarget = new WebGLRenderTarget(1024, 1024)\n\nrender((notifySuccess) => {\n  if (camera.activeCamera.value) {\n    // First pass: render to texture\n    renderer.instance.setRenderTarget(renderTarget)\n    renderer.instance.render(scene.value, camera.activeCamera.value)\n\n    // Second pass: render to screen\n    renderer.instance.setRenderTarget(null)\n    renderer.instance.render(scene.value, camera.activeCamera.value)\n  }\n\n  // Notify completion\n  notifySuccess()\n})\n\u003C/script>\n","Multi-pass Rendering",[249,2059,2060,2080,2102,2122,2126,2142,2166,2170,2195,2199,2215,2235,2240,2260,2294,2298,2303,2322,2356,2360,2364,2369,2375,2381],{"__ignoreMap":292},[296,2061,2062,2064,2066,2068,2070,2072,2074,2076,2078],{"class":298,"line":299},[296,2063,770],{"class":306},[296,2065,773],{"class":400},[296,2067,776],{"class":339},[296,2069,779],{"class":339},[296,2071,782],{"class":306},[296,2073,785],{"class":306},[296,2075,291],{"class":323},[296,2077,785],{"class":306},[296,2079,792],{"class":306},[296,2081,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100],{"class":298,"line":330},[296,2083,303],{"class":302},[296,2085,307],{"class":306},[296,2087,311],{"class":310},[296,2089,348],{"class":306},[296,2091,1270],{"class":310},[296,2093,314],{"class":306},[296,2095,317],{"class":302},[296,2097,320],{"class":306},[296,2099,324],{"class":323},[296,2101,327],{"class":306},[296,2103,2104,2106,2108,2111,2113,2115,2117,2120],{"class":298,"line":336},[296,2105,303],{"class":302},[296,2107,307],{"class":306},[296,2109,2110],{"class":310}," WebGLRenderTarget",[296,2112,314],{"class":306},[296,2114,317],{"class":302},[296,2116,320],{"class":306},[296,2118,2119],{"class":323},"three",[296,2121,327],{"class":306},[296,2123,2124],{"class":298,"line":366},[296,2125,333],{"emptyLinePlaceholder":39},[296,2127,2128,2130,2132,2134,2136,2138,2140],{"class":298,"line":371},[296,2129,340],{"class":339},[296,2131,307],{"class":306},[296,2133,1293],{"class":310},[296,2135,354],{"class":306},[296,2137,357],{"class":306},[296,2139,311],{"class":360},[296,2141,363],{"class":310},[296,2143,2144,2146,2148,2150,2152,2154,2156,2158,2160,2162,2164],{"class":298,"line":389},[296,2145,340],{"class":339},[296,2147,307],{"class":306},[296,2149,1310],{"class":310},[296,2151,348],{"class":306},[296,2153,1315],{"class":310},[296,2155,348],{"class":306},[296,2157,1320],{"class":310},[296,2159,354],{"class":306},[296,2161,357],{"class":306},[296,2163,1270],{"class":360},[296,2165,363],{"class":310},[296,2167,2168],{"class":298,"line":414},[296,2169,333],{"emptyLinePlaceholder":39},[296,2171,2172,2174,2177,2179,2181,2183,2185,2188,2190,2193],{"class":298,"line":421},[296,2173,340],{"class":339},[296,2175,2176],{"class":310}," renderTarget ",[296,2178,782],{"class":306},[296,2180,1871],{"class":306},[296,2182,2110],{"class":360},[296,2184,377],{"class":310},[296,2186,2187],{"class":527},"1024",[296,2189,348],{"class":306},[296,2191,2192],{"class":527}," 1024",[296,2194,411],{"class":310},[296,2196,2197],{"class":298,"line":426},[296,2198,333],{"emptyLinePlaceholder":39},[296,2200,2201,2203,2205,2207,2209,2211,2213],{"class":298,"line":440},[296,2202,1248],{"class":360},[296,2204,377],{"class":310},[296,2206,377],{"class":306},[296,2208,1348],{"class":880},[296,2210,1351],{"class":306},[296,2212,383],{"class":339},[296,2214,386],{"class":306},[296,2216,2217,2219,2221,2223,2225,2227,2229,2231,2233],{"class":298,"line":460},[296,2218,898],{"class":302},[296,2220,901],{"class":400},[296,2222,1369],{"class":310},[296,2224,285],{"class":306},[296,2226,1374],{"class":310},[296,2228,285],{"class":306},[296,2230,909],{"class":310},[296,2232,912],{"class":400},[296,2234,915],{"class":306},[296,2236,2237],{"class":298,"line":923},[296,2238,2239],{"class":867},"    // First pass: render to texture\n",[296,2241,2242,2244,2246,2248,2250,2253,2255,2258],{"class":298,"line":957},[296,2243,1387],{"class":310},[296,2245,285],{"class":306},[296,2247,1392],{"class":310},[296,2249,285],{"class":306},[296,2251,2252],{"class":360},"setRenderTarget",[296,2254,377],{"class":400},[296,2256,2257],{"class":310},"renderTarget",[296,2259,411],{"class":400},[296,2261,2262,2264,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288,2290,2292],{"class":298,"line":962},[296,2263,1387],{"class":310},[296,2265,285],{"class":306},[296,2267,1392],{"class":310},[296,2269,285],{"class":306},[296,2271,1248],{"class":360},[296,2273,377],{"class":400},[296,2275,1401],{"class":310},[296,2277,285],{"class":306},[296,2279,909],{"class":310},[296,2281,348],{"class":306},[296,2283,1410],{"class":310},[296,2285,285],{"class":306},[296,2287,1374],{"class":310},[296,2289,285],{"class":306},[296,2291,909],{"class":310},[296,2293,411],{"class":400},[296,2295,2296],{"class":298,"line":968},[296,2297,333],{"emptyLinePlaceholder":39},[296,2299,2300],{"class":298,"line":1014},[296,2301,2302],{"class":867},"    // Second pass: render to screen\n",[296,2304,2305,2307,2309,2311,2313,2315,2317,2320],{"class":298,"line":1020},[296,2306,1387],{"class":310},[296,2308,285],{"class":306},[296,2310,1392],{"class":310},[296,2312,285],{"class":306},[296,2314,2252],{"class":360},[296,2316,377],{"class":400},[296,2318,2319],{"class":306},"null",[296,2321,411],{"class":400},[296,2323,2324,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354],{"class":298,"line":1027},[296,2325,1387],{"class":310},[296,2327,285],{"class":306},[296,2329,1392],{"class":310},[296,2331,285],{"class":306},[296,2333,1248],{"class":360},[296,2335,377],{"class":400},[296,2337,1401],{"class":310},[296,2339,285],{"class":306},[296,2341,909],{"class":310},[296,2343,348],{"class":306},[296,2345,1410],{"class":310},[296,2347,285],{"class":306},[296,2349,1374],{"class":310},[296,2351,285],{"class":306},[296,2353,909],{"class":310},[296,2355,411],{"class":400},[296,2357,2358],{"class":298,"line":1037},[296,2359,1017],{"class":306},[296,2361,2362],{"class":298,"line":1042},[296,2363,333],{"emptyLinePlaceholder":39},[296,2365,2366],{"class":298,"line":1052},[296,2367,2368],{"class":867},"  // Notify completion\n",[296,2370,2371,2373],{"class":298,"line":1073},[296,2372,1702],{"class":360},[296,2374,363],{"class":400},[296,2376,2377,2379],{"class":298,"line":1097},[296,2378,354],{"class":306},[296,2380,411],{"class":310},[296,2382,2383,2385,2387],{"class":298,"line":1107},[296,2384,1030],{"class":306},[296,2386,773],{"class":400},[296,2388,792],{"class":306},[268,2390,2391,2394,2418],{},[245,2392,2393],{},"When you take over the render loop, you become responsible for:",[2395,2396,2397,2401,2409,2412,2415],"ul",{},[2398,2399,2400],"li",{},"Manually triggering a render",[2398,2402,2403],{},[1452,2404,2405,2406,2408],{},"Always calling ",[249,2407,1458],{}," at the end of your render function",[2398,2410,2411],{},"Handling conditional rendering logic yourself",[2398,2413,2414],{},"Managing any post-processing effects",[2398,2416,2417],{},"Ensuring proper frame timing and performance",[245,2419,2420,2421,1463,2423,1463,2425,2427],{},"The built-in render modes (",[249,2422,1462],{},[249,2424,1466],{},[249,2426,1469],{},") will be bypassed when using custom rendering.",[263,2429,2431],{"id":2430},"callback-parameters","Callback Parameters",[245,2433,2434,2435,474,2437,2439],{},"Both ",[249,2436,374],{},[249,2438,429],{}," callbacks receive a context object containing timing information and access to the TresJS context:",[287,2441,2443],{"className":289,"code":2442,"language":291,"meta":292,"style":292},"onBeforeRender(({ delta, elapsed, renderer, camera, scene, sizes, invalidate, advance }) => {\n  // Timing information\n  console.log('Time since last frame:', delta) // in seconds\n  console.log('Total elapsed time:', elapsed) // in seconds\n\n  // TresJS context access\n  console.log('Current camera:', camera.value)\n  console.log('Scene:', scene.value)\n  console.log('Canvas size:', sizes.width.value, sizes.height.value)\n\n  // Control methods\n  invalidate() // Mark scene for re-render (useful in on-demand mode)\n  advance() // Manually advance one frame (useful in manual mode)\n})\n",[249,2444,2445,2492,2497,2523,2548,2552,2557,2584,2611,2656,2660,2665,2676,2686],{"__ignoreMap":292},[296,2446,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473,2476,2478,2481,2483,2486,2488,2490],{"class":298,"line":299},[296,2448,374],{"class":360},[296,2450,377],{"class":310},[296,2452,877],{"class":306},[296,2454,881],{"class":880},[296,2456,348],{"class":306},[296,2458,886],{"class":880},[296,2460,348],{"class":306},[296,2462,1310],{"class":880},[296,2464,348],{"class":306},[296,2466,1410],{"class":880},[296,2468,348],{"class":306},[296,2470,1315],{"class":880},[296,2472,348],{"class":306},[296,2474,2475],{"class":880}," sizes",[296,2477,348],{"class":306},[296,2479,2480],{"class":880}," invalidate",[296,2482,348],{"class":306},[296,2484,2485],{"class":880}," advance",[296,2487,889],{"class":306},[296,2489,383],{"class":339},[296,2491,386],{"class":306},[296,2493,2494],{"class":298,"line":330},[296,2495,2496],{"class":867},"  // Timing information\n",[296,2498,2499,2501,2503,2505,2507,2509,2512,2514,2516,2518,2520],{"class":298,"line":336},[296,2500,392],{"class":310},[296,2502,285],{"class":306},[296,2504,397],{"class":360},[296,2506,377],{"class":400},[296,2508,403],{"class":306},[296,2510,2511],{"class":323},"Time since last frame:",[296,2513,403],{"class":306},[296,2515,348],{"class":306},[296,2517,881],{"class":310},[296,2519,912],{"class":400},[296,2521,2522],{"class":867},"// in seconds\n",[296,2524,2525,2527,2529,2531,2533,2535,2538,2540,2542,2544,2546],{"class":298,"line":366},[296,2526,392],{"class":310},[296,2528,285],{"class":306},[296,2530,397],{"class":360},[296,2532,377],{"class":400},[296,2534,403],{"class":306},[296,2536,2537],{"class":323},"Total elapsed time:",[296,2539,403],{"class":306},[296,2541,348],{"class":306},[296,2543,886],{"class":310},[296,2545,912],{"class":400},[296,2547,2522],{"class":867},[296,2549,2550],{"class":298,"line":371},[296,2551,333],{"emptyLinePlaceholder":39},[296,2553,2554],{"class":298,"line":389},[296,2555,2556],{"class":867},"  // TresJS context access\n",[296,2558,2559,2561,2563,2565,2567,2569,2572,2574,2576,2578,2580,2582],{"class":298,"line":414},[296,2560,392],{"class":310},[296,2562,285],{"class":306},[296,2564,397],{"class":360},[296,2566,377],{"class":400},[296,2568,403],{"class":306},[296,2570,2571],{"class":323},"Current camera:",[296,2573,403],{"class":306},[296,2575,348],{"class":306},[296,2577,1410],{"class":310},[296,2579,285],{"class":306},[296,2581,909],{"class":310},[296,2583,411],{"class":400},[296,2585,2586,2588,2590,2592,2594,2596,2599,2601,2603,2605,2607,2609],{"class":298,"line":421},[296,2587,392],{"class":310},[296,2589,285],{"class":306},[296,2591,397],{"class":360},[296,2593,377],{"class":400},[296,2595,403],{"class":306},[296,2597,2598],{"class":323},"Scene:",[296,2600,403],{"class":306},[296,2602,348],{"class":306},[296,2604,1315],{"class":310},[296,2606,285],{"class":306},[296,2608,909],{"class":310},[296,2610,411],{"class":400},[296,2612,2613,2615,2617,2619,2621,2623,2626,2628,2630,2632,2634,2637,2639,2641,2643,2645,2647,2650,2652,2654],{"class":298,"line":426},[296,2614,392],{"class":310},[296,2616,285],{"class":306},[296,2618,397],{"class":360},[296,2620,377],{"class":400},[296,2622,403],{"class":306},[296,2624,2625],{"class":323},"Canvas size:",[296,2627,403],{"class":306},[296,2629,348],{"class":306},[296,2631,2475],{"class":310},[296,2633,285],{"class":306},[296,2635,2636],{"class":310},"width",[296,2638,285],{"class":306},[296,2640,909],{"class":310},[296,2642,348],{"class":306},[296,2644,2475],{"class":310},[296,2646,285],{"class":306},[296,2648,2649],{"class":310},"height",[296,2651,285],{"class":306},[296,2653,909],{"class":310},[296,2655,411],{"class":400},[296,2657,2658],{"class":298,"line":440},[296,2659,333],{"emptyLinePlaceholder":39},[296,2661,2662],{"class":298,"line":460},[296,2663,2664],{"class":867},"  // Control methods\n",[296,2666,2667,2670,2673],{"class":298,"line":923},[296,2668,2669],{"class":360},"  invalidate",[296,2671,2672],{"class":400},"() ",[296,2674,2675],{"class":867},"// Mark scene for re-render (useful in on-demand mode)\n",[296,2677,2678,2681,2683],{"class":298,"line":957},[296,2679,2680],{"class":360},"  advance",[296,2682,2672],{"class":400},[296,2684,2685],{"class":867},"// Manually advance one frame (useful in manual mode)\n",[296,2687,2688,2690],{"class":298,"line":962},[296,2689,354],{"class":306},[296,2691,411],{"class":310},[466,2693,2695,474,2697,2699],{"id":2694},"onbeforerender-and-onrender-parameters",[249,2696,374],{},[249,2698,429],{}," Parameters",[2701,2702,2703,2711,2716,2723,2729,2735,2742,2749,2755,2762],"field-group",{},[2704,2705,2708],"field",{"name":2706,"type":2707},"delta","number",[245,2709,2710],{},"Time in seconds since the last frame. Perfect for frame-rate independent animations.",[2704,2712,2713],{"name":998,"type":2707},[245,2714,2715],{},"Total elapsed time in seconds since the render loop started. Useful for time-based effects.",[2704,2717,2720],{"name":2718,"type":2719},"renderer","TresRenderer",[245,2721,2722],{},"The Three.js WebGL renderer instance. Access to all renderer methods and properties.",[2704,2724,2726],{"name":1369,"type":2725},"ComputedRef\u003CCamera | undefined>",[245,2727,2728],{},"The currently active camera in the scene. Reactive reference that updates when camera changes.",[2704,2730,2732],{"name":1401,"type":2731},"ShallowRef\u003CTresScene>",[245,2733,2734],{},"The Three.js scene object containing all 3D objects.",[2704,2736,2739],{"name":2737,"type":2738},"sizes","SizesType",[245,2740,2741],{},"Reactive size information including width, height, aspect ratio and pixel ratio of the canvas.",[2704,2743,2746],{"name":2744,"type":2745},"invalidate","() => void",[245,2747,2748],{},"Function to mark the scene as needing an update in the next frame. Particularly useful in on-demand rendering mode.",[2704,2750,2752],{"name":2751,"type":2745},"advance",[245,2753,2754],{},"Function to manually advance the render loop by one frame. Especially useful in manual rendering mode.",[2704,2756,2759],{"name":2757,"type":2758},"controls","Ref\u003CTresControl | null>",[245,2760,2761],{},"Reference to the current camera controls (if any). Useful for camera-based animations.",[2704,2763,2766],{"name":2764,"type":2765},"events","EventManager",[245,2767,2768],{},"The event manager instance for handling pointer interactions with 3D objects.",[466,2770,247,2772,2774],{"id":2771},"the-render-method-parameters",[249,2773,1248],{}," Method Parameters",[245,2776,247,2777,2779,2780,2782],{},[249,2778,1248],{}," method takes a function that receives a single ",[249,2781,1348],{}," callback parameter:",[2701,2784,2785],{},[2704,2786,2787],{"name":1348,"type":2745},[245,2788,2789],{},"A callback function that must be called to indicate the frame has been successfully rendered. This is essential for the render loop to function correctly across all render modes.",[2791,2792,2793],"note",{},[245,2794,2795,2798,2799,2801,2802,474,2804,2806,2807,2810],{},[1452,2796,2797],{},"Important",": The ",[249,2800,1248],{}," method does NOT receive a context object like ",[249,2803,374],{},[249,2805,429],{},". Instead, use ",[249,2808,2809],{},"useTres()"," to access the renderer, scene, and camera within your render function.",[263,2812,2814],{"id":2813},"type","Type",[287,2816,2819],{"className":289,"code":2817,"filename":2818,"language":291,"meta":292,"style":292},"function useLoop(): UseLoopReturn\n\ninterface UseLoopReturn {\n  /** Stops the render loop */\n  stop: () => void\n  /** Starts the render loop */\n  start: () => void\n  /** Reactive reference indicating if the loop is currently active */\n  isActive: Ref\u003Cboolean>\n  /** Register a callback to run before each render */\n  onBeforeRender: (fn: LoopCallback, priority?: number) => { off: () => void }\n  /** Register a callback to run after each render */\n  onRender: (fn: LoopCallback, priority?: number) => { off: () => void }\n  /** Take complete control over the rendering process */\n  render: (fn: RenderFunction) => void\n}\n\ntype LoopCallback = (context: LoopContext) => void | Promise\u003Cvoid>\n\ntype RenderFunction = (notifySuccess: () => void) => void\n\ninterface LoopContext {\n  /** Time in seconds since the last frame */\n  delta: number\n  /** Total elapsed time in seconds since render loop started */\n  elapsed: number\n  /** The Three.js WebGL renderer instance */\n  renderer: TresRenderer\n  /** The currently active camera */\n  camera: ComputedRef\u003CCamera | undefined>\n  /** The Three.js scene object */\n  scene: ShallowRef\u003CTresScene>\n  /** Reactive size information for the canvas */\n  sizes: SizesType\n  /** Reference to current camera controls */\n  controls: Ref\u003CTresControl | null>\n  /** TresJS extension function */\n  extend: (objects: any) => void\n  /** Event manager for pointer interactions */\n  events: EventManager\n  /** Mark scene for re-render in on-demand mode */\n  invalidate: () => void\n  /** Manually advance one frame in manual mode */\n  advance: () => void\n}\n\ninterface SizesType {\n  /** Canvas width in pixels */\n  width: Ref\u003Cnumber>\n  /** Canvas height in pixels */\n  height: Ref\u003Cnumber>\n  /** Canvas aspect ratio (width / height) */\n  aspectRatio: Ref\u003Cnumber>\n  /** Device pixel ratio */\n  pixelRatio: Ref\u003Cnumber>\n}\n\ntype TresRenderer = WebGLRenderer | Renderer\n","Signature",[249,2820,2821,2834,2838,2848,2853,2869,2874,2887,2892,2909,2914,2963,2968,3009,3014,3036,3041,3045,3082,3086,3112,3116,3124,3129,3139,3144,3154,3160,3171,3177,3200,3206,3224,3230,3241,3247,3269,3275,3299,3305,3316,3322,3335,3341,3354,3359,3364,3374,3380,3396,3402,3418,3424,3440,3446,3462,3467,3472],{"__ignoreMap":292},[296,2822,2823,2826,2828,2831],{"class":298,"line":299},[296,2824,2825],{"class":339},"function",[296,2827,311],{"class":360},[296,2829,2830],{"class":306},"():",[296,2832,2833],{"class":852}," UseLoopReturn\n",[296,2835,2836],{"class":298,"line":330},[296,2837,333],{"emptyLinePlaceholder":39},[296,2839,2840,2843,2846],{"class":298,"line":336},[296,2841,2842],{"class":339},"interface",[296,2844,2845],{"class":852}," UseLoopReturn",[296,2847,386],{"class":306},[296,2849,2850],{"class":298,"line":366},[296,2851,2852],{"class":867},"  /** Stops the render loop */\n",[296,2854,2855,2858,2861,2864,2866],{"class":298,"line":371},[296,2856,2857],{"class":400},"  stop",[296,2859,2860],{"class":306},":",[296,2862,2863],{"class":306}," ()",[296,2865,383],{"class":339},[296,2867,2868],{"class":852}," void\n",[296,2870,2871],{"class":298,"line":389},[296,2872,2873],{"class":867},"  /** Starts the render loop */\n",[296,2875,2876,2879,2881,2883,2885],{"class":298,"line":414},[296,2877,2878],{"class":400},"  start",[296,2880,2860],{"class":306},[296,2882,2863],{"class":306},[296,2884,383],{"class":339},[296,2886,2868],{"class":852},[296,2888,2889],{"class":298,"line":421},[296,2890,2891],{"class":867},"  /** Reactive reference indicating if the loop is currently active */\n",[296,2893,2894,2897,2899,2902,2904,2907],{"class":298,"line":426},[296,2895,2896],{"class":400},"  isActive",[296,2898,2860],{"class":306},[296,2900,2901],{"class":852}," Ref",[296,2903,770],{"class":306},[296,2905,2906],{"class":852},"boolean",[296,2908,792],{"class":306},[296,2910,2911],{"class":298,"line":440},[296,2912,2913],{"class":867},"  /** Register a callback to run before each render */\n",[296,2915,2916,2919,2921,2923,2926,2928,2931,2933,2936,2939,2942,2944,2946,2948,2951,2953,2955,2957,2960],{"class":298,"line":460},[296,2917,2918],{"class":400},"  onBeforeRender",[296,2920,2860],{"class":306},[296,2922,901],{"class":306},[296,2924,2925],{"class":880},"fn",[296,2927,2860],{"class":306},[296,2929,2930],{"class":852}," LoopCallback",[296,2932,348],{"class":306},[296,2934,2935],{"class":880}," priority",[296,2937,2938],{"class":306},"?:",[296,2940,2941],{"class":852}," number",[296,2943,1351],{"class":306},[296,2945,383],{"class":339},[296,2947,307],{"class":306},[296,2949,2950],{"class":400}," off",[296,2952,2860],{"class":306},[296,2954,2863],{"class":306},[296,2956,383],{"class":339},[296,2958,2959],{"class":852}," void",[296,2961,2962],{"class":306}," }\n",[296,2964,2965],{"class":298,"line":923},[296,2966,2967],{"class":867},"  /** Register a callback to run after each render */\n",[296,2969,2970,2973,2975,2977,2979,2981,2983,2985,2987,2989,2991,2993,2995,2997,2999,3001,3003,3005,3007],{"class":298,"line":957},[296,2971,2972],{"class":400},"  onRender",[296,2974,2860],{"class":306},[296,2976,901],{"class":306},[296,2978,2925],{"class":880},[296,2980,2860],{"class":306},[296,2982,2930],{"class":852},[296,2984,348],{"class":306},[296,2986,2935],{"class":880},[296,2988,2938],{"class":306},[296,2990,2941],{"class":852},[296,2992,1351],{"class":306},[296,2994,383],{"class":339},[296,2996,307],{"class":306},[296,2998,2950],{"class":400},[296,3000,2860],{"class":306},[296,3002,2863],{"class":306},[296,3004,383],{"class":339},[296,3006,2959],{"class":852},[296,3008,2962],{"class":306},[296,3010,3011],{"class":298,"line":962},[296,3012,3013],{"class":867},"  /** Take complete control over the rendering process */\n",[296,3015,3016,3019,3021,3023,3025,3027,3030,3032,3034],{"class":298,"line":968},[296,3017,3018],{"class":400},"  render",[296,3020,2860],{"class":306},[296,3022,901],{"class":306},[296,3024,2925],{"class":880},[296,3026,2860],{"class":306},[296,3028,3029],{"class":852}," RenderFunction",[296,3031,1351],{"class":306},[296,3033,383],{"class":339},[296,3035,2868],{"class":852},[296,3037,3038],{"class":298,"line":1014},[296,3039,3040],{"class":306},"}\n",[296,3042,3043],{"class":298,"line":1020},[296,3044,333],{"emptyLinePlaceholder":39},[296,3046,3047,3049,3051,3053,3055,3058,3060,3063,3065,3067,3069,3072,3075,3077,3080],{"class":298,"line":1027},[296,3048,2813],{"class":339},[296,3050,2930],{"class":852},[296,3052,357],{"class":306},[296,3054,901],{"class":306},[296,3056,3057],{"class":880},"context",[296,3059,2860],{"class":306},[296,3061,3062],{"class":852}," LoopContext",[296,3064,1351],{"class":306},[296,3066,383],{"class":339},[296,3068,2959],{"class":852},[296,3070,3071],{"class":306}," |",[296,3073,3074],{"class":852}," Promise",[296,3076,770],{"class":306},[296,3078,3079],{"class":852},"void",[296,3081,792],{"class":306},[296,3083,3084],{"class":298,"line":1037},[296,3085,333],{"emptyLinePlaceholder":39},[296,3087,3088,3090,3092,3094,3096,3098,3100,3102,3104,3106,3108,3110],{"class":298,"line":1042},[296,3089,2813],{"class":339},[296,3091,3029],{"class":852},[296,3093,357],{"class":306},[296,3095,901],{"class":306},[296,3097,1348],{"class":360},[296,3099,2860],{"class":306},[296,3101,2863],{"class":306},[296,3103,383],{"class":339},[296,3105,2959],{"class":852},[296,3107,1351],{"class":306},[296,3109,383],{"class":339},[296,3111,2868],{"class":852},[296,3113,3114],{"class":298,"line":1052},[296,3115,333],{"emptyLinePlaceholder":39},[296,3117,3118,3120,3122],{"class":298,"line":1073},[296,3119,2842],{"class":339},[296,3121,3062],{"class":852},[296,3123,386],{"class":306},[296,3125,3126],{"class":298,"line":1097},[296,3127,3128],{"class":867},"  /** Time in seconds since the last frame */\n",[296,3130,3131,3134,3136],{"class":298,"line":1107},[296,3132,3133],{"class":400},"  delta",[296,3135,2860],{"class":306},[296,3137,3138],{"class":852}," number\n",[296,3140,3141],{"class":298,"line":1117},[296,3142,3143],{"class":867},"  /** Total elapsed time in seconds since render loop started */\n",[296,3145,3147,3150,3152],{"class":298,"line":3146},26,[296,3148,3149],{"class":400},"  elapsed",[296,3151,2860],{"class":306},[296,3153,3138],{"class":852},[296,3155,3157],{"class":298,"line":3156},27,[296,3158,3159],{"class":867},"  /** The Three.js WebGL renderer instance */\n",[296,3161,3163,3166,3168],{"class":298,"line":3162},28,[296,3164,3165],{"class":400},"  renderer",[296,3167,2860],{"class":306},[296,3169,3170],{"class":852}," TresRenderer\n",[296,3172,3174],{"class":298,"line":3173},29,[296,3175,3176],{"class":867},"  /** The currently active camera */\n",[296,3178,3180,3183,3185,3188,3190,3193,3195,3198],{"class":298,"line":3179},30,[296,3181,3182],{"class":400},"  camera",[296,3184,2860],{"class":306},[296,3186,3187],{"class":852}," ComputedRef",[296,3189,770],{"class":306},[296,3191,3192],{"class":852},"Camera",[296,3194,3071],{"class":306},[296,3196,3197],{"class":852}," undefined",[296,3199,792],{"class":306},[296,3201,3203],{"class":298,"line":3202},31,[296,3204,3205],{"class":867},"  /** The Three.js scene object */\n",[296,3207,3209,3212,3214,3217,3219,3222],{"class":298,"line":3208},32,[296,3210,3211],{"class":400},"  scene",[296,3213,2860],{"class":306},[296,3215,3216],{"class":852}," ShallowRef",[296,3218,770],{"class":306},[296,3220,3221],{"class":852},"TresScene",[296,3223,792],{"class":306},[296,3225,3227],{"class":298,"line":3226},33,[296,3228,3229],{"class":867},"  /** Reactive size information for the canvas */\n",[296,3231,3233,3236,3238],{"class":298,"line":3232},34,[296,3234,3235],{"class":400},"  sizes",[296,3237,2860],{"class":306},[296,3239,3240],{"class":852}," SizesType\n",[296,3242,3244],{"class":298,"line":3243},35,[296,3245,3246],{"class":867},"  /** Reference to current camera controls */\n",[296,3248,3250,3253,3255,3257,3259,3262,3264,3267],{"class":298,"line":3249},36,[296,3251,3252],{"class":400},"  controls",[296,3254,2860],{"class":306},[296,3256,2901],{"class":852},[296,3258,770],{"class":306},[296,3260,3261],{"class":852},"TresControl",[296,3263,3071],{"class":306},[296,3265,3266],{"class":852}," null",[296,3268,792],{"class":306},[296,3270,3272],{"class":298,"line":3271},37,[296,3273,3274],{"class":867},"  /** TresJS extension function */\n",[296,3276,3278,3281,3283,3285,3288,3290,3293,3295,3297],{"class":298,"line":3277},38,[296,3279,3280],{"class":400},"  extend",[296,3282,2860],{"class":306},[296,3284,901],{"class":306},[296,3286,3287],{"class":880},"objects",[296,3289,2860],{"class":306},[296,3291,3292],{"class":852}," any",[296,3294,1351],{"class":306},[296,3296,383],{"class":339},[296,3298,2868],{"class":852},[296,3300,3302],{"class":298,"line":3301},39,[296,3303,3304],{"class":867},"  /** Event manager for pointer interactions */\n",[296,3306,3308,3311,3313],{"class":298,"line":3307},40,[296,3309,3310],{"class":400},"  events",[296,3312,2860],{"class":306},[296,3314,3315],{"class":852}," EventManager\n",[296,3317,3319],{"class":298,"line":3318},41,[296,3320,3321],{"class":867},"  /** Mark scene for re-render in on-demand mode */\n",[296,3323,3325,3327,3329,3331,3333],{"class":298,"line":3324},42,[296,3326,2669],{"class":400},[296,3328,2860],{"class":306},[296,3330,2863],{"class":306},[296,3332,383],{"class":339},[296,3334,2868],{"class":852},[296,3336,3338],{"class":298,"line":3337},43,[296,3339,3340],{"class":867},"  /** Manually advance one frame in manual mode */\n",[296,3342,3344,3346,3348,3350,3352],{"class":298,"line":3343},44,[296,3345,2680],{"class":400},[296,3347,2860],{"class":306},[296,3349,2863],{"class":306},[296,3351,383],{"class":339},[296,3353,2868],{"class":852},[296,3355,3357],{"class":298,"line":3356},45,[296,3358,3040],{"class":306},[296,3360,3362],{"class":298,"line":3361},46,[296,3363,333],{"emptyLinePlaceholder":39},[296,3365,3367,3369,3372],{"class":298,"line":3366},47,[296,3368,2842],{"class":339},[296,3370,3371],{"class":852}," SizesType",[296,3373,386],{"class":306},[296,3375,3377],{"class":298,"line":3376},48,[296,3378,3379],{"class":867},"  /** Canvas width in pixels */\n",[296,3381,3383,3386,3388,3390,3392,3394],{"class":298,"line":3382},49,[296,3384,3385],{"class":400},"  width",[296,3387,2860],{"class":306},[296,3389,2901],{"class":852},[296,3391,770],{"class":306},[296,3393,2707],{"class":852},[296,3395,792],{"class":306},[296,3397,3399],{"class":298,"line":3398},50,[296,3400,3401],{"class":867},"  /** Canvas height in pixels */\n",[296,3403,3405,3408,3410,3412,3414,3416],{"class":298,"line":3404},51,[296,3406,3407],{"class":400},"  height",[296,3409,2860],{"class":306},[296,3411,2901],{"class":852},[296,3413,770],{"class":306},[296,3415,2707],{"class":852},[296,3417,792],{"class":306},[296,3419,3421],{"class":298,"line":3420},52,[296,3422,3423],{"class":867},"  /** Canvas aspect ratio (width / height) */\n",[296,3425,3427,3430,3432,3434,3436,3438],{"class":298,"line":3426},53,[296,3428,3429],{"class":400},"  aspectRatio",[296,3431,2860],{"class":306},[296,3433,2901],{"class":852},[296,3435,770],{"class":306},[296,3437,2707],{"class":852},[296,3439,792],{"class":306},[296,3441,3443],{"class":298,"line":3442},54,[296,3444,3445],{"class":867},"  /** Device pixel ratio */\n",[296,3447,3449,3452,3454,3456,3458,3460],{"class":298,"line":3448},55,[296,3450,3451],{"class":400},"  pixelRatio",[296,3453,2860],{"class":306},[296,3455,2901],{"class":852},[296,3457,770],{"class":306},[296,3459,2707],{"class":852},[296,3461,792],{"class":306},[296,3463,3465],{"class":298,"line":3464},56,[296,3466,3040],{"class":306},[296,3468,3470],{"class":298,"line":3469},57,[296,3471,333],{"emptyLinePlaceholder":39},[296,3473,3475,3477,3480,3482,3485,3487],{"class":298,"line":3474},58,[296,3476,2813],{"class":339},[296,3478,3479],{"class":852}," TresRenderer",[296,3481,357],{"class":306},[296,3483,3484],{"class":852}," WebGLRenderer",[296,3486,3071],{"class":306},[296,3488,3489],{"class":852}," Renderer\n",[3491,3492,3493],"style",{},"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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":292,"searchDepth":299,"depth":330,"links":3495},[3496,3501,3507],{"id":265,"depth":330,"text":266,"children":3497},[3498,3499,3500],{"id":468,"depth":336,"text":469},{"id":748,"depth":336,"text":749},{"id":1241,"depth":336,"text":1242},{"id":2430,"depth":330,"text":2431,"children":3502},[3503,3505],{"id":2694,"depth":336,"text":3504},"onBeforeRender and onRender Parameters",{"id":2771,"depth":336,"text":3506},"The render Method Parameters",{"id":2813,"depth":330,"text":2814},"useLoop provides a convenient access to the render loop of the TresJS scene.","md",null,{},{"title":120,"description":3508},"5fu3NbBvd3PJcsYg6leRlIM-V7mOHnlUS5fcVSObusg",[3515,3517],{"title":116,"path":117,"stem":118,"description":3516,"children":-1},"useTresContext provides a complete access to the TresJS context.",{"title":124,"path":125,"stem":126,"description":3518,"children":-1},"useGraph generates a reactive map of named nodes, materials, and meshes from a Three.js object hierarchy.",1782052332420]