[{"data":1,"prerenderedAt":3536},["ShallowReactive",2],{"navigation":3,"/api/composables/use-loop":239,"/api/composables/use-loop-surround":3531},[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":3525,"extension":3526,"links":3527,"meta":3528,"navigation":39,"path":121,"seo":3529,"stem":122,"__hash__":3530},"docs/3.api/2.composables/3.use-loop.md",{"type":242,"value":243,"toc":3511},"minimark",[244,256,262,267,286,465,470,478,746,750,756,1257,1261,1271,1465,1488,1493,1496,2406,2445,2449,2457,2709,2717,2786,2792,2800,2807,2828,2832,3507],[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,1142],{},[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,1113,1123,1133],{"__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,1086,1088,1090,1093,1096,1099,1101,1103,1105,1108,1110],{"class":298,"line":1073},22,[296,1075,1076],{"class":306},"    \u003C",[296,1078,1079],{"class":400},"TresBoxGeometry",[296,1081,1082],{"class":306}," :",[296,1084,1085],{"class":339},"args",[296,1087,782],{"class":306},[296,1089,785],{"class":306},[296,1091,1092],{"class":306},"[",[296,1094,1095],{"class":527},"1",[296,1097,1098],{"class":306},", ",[296,1100,1095],{"class":527},[296,1102,1098],{"class":306},[296,1104,1095],{"class":527},[296,1106,1107],{"class":306},"]",[296,1109,785],{"class":306},[296,1111,1112],{"class":306}," />\n",[296,1114,1116,1118,1121],{"class":298,"line":1115},23,[296,1117,1076],{"class":306},[296,1119,1120],{"class":400},"TresMeshNormalMaterial",[296,1122,1112],{"class":306},[296,1124,1126,1129,1131],{"class":298,"line":1125},24,[296,1127,1128],{"class":306},"  \u003C/",[296,1130,1058],{"class":400},[296,1132,792],{"class":306},[296,1134,1136,1138,1140],{"class":298,"line":1135},25,[296,1137,1030],{"class":306},[296,1139,1047],{"class":400},[296,1141,792],{"class":306},[287,1143,1146],{"className":760,"code":1144,"filename":1145,"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,1147,1148,1168,1187,1204,1212,1216,1224,1232,1241,1249],{"__ignoreMap":292},[296,1149,1150,1152,1154,1156,1158,1160,1162,1164,1166],{"class":298,"line":299},[296,1151,770],{"class":306},[296,1153,773],{"class":400},[296,1155,776],{"class":339},[296,1157,779],{"class":339},[296,1159,782],{"class":306},[296,1161,785],{"class":306},[296,1163,291],{"class":323},[296,1165,785],{"class":306},[296,1167,792],{"class":306},[296,1169,1170,1172,1174,1177,1179,1181,1183,1185],{"class":298,"line":330},[296,1171,303],{"class":302},[296,1173,307],{"class":306},[296,1175,1176],{"class":310}," TresCanvas",[296,1178,314],{"class":306},[296,1180,317],{"class":302},[296,1182,320],{"class":306},[296,1184,324],{"class":323},[296,1186,327],{"class":306},[296,1188,1189,1191,1194,1197,1199,1202],{"class":298,"line":336},[296,1190,303],{"class":302},[296,1192,1193],{"class":310}," AnimatedCube ",[296,1195,1196],{"class":302},"from",[296,1198,320],{"class":306},[296,1200,1201],{"class":323},"./AnimatedCube.vue",[296,1203,327],{"class":306},[296,1205,1206,1208,1210],{"class":298,"line":366},[296,1207,1030],{"class":306},[296,1209,773],{"class":400},[296,1211,792],{"class":306},[296,1213,1214],{"class":298,"line":371},[296,1215,333],{"emptyLinePlaceholder":39},[296,1217,1218,1220,1222],{"class":298,"line":389},[296,1219,770],{"class":306},[296,1221,1047],{"class":400},[296,1223,792],{"class":306},[296,1225,1226,1228,1230],{"class":298,"line":414},[296,1227,1055],{"class":306},[296,1229,254],{"class":400},[296,1231,792],{"class":306},[296,1233,1234,1236,1239],{"class":298,"line":421},[296,1235,1076],{"class":306},[296,1237,1238],{"class":400},"AnimatedCube",[296,1240,1112],{"class":306},[296,1242,1243,1245,1247],{"class":298,"line":426},[296,1244,1128],{"class":306},[296,1246,254],{"class":400},[296,1248,792],{"class":306},[296,1250,1251,1253,1255],{"class":298,"line":440},[296,1252,1030],{"class":306},[296,1254,1047],{"class":400},[296,1256,792],{"class":306},[466,1258,1260],{"id":1259},"take-over-the-render-loop","Take Over the Render Loop",[245,1262,1263,1264,1267,1268,1270],{},"You can take complete control of the rendering process by using the ",[249,1265,1266],{},"render"," method from ",[249,1269,120],{},". This allows you to implement custom rendering logic, post-processing effects, or conditional rendering.",[287,1272,1274],{"className":289,"code":1273,"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,1275,1276,1299,1303,1320,1347,1351,1356,1374,1379,1401,1439,1443,1448,1455,1459],{"__ignoreMap":292},[296,1277,1278,1280,1282,1284,1286,1289,1291,1293,1295,1297],{"class":298,"line":299},[296,1279,303],{"class":302},[296,1281,307],{"class":306},[296,1283,311],{"class":310},[296,1285,348],{"class":306},[296,1287,1288],{"class":310}," useTresContext",[296,1290,314],{"class":306},[296,1292,317],{"class":302},[296,1294,320],{"class":306},[296,1296,324],{"class":323},[296,1298,327],{"class":306},[296,1300,1301],{"class":298,"line":330},[296,1302,333],{"emptyLinePlaceholder":39},[296,1304,1305,1307,1309,1312,1314,1316,1318],{"class":298,"line":336},[296,1306,340],{"class":339},[296,1308,307],{"class":306},[296,1310,1311],{"class":310}," render ",[296,1313,354],{"class":306},[296,1315,357],{"class":306},[296,1317,311],{"class":360},[296,1319,363],{"class":310},[296,1321,1322,1324,1326,1329,1331,1334,1336,1339,1341,1343,1345],{"class":298,"line":366},[296,1323,340],{"class":339},[296,1325,307],{"class":306},[296,1327,1328],{"class":310}," renderer",[296,1330,348],{"class":306},[296,1332,1333],{"class":310}," scene",[296,1335,348],{"class":306},[296,1337,1338],{"class":310}," camera ",[296,1340,354],{"class":306},[296,1342,357],{"class":306},[296,1344,1288],{"class":360},[296,1346,363],{"class":310},[296,1348,1349],{"class":298,"line":371},[296,1350,333],{"emptyLinePlaceholder":39},[296,1352,1353],{"class":298,"line":389},[296,1354,1355],{"class":867},"// Take over the render loop with custom logic\n",[296,1357,1358,1360,1362,1364,1367,1370,1372],{"class":298,"line":414},[296,1359,1266],{"class":360},[296,1361,377],{"class":310},[296,1363,377],{"class":306},[296,1365,1366],{"class":880},"notifySuccess",[296,1368,1369],{"class":306},")",[296,1371,383],{"class":339},[296,1373,386],{"class":306},[296,1375,1376],{"class":298,"line":421},[296,1377,1378],{"class":867},"  // Your custom rendering logic here\n",[296,1380,1381,1383,1385,1388,1390,1393,1395,1397,1399],{"class":298,"line":426},[296,1382,898],{"class":302},[296,1384,901],{"class":400},[296,1386,1387],{"class":310},"camera",[296,1389,285],{"class":306},[296,1391,1392],{"class":310},"activeCamera",[296,1394,285],{"class":306},[296,1396,909],{"class":310},[296,1398,912],{"class":400},[296,1400,915],{"class":306},[296,1402,1403,1406,1408,1411,1413,1415,1417,1420,1422,1424,1426,1429,1431,1433,1435,1437],{"class":298,"line":440},[296,1404,1405],{"class":310},"    renderer",[296,1407,285],{"class":306},[296,1409,1410],{"class":310},"instance",[296,1412,285],{"class":306},[296,1414,1266],{"class":360},[296,1416,377],{"class":400},[296,1418,1419],{"class":310},"scene",[296,1421,285],{"class":306},[296,1423,909],{"class":310},[296,1425,348],{"class":306},[296,1427,1428],{"class":310}," camera",[296,1430,285],{"class":306},[296,1432,1392],{"class":310},[296,1434,285],{"class":306},[296,1436,909],{"class":310},[296,1438,411],{"class":400},[296,1440,1441],{"class":298,"line":460},[296,1442,333],{"emptyLinePlaceholder":39},[296,1444,1445],{"class":298,"line":923},[296,1446,1447],{"class":867},"    // IMPORTANT: Call notifySuccess() to indicate the frame was rendered successfully\n",[296,1449,1450,1453],{"class":298,"line":957},[296,1451,1452],{"class":360},"    notifySuccess",[296,1454,363],{"class":400},[296,1456,1457],{"class":298,"line":962},[296,1458,1017],{"class":306},[296,1460,1461,1463],{"class":298,"line":968},[296,1462,354],{"class":306},[296,1464,411],{"class":310},[268,1466,1467],{},[245,1468,1469,1473,1474,1477,1478,1098,1481,1098,1484,1487],{},[1470,1471,1472],"strong",{},"Success Callback Required",": You must call the provided callback (named ",[249,1475,1476],{},"notifySuccess()"," in the example above) to properly notify the render loop that the frame was completed. This is essential for the render modes (",[249,1479,1480],{},"always",[249,1482,1483],{},"on-demand",[249,1485,1486],{},"manual",") to function correctly.",[1489,1490,1492],"h4",{"id":1491},"custom-rendering-examples","Custom Rendering Examples",[245,1494,1495],{},"Here are examples showing different custom rendering scenarios:",[479,1497,1498,1736,2071],{},[287,1499,1502],{"className":760,"code":1500,"filename":1501,"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,1503,1504,1524,1546,1550,1566,1590,1594,1613,1617,1633,1638,1668,1702,1706,1710,1715,1722,1728],{"__ignoreMap":292},[296,1505,1506,1508,1510,1512,1514,1516,1518,1520,1522],{"class":298,"line":299},[296,1507,770],{"class":306},[296,1509,773],{"class":400},[296,1511,776],{"class":339},[296,1513,779],{"class":339},[296,1515,782],{"class":306},[296,1517,785],{"class":306},[296,1519,291],{"class":323},[296,1521,785],{"class":306},[296,1523,792],{"class":306},[296,1525,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544],{"class":298,"line":330},[296,1527,303],{"class":302},[296,1529,307],{"class":306},[296,1531,311],{"class":310},[296,1533,348],{"class":306},[296,1535,1288],{"class":310},[296,1537,314],{"class":306},[296,1539,317],{"class":302},[296,1541,320],{"class":306},[296,1543,324],{"class":323},[296,1545,327],{"class":306},[296,1547,1548],{"class":298,"line":336},[296,1549,333],{"emptyLinePlaceholder":39},[296,1551,1552,1554,1556,1558,1560,1562,1564],{"class":298,"line":366},[296,1553,340],{"class":339},[296,1555,307],{"class":306},[296,1557,1311],{"class":310},[296,1559,354],{"class":306},[296,1561,357],{"class":306},[296,1563,311],{"class":360},[296,1565,363],{"class":310},[296,1567,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588],{"class":298,"line":371},[296,1569,340],{"class":339},[296,1571,307],{"class":306},[296,1573,1328],{"class":310},[296,1575,348],{"class":306},[296,1577,1333],{"class":310},[296,1579,348],{"class":306},[296,1581,1338],{"class":310},[296,1583,354],{"class":306},[296,1585,357],{"class":306},[296,1587,1288],{"class":360},[296,1589,363],{"class":310},[296,1591,1592],{"class":298,"line":389},[296,1593,333],{"emptyLinePlaceholder":39},[296,1595,1596,1598,1601,1603,1605,1607,1611],{"class":298,"line":414},[296,1597,340],{"class":339},[296,1599,1600],{"class":310}," shouldRender ",[296,1602,782],{"class":306},[296,1604,847],{"class":360},[296,1606,377],{"class":310},[296,1608,1610],{"class":1609},"sfNiH","true",[296,1612,411],{"class":310},[296,1614,1615],{"class":298,"line":421},[296,1616,333],{"emptyLinePlaceholder":39},[296,1618,1619,1621,1623,1625,1627,1629,1631],{"class":298,"line":426},[296,1620,1266],{"class":360},[296,1622,377],{"class":310},[296,1624,377],{"class":306},[296,1626,1366],{"class":880},[296,1628,1369],{"class":306},[296,1630,383],{"class":339},[296,1632,386],{"class":306},[296,1634,1635],{"class":298,"line":440},[296,1636,1637],{"class":867},"  // Only render when condition is met\n",[296,1639,1640,1642,1644,1647,1649,1651,1654,1656,1658,1660,1662,1664,1666],{"class":298,"line":460},[296,1641,898],{"class":302},[296,1643,901],{"class":400},[296,1645,1646],{"class":310},"shouldRender",[296,1648,285],{"class":306},[296,1650,909],{"class":310},[296,1652,1653],{"class":306}," &&",[296,1655,1428],{"class":310},[296,1657,285],{"class":306},[296,1659,1392],{"class":310},[296,1661,285],{"class":306},[296,1663,909],{"class":310},[296,1665,912],{"class":400},[296,1667,915],{"class":306},[296,1669,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700],{"class":298,"line":923},[296,1671,1405],{"class":310},[296,1673,285],{"class":306},[296,1675,1410],{"class":310},[296,1677,285],{"class":306},[296,1679,1266],{"class":360},[296,1681,377],{"class":400},[296,1683,1419],{"class":310},[296,1685,285],{"class":306},[296,1687,909],{"class":310},[296,1689,348],{"class":306},[296,1691,1428],{"class":310},[296,1693,285],{"class":306},[296,1695,1392],{"class":310},[296,1697,285],{"class":306},[296,1699,909],{"class":310},[296,1701,411],{"class":400},[296,1703,1704],{"class":298,"line":957},[296,1705,1017],{"class":306},[296,1707,1708],{"class":298,"line":962},[296,1709,333],{"emptyLinePlaceholder":39},[296,1711,1712],{"class":298,"line":968},[296,1713,1714],{"class":867},"  // Always call notifySuccess, even if we didn't render\n",[296,1716,1717,1720],{"class":298,"line":1014},[296,1718,1719],{"class":360},"  notifySuccess",[296,1721,363],{"class":400},[296,1723,1724,1726],{"class":298,"line":1020},[296,1725,354],{"class":306},[296,1727,411],{"class":310},[296,1729,1730,1732,1734],{"class":298,"line":1027},[296,1731,1030],{"class":306},[296,1733,773],{"class":400},[296,1735,792],{"class":306},[287,1737,1740],{"className":760,"code":1738,"filename":1739,"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,1741,1742,1762,1784,1804,1824,1828,1844,1868,1872,1877,1899,1903,1919,1924,1965,2001,2018,2022,2026,2031,2042,2046,2051,2057,2063],{"__ignoreMap":292},[296,1743,1744,1746,1748,1750,1752,1754,1756,1758,1760],{"class":298,"line":299},[296,1745,770],{"class":306},[296,1747,773],{"class":400},[296,1749,776],{"class":339},[296,1751,779],{"class":339},[296,1753,782],{"class":306},[296,1755,785],{"class":306},[296,1757,291],{"class":323},[296,1759,785],{"class":306},[296,1761,792],{"class":306},[296,1763,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782],{"class":298,"line":330},[296,1765,303],{"class":302},[296,1767,307],{"class":306},[296,1769,311],{"class":310},[296,1771,348],{"class":306},[296,1773,1288],{"class":310},[296,1775,314],{"class":306},[296,1777,317],{"class":302},[296,1779,320],{"class":306},[296,1781,324],{"class":323},[296,1783,327],{"class":306},[296,1785,1786,1788,1790,1793,1795,1797,1799,1802],{"class":298,"line":336},[296,1787,303],{"class":302},[296,1789,307],{"class":306},[296,1791,1792],{"class":310}," EffectComposer",[296,1794,314],{"class":306},[296,1796,317],{"class":302},[296,1798,320],{"class":306},[296,1800,1801],{"class":323},"three/examples/jsm/postprocessing/EffectComposer.js",[296,1803,327],{"class":306},[296,1805,1806,1808,1810,1813,1815,1817,1819,1822],{"class":298,"line":366},[296,1807,303],{"class":302},[296,1809,307],{"class":306},[296,1811,1812],{"class":310}," RenderPass",[296,1814,314],{"class":306},[296,1816,317],{"class":302},[296,1818,320],{"class":306},[296,1820,1821],{"class":323},"three/examples/jsm/postprocessing/RenderPass.js",[296,1823,327],{"class":306},[296,1825,1826],{"class":298,"line":371},[296,1827,333],{"emptyLinePlaceholder":39},[296,1829,1830,1832,1834,1836,1838,1840,1842],{"class":298,"line":389},[296,1831,340],{"class":339},[296,1833,307],{"class":306},[296,1835,1311],{"class":310},[296,1837,354],{"class":306},[296,1839,357],{"class":306},[296,1841,311],{"class":360},[296,1843,363],{"class":310},[296,1845,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866],{"class":298,"line":414},[296,1847,340],{"class":339},[296,1849,307],{"class":306},[296,1851,1328],{"class":310},[296,1853,348],{"class":306},[296,1855,1333],{"class":310},[296,1857,348],{"class":306},[296,1859,1338],{"class":310},[296,1861,354],{"class":306},[296,1863,357],{"class":306},[296,1865,1288],{"class":360},[296,1867,363],{"class":310},[296,1869,1870],{"class":298,"line":421},[296,1871,333],{"emptyLinePlaceholder":39},[296,1873,1874],{"class":298,"line":426},[296,1875,1876],{"class":867},"// Setup post-processing composer\n",[296,1878,1879,1881,1884,1886,1889,1891,1894,1896],{"class":298,"line":440},[296,1880,340],{"class":339},[296,1882,1883],{"class":310}," composer ",[296,1885,782],{"class":306},[296,1887,1888],{"class":306}," new",[296,1890,1792],{"class":360},[296,1892,1893],{"class":310},"(renderer",[296,1895,285],{"class":306},[296,1897,1898],{"class":310},"instance)\n",[296,1900,1901],{"class":298,"line":460},[296,1902,333],{"emptyLinePlaceholder":39},[296,1904,1905,1907,1909,1911,1913,1915,1917],{"class":298,"line":923},[296,1906,1266],{"class":360},[296,1908,377],{"class":310},[296,1910,377],{"class":306},[296,1912,1366],{"class":880},[296,1914,1369],{"class":306},[296,1916,383],{"class":339},[296,1918,386],{"class":306},[296,1920,1921],{"class":298,"line":957},[296,1922,1923],{"class":867},"  // Initialize composer on first render\n",[296,1925,1926,1928,1930,1933,1935,1938,1940,1943,1946,1949,1951,1953,1955,1957,1959,1961,1963],{"class":298,"line":962},[296,1927,898],{"class":302},[296,1929,901],{"class":400},[296,1931,1932],{"class":310},"composer",[296,1934,285],{"class":306},[296,1936,1937],{"class":310},"passes",[296,1939,285],{"class":306},[296,1941,1942],{"class":310},"length",[296,1944,1945],{"class":306}," ===",[296,1947,1948],{"class":527}," 0",[296,1950,1653],{"class":306},[296,1952,1428],{"class":310},[296,1954,285],{"class":306},[296,1956,1392],{"class":310},[296,1958,285],{"class":306},[296,1960,909],{"class":310},[296,1962,912],{"class":400},[296,1964,915],{"class":306},[296,1966,1967,1970,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999],{"class":298,"line":968},[296,1968,1969],{"class":339},"    const",[296,1971,1972],{"class":310}," renderPass",[296,1974,357],{"class":306},[296,1976,1888],{"class":306},[296,1978,1812],{"class":360},[296,1980,377],{"class":400},[296,1982,1419],{"class":310},[296,1984,285],{"class":306},[296,1986,909],{"class":310},[296,1988,348],{"class":306},[296,1990,1428],{"class":310},[296,1992,285],{"class":306},[296,1994,1392],{"class":310},[296,1996,285],{"class":306},[296,1998,909],{"class":310},[296,2000,411],{"class":400},[296,2002,2003,2006,2008,2011,2013,2016],{"class":298,"line":1014},[296,2004,2005],{"class":310},"    composer",[296,2007,285],{"class":306},[296,2009,2010],{"class":360},"addPass",[296,2012,377],{"class":400},[296,2014,2015],{"class":310},"renderPass",[296,2017,411],{"class":400},[296,2019,2020],{"class":298,"line":1020},[296,2021,1017],{"class":306},[296,2023,2024],{"class":298,"line":1027},[296,2025,333],{"emptyLinePlaceholder":39},[296,2027,2028],{"class":298,"line":1037},[296,2029,2030],{"class":867},"  // Render with post-processing\n",[296,2032,2033,2036,2038,2040],{"class":298,"line":1042},[296,2034,2035],{"class":310},"  composer",[296,2037,285],{"class":306},[296,2039,1266],{"class":360},[296,2041,363],{"class":400},[296,2043,2044],{"class":298,"line":1052},[296,2045,333],{"emptyLinePlaceholder":39},[296,2047,2048],{"class":298,"line":1073},[296,2049,2050],{"class":867},"  // Notify that the frame is complete\n",[296,2052,2053,2055],{"class":298,"line":1115},[296,2054,1719],{"class":360},[296,2056,363],{"class":400},[296,2058,2059,2061],{"class":298,"line":1125},[296,2060,354],{"class":306},[296,2062,411],{"class":310},[296,2064,2065,2067,2069],{"class":298,"line":1135},[296,2066,1030],{"class":306},[296,2068,773],{"class":400},[296,2070,792],{"class":306},[287,2072,2075],{"className":760,"code":2073,"filename":2074,"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,2076,2077,2097,2119,2139,2143,2159,2183,2187,2212,2216,2232,2252,2257,2277,2311,2315,2320,2339,2373,2377,2381,2386,2392,2398],{"__ignoreMap":292},[296,2078,2079,2081,2083,2085,2087,2089,2091,2093,2095],{"class":298,"line":299},[296,2080,770],{"class":306},[296,2082,773],{"class":400},[296,2084,776],{"class":339},[296,2086,779],{"class":339},[296,2088,782],{"class":306},[296,2090,785],{"class":306},[296,2092,291],{"class":323},[296,2094,785],{"class":306},[296,2096,792],{"class":306},[296,2098,2099,2101,2103,2105,2107,2109,2111,2113,2115,2117],{"class":298,"line":330},[296,2100,303],{"class":302},[296,2102,307],{"class":306},[296,2104,311],{"class":310},[296,2106,348],{"class":306},[296,2108,1288],{"class":310},[296,2110,314],{"class":306},[296,2112,317],{"class":302},[296,2114,320],{"class":306},[296,2116,324],{"class":323},[296,2118,327],{"class":306},[296,2120,2121,2123,2125,2128,2130,2132,2134,2137],{"class":298,"line":336},[296,2122,303],{"class":302},[296,2124,307],{"class":306},[296,2126,2127],{"class":310}," WebGLRenderTarget",[296,2129,314],{"class":306},[296,2131,317],{"class":302},[296,2133,320],{"class":306},[296,2135,2136],{"class":323},"three",[296,2138,327],{"class":306},[296,2140,2141],{"class":298,"line":366},[296,2142,333],{"emptyLinePlaceholder":39},[296,2144,2145,2147,2149,2151,2153,2155,2157],{"class":298,"line":371},[296,2146,340],{"class":339},[296,2148,307],{"class":306},[296,2150,1311],{"class":310},[296,2152,354],{"class":306},[296,2154,357],{"class":306},[296,2156,311],{"class":360},[296,2158,363],{"class":310},[296,2160,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179,2181],{"class":298,"line":389},[296,2162,340],{"class":339},[296,2164,307],{"class":306},[296,2166,1328],{"class":310},[296,2168,348],{"class":306},[296,2170,1333],{"class":310},[296,2172,348],{"class":306},[296,2174,1338],{"class":310},[296,2176,354],{"class":306},[296,2178,357],{"class":306},[296,2180,1288],{"class":360},[296,2182,363],{"class":310},[296,2184,2185],{"class":298,"line":414},[296,2186,333],{"emptyLinePlaceholder":39},[296,2188,2189,2191,2194,2196,2198,2200,2202,2205,2207,2210],{"class":298,"line":421},[296,2190,340],{"class":339},[296,2192,2193],{"class":310}," renderTarget ",[296,2195,782],{"class":306},[296,2197,1888],{"class":306},[296,2199,2127],{"class":360},[296,2201,377],{"class":310},[296,2203,2204],{"class":527},"1024",[296,2206,348],{"class":306},[296,2208,2209],{"class":527}," 1024",[296,2211,411],{"class":310},[296,2213,2214],{"class":298,"line":426},[296,2215,333],{"emptyLinePlaceholder":39},[296,2217,2218,2220,2222,2224,2226,2228,2230],{"class":298,"line":440},[296,2219,1266],{"class":360},[296,2221,377],{"class":310},[296,2223,377],{"class":306},[296,2225,1366],{"class":880},[296,2227,1369],{"class":306},[296,2229,383],{"class":339},[296,2231,386],{"class":306},[296,2233,2234,2236,2238,2240,2242,2244,2246,2248,2250],{"class":298,"line":460},[296,2235,898],{"class":302},[296,2237,901],{"class":400},[296,2239,1387],{"class":310},[296,2241,285],{"class":306},[296,2243,1392],{"class":310},[296,2245,285],{"class":306},[296,2247,909],{"class":310},[296,2249,912],{"class":400},[296,2251,915],{"class":306},[296,2253,2254],{"class":298,"line":923},[296,2255,2256],{"class":867},"    // First pass: render to texture\n",[296,2258,2259,2261,2263,2265,2267,2270,2272,2275],{"class":298,"line":957},[296,2260,1405],{"class":310},[296,2262,285],{"class":306},[296,2264,1410],{"class":310},[296,2266,285],{"class":306},[296,2268,2269],{"class":360},"setRenderTarget",[296,2271,377],{"class":400},[296,2273,2274],{"class":310},"renderTarget",[296,2276,411],{"class":400},[296,2278,2279,2281,2283,2285,2287,2289,2291,2293,2295,2297,2299,2301,2303,2305,2307,2309],{"class":298,"line":962},[296,2280,1405],{"class":310},[296,2282,285],{"class":306},[296,2284,1410],{"class":310},[296,2286,285],{"class":306},[296,2288,1266],{"class":360},[296,2290,377],{"class":400},[296,2292,1419],{"class":310},[296,2294,285],{"class":306},[296,2296,909],{"class":310},[296,2298,348],{"class":306},[296,2300,1428],{"class":310},[296,2302,285],{"class":306},[296,2304,1392],{"class":310},[296,2306,285],{"class":306},[296,2308,909],{"class":310},[296,2310,411],{"class":400},[296,2312,2313],{"class":298,"line":968},[296,2314,333],{"emptyLinePlaceholder":39},[296,2316,2317],{"class":298,"line":1014},[296,2318,2319],{"class":867},"    // Second pass: render to screen\n",[296,2321,2322,2324,2326,2328,2330,2332,2334,2337],{"class":298,"line":1020},[296,2323,1405],{"class":310},[296,2325,285],{"class":306},[296,2327,1410],{"class":310},[296,2329,285],{"class":306},[296,2331,2269],{"class":360},[296,2333,377],{"class":400},[296,2335,2336],{"class":306},"null",[296,2338,411],{"class":400},[296,2340,2341,2343,2345,2347,2349,2351,2353,2355,2357,2359,2361,2363,2365,2367,2369,2371],{"class":298,"line":1027},[296,2342,1405],{"class":310},[296,2344,285],{"class":306},[296,2346,1410],{"class":310},[296,2348,285],{"class":306},[296,2350,1266],{"class":360},[296,2352,377],{"class":400},[296,2354,1419],{"class":310},[296,2356,285],{"class":306},[296,2358,909],{"class":310},[296,2360,348],{"class":306},[296,2362,1428],{"class":310},[296,2364,285],{"class":306},[296,2366,1392],{"class":310},[296,2368,285],{"class":306},[296,2370,909],{"class":310},[296,2372,411],{"class":400},[296,2374,2375],{"class":298,"line":1037},[296,2376,1017],{"class":306},[296,2378,2379],{"class":298,"line":1042},[296,2380,333],{"emptyLinePlaceholder":39},[296,2382,2383],{"class":298,"line":1052},[296,2384,2385],{"class":867},"  // Notify completion\n",[296,2387,2388,2390],{"class":298,"line":1073},[296,2389,1719],{"class":360},[296,2391,363],{"class":400},[296,2393,2394,2396],{"class":298,"line":1115},[296,2395,354],{"class":306},[296,2397,411],{"class":310},[296,2399,2400,2402,2404],{"class":298,"line":1125},[296,2401,1030],{"class":306},[296,2403,773],{"class":400},[296,2405,792],{"class":306},[268,2407,2408,2411,2435],{},[245,2409,2410],{},"When you take over the render loop, you become responsible for:",[2412,2413,2414,2418,2426,2429,2432],"ul",{},[2415,2416,2417],"li",{},"Manually triggering a render",[2415,2419,2420],{},[1470,2421,2422,2423,2425],{},"Always calling ",[249,2424,1476],{}," at the end of your render function",[2415,2427,2428],{},"Handling conditional rendering logic yourself",[2415,2430,2431],{},"Managing any post-processing effects",[2415,2433,2434],{},"Ensuring proper frame timing and performance",[245,2436,2437,2438,1098,2440,1098,2442,2444],{},"The built-in render modes (",[249,2439,1480],{},[249,2441,1483],{},[249,2443,1486],{},") will be bypassed when using custom rendering.",[263,2446,2448],{"id":2447},"callback-parameters","Callback Parameters",[245,2450,2451,2452,474,2454,2456],{},"Both ",[249,2453,374],{},[249,2455,429],{}," callbacks receive a context object containing timing information and access to the TresJS context:",[287,2458,2460],{"className":289,"code":2459,"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,2461,2462,2509,2514,2540,2565,2569,2574,2601,2628,2673,2677,2682,2693,2703],{"__ignoreMap":292},[296,2463,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2493,2495,2498,2500,2503,2505,2507],{"class":298,"line":299},[296,2465,374],{"class":360},[296,2467,377],{"class":310},[296,2469,877],{"class":306},[296,2471,881],{"class":880},[296,2473,348],{"class":306},[296,2475,886],{"class":880},[296,2477,348],{"class":306},[296,2479,1328],{"class":880},[296,2481,348],{"class":306},[296,2483,1428],{"class":880},[296,2485,348],{"class":306},[296,2487,1333],{"class":880},[296,2489,348],{"class":306},[296,2491,2492],{"class":880}," sizes",[296,2494,348],{"class":306},[296,2496,2497],{"class":880}," invalidate",[296,2499,348],{"class":306},[296,2501,2502],{"class":880}," advance",[296,2504,889],{"class":306},[296,2506,383],{"class":339},[296,2508,386],{"class":306},[296,2510,2511],{"class":298,"line":330},[296,2512,2513],{"class":867},"  // Timing information\n",[296,2515,2516,2518,2520,2522,2524,2526,2529,2531,2533,2535,2537],{"class":298,"line":336},[296,2517,392],{"class":310},[296,2519,285],{"class":306},[296,2521,397],{"class":360},[296,2523,377],{"class":400},[296,2525,403],{"class":306},[296,2527,2528],{"class":323},"Time since last frame:",[296,2530,403],{"class":306},[296,2532,348],{"class":306},[296,2534,881],{"class":310},[296,2536,912],{"class":400},[296,2538,2539],{"class":867},"// in seconds\n",[296,2541,2542,2544,2546,2548,2550,2552,2555,2557,2559,2561,2563],{"class":298,"line":366},[296,2543,392],{"class":310},[296,2545,285],{"class":306},[296,2547,397],{"class":360},[296,2549,377],{"class":400},[296,2551,403],{"class":306},[296,2553,2554],{"class":323},"Total elapsed time:",[296,2556,403],{"class":306},[296,2558,348],{"class":306},[296,2560,886],{"class":310},[296,2562,912],{"class":400},[296,2564,2539],{"class":867},[296,2566,2567],{"class":298,"line":371},[296,2568,333],{"emptyLinePlaceholder":39},[296,2570,2571],{"class":298,"line":389},[296,2572,2573],{"class":867},"  // TresJS context access\n",[296,2575,2576,2578,2580,2582,2584,2586,2589,2591,2593,2595,2597,2599],{"class":298,"line":414},[296,2577,392],{"class":310},[296,2579,285],{"class":306},[296,2581,397],{"class":360},[296,2583,377],{"class":400},[296,2585,403],{"class":306},[296,2587,2588],{"class":323},"Current camera:",[296,2590,403],{"class":306},[296,2592,348],{"class":306},[296,2594,1428],{"class":310},[296,2596,285],{"class":306},[296,2598,909],{"class":310},[296,2600,411],{"class":400},[296,2602,2603,2605,2607,2609,2611,2613,2616,2618,2620,2622,2624,2626],{"class":298,"line":421},[296,2604,392],{"class":310},[296,2606,285],{"class":306},[296,2608,397],{"class":360},[296,2610,377],{"class":400},[296,2612,403],{"class":306},[296,2614,2615],{"class":323},"Scene:",[296,2617,403],{"class":306},[296,2619,348],{"class":306},[296,2621,1333],{"class":310},[296,2623,285],{"class":306},[296,2625,909],{"class":310},[296,2627,411],{"class":400},[296,2629,2630,2632,2634,2636,2638,2640,2643,2645,2647,2649,2651,2654,2656,2658,2660,2662,2664,2667,2669,2671],{"class":298,"line":426},[296,2631,392],{"class":310},[296,2633,285],{"class":306},[296,2635,397],{"class":360},[296,2637,377],{"class":400},[296,2639,403],{"class":306},[296,2641,2642],{"class":323},"Canvas size:",[296,2644,403],{"class":306},[296,2646,348],{"class":306},[296,2648,2492],{"class":310},[296,2650,285],{"class":306},[296,2652,2653],{"class":310},"width",[296,2655,285],{"class":306},[296,2657,909],{"class":310},[296,2659,348],{"class":306},[296,2661,2492],{"class":310},[296,2663,285],{"class":306},[296,2665,2666],{"class":310},"height",[296,2668,285],{"class":306},[296,2670,909],{"class":310},[296,2672,411],{"class":400},[296,2674,2675],{"class":298,"line":440},[296,2676,333],{"emptyLinePlaceholder":39},[296,2678,2679],{"class":298,"line":460},[296,2680,2681],{"class":867},"  // Control methods\n",[296,2683,2684,2687,2690],{"class":298,"line":923},[296,2685,2686],{"class":360},"  invalidate",[296,2688,2689],{"class":400},"() ",[296,2691,2692],{"class":867},"// Mark scene for re-render (useful in on-demand mode)\n",[296,2694,2695,2698,2700],{"class":298,"line":957},[296,2696,2697],{"class":360},"  advance",[296,2699,2689],{"class":400},[296,2701,2702],{"class":867},"// Manually advance one frame (useful in manual mode)\n",[296,2704,2705,2707],{"class":298,"line":962},[296,2706,354],{"class":306},[296,2708,411],{"class":310},[466,2710,2712,474,2714,2716],{"id":2711},"onbeforerender-and-onrender-parameters",[249,2713,374],{},[249,2715,429],{}," Parameters",[2718,2719,2720,2728,2733,2740,2746,2752,2759,2766,2772,2779],"field-group",{},[2721,2722,2725],"field",{"name":2723,"type":2724},"delta","number",[245,2726,2727],{},"Time in seconds since the last frame. Perfect for frame-rate independent animations.",[2721,2729,2730],{"name":998,"type":2724},[245,2731,2732],{},"Total elapsed time in seconds since the render loop started. Useful for time-based effects.",[2721,2734,2737],{"name":2735,"type":2736},"renderer","TresRenderer",[245,2738,2739],{},"The Three.js WebGL renderer instance. Access to all renderer methods and properties.",[2721,2741,2743],{"name":1387,"type":2742},"ComputedRef\u003CCamera | undefined>",[245,2744,2745],{},"The currently active camera in the scene. Reactive reference that updates when camera changes.",[2721,2747,2749],{"name":1419,"type":2748},"ShallowRef\u003CTresScene>",[245,2750,2751],{},"The Three.js scene object containing all 3D objects.",[2721,2753,2756],{"name":2754,"type":2755},"sizes","SizesType",[245,2757,2758],{},"Reactive size information including width, height, aspect ratio and pixel ratio of the canvas.",[2721,2760,2763],{"name":2761,"type":2762},"invalidate","() => void",[245,2764,2765],{},"Function to mark the scene as needing an update in the next frame. Particularly useful in on-demand rendering mode.",[2721,2767,2769],{"name":2768,"type":2762},"advance",[245,2770,2771],{},"Function to manually advance the render loop by one frame. Especially useful in manual rendering mode.",[2721,2773,2776],{"name":2774,"type":2775},"controls","Ref\u003CTresControl | null>",[245,2777,2778],{},"Reference to the current camera controls (if any). Useful for camera-based animations.",[2721,2780,2783],{"name":2781,"type":2782},"events","EventManager",[245,2784,2785],{},"The event manager instance for handling pointer interactions with 3D objects.",[466,2787,247,2789,2791],{"id":2788},"the-render-method-parameters",[249,2790,1266],{}," Method Parameters",[245,2793,247,2794,2796,2797,2799],{},[249,2795,1266],{}," method takes a function that receives a single ",[249,2798,1366],{}," callback parameter:",[2718,2801,2802],{},[2721,2803,2804],{"name":1366,"type":2762},[245,2805,2806],{},"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.",[2808,2809,2810],"note",{},[245,2811,2812,2815,2816,2818,2819,474,2821,2823,2824,2827],{},[1470,2813,2814],{},"Important",": The ",[249,2817,1266],{}," method does NOT receive a context object like ",[249,2820,374],{},[249,2822,429],{},". Instead, use ",[249,2825,2826],{},"useTres()"," to access the renderer, scene, and camera within your render function.",[263,2829,2831],{"id":2830},"type","Type",[287,2833,2836],{"className":289,"code":2834,"filename":2835,"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,2837,2838,2851,2855,2865,2870,2886,2891,2904,2909,2926,2931,2980,2985,3026,3031,3053,3058,3062,3099,3103,3129,3133,3141,3146,3156,3161,3171,3177,3188,3194,3217,3223,3241,3247,3258,3264,3286,3292,3316,3322,3333,3339,3352,3358,3371,3376,3381,3391,3397,3413,3419,3435,3441,3457,3463,3479,3484,3489],{"__ignoreMap":292},[296,2839,2840,2843,2845,2848],{"class":298,"line":299},[296,2841,2842],{"class":339},"function",[296,2844,311],{"class":360},[296,2846,2847],{"class":306},"():",[296,2849,2850],{"class":852}," UseLoopReturn\n",[296,2852,2853],{"class":298,"line":330},[296,2854,333],{"emptyLinePlaceholder":39},[296,2856,2857,2860,2863],{"class":298,"line":336},[296,2858,2859],{"class":339},"interface",[296,2861,2862],{"class":852}," UseLoopReturn",[296,2864,386],{"class":306},[296,2866,2867],{"class":298,"line":366},[296,2868,2869],{"class":867},"  /** Stops the render loop */\n",[296,2871,2872,2875,2878,2881,2883],{"class":298,"line":371},[296,2873,2874],{"class":400},"  stop",[296,2876,2877],{"class":306},":",[296,2879,2880],{"class":306}," ()",[296,2882,383],{"class":339},[296,2884,2885],{"class":852}," void\n",[296,2887,2888],{"class":298,"line":389},[296,2889,2890],{"class":867},"  /** Starts the render loop */\n",[296,2892,2893,2896,2898,2900,2902],{"class":298,"line":414},[296,2894,2895],{"class":400},"  start",[296,2897,2877],{"class":306},[296,2899,2880],{"class":306},[296,2901,383],{"class":339},[296,2903,2885],{"class":852},[296,2905,2906],{"class":298,"line":421},[296,2907,2908],{"class":867},"  /** Reactive reference indicating if the loop is currently active */\n",[296,2910,2911,2914,2916,2919,2921,2924],{"class":298,"line":426},[296,2912,2913],{"class":400},"  isActive",[296,2915,2877],{"class":306},[296,2917,2918],{"class":852}," Ref",[296,2920,770],{"class":306},[296,2922,2923],{"class":852},"boolean",[296,2925,792],{"class":306},[296,2927,2928],{"class":298,"line":440},[296,2929,2930],{"class":867},"  /** Register a callback to run before each render */\n",[296,2932,2933,2936,2938,2940,2943,2945,2948,2950,2953,2956,2959,2961,2963,2965,2968,2970,2972,2974,2977],{"class":298,"line":460},[296,2934,2935],{"class":400},"  onBeforeRender",[296,2937,2877],{"class":306},[296,2939,901],{"class":306},[296,2941,2942],{"class":880},"fn",[296,2944,2877],{"class":306},[296,2946,2947],{"class":852}," LoopCallback",[296,2949,348],{"class":306},[296,2951,2952],{"class":880}," priority",[296,2954,2955],{"class":306},"?:",[296,2957,2958],{"class":852}," number",[296,2960,1369],{"class":306},[296,2962,383],{"class":339},[296,2964,307],{"class":306},[296,2966,2967],{"class":400}," off",[296,2969,2877],{"class":306},[296,2971,2880],{"class":306},[296,2973,383],{"class":339},[296,2975,2976],{"class":852}," void",[296,2978,2979],{"class":306}," }\n",[296,2981,2982],{"class":298,"line":923},[296,2983,2984],{"class":867},"  /** Register a callback to run after each render */\n",[296,2986,2987,2990,2992,2994,2996,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024],{"class":298,"line":957},[296,2988,2989],{"class":400},"  onRender",[296,2991,2877],{"class":306},[296,2993,901],{"class":306},[296,2995,2942],{"class":880},[296,2997,2877],{"class":306},[296,2999,2947],{"class":852},[296,3001,348],{"class":306},[296,3003,2952],{"class":880},[296,3005,2955],{"class":306},[296,3007,2958],{"class":852},[296,3009,1369],{"class":306},[296,3011,383],{"class":339},[296,3013,307],{"class":306},[296,3015,2967],{"class":400},[296,3017,2877],{"class":306},[296,3019,2880],{"class":306},[296,3021,383],{"class":339},[296,3023,2976],{"class":852},[296,3025,2979],{"class":306},[296,3027,3028],{"class":298,"line":962},[296,3029,3030],{"class":867},"  /** Take complete control over the rendering process */\n",[296,3032,3033,3036,3038,3040,3042,3044,3047,3049,3051],{"class":298,"line":968},[296,3034,3035],{"class":400},"  render",[296,3037,2877],{"class":306},[296,3039,901],{"class":306},[296,3041,2942],{"class":880},[296,3043,2877],{"class":306},[296,3045,3046],{"class":852}," RenderFunction",[296,3048,1369],{"class":306},[296,3050,383],{"class":339},[296,3052,2885],{"class":852},[296,3054,3055],{"class":298,"line":1014},[296,3056,3057],{"class":306},"}\n",[296,3059,3060],{"class":298,"line":1020},[296,3061,333],{"emptyLinePlaceholder":39},[296,3063,3064,3066,3068,3070,3072,3075,3077,3080,3082,3084,3086,3089,3092,3094,3097],{"class":298,"line":1027},[296,3065,2830],{"class":339},[296,3067,2947],{"class":852},[296,3069,357],{"class":306},[296,3071,901],{"class":306},[296,3073,3074],{"class":880},"context",[296,3076,2877],{"class":306},[296,3078,3079],{"class":852}," LoopContext",[296,3081,1369],{"class":306},[296,3083,383],{"class":339},[296,3085,2976],{"class":852},[296,3087,3088],{"class":306}," |",[296,3090,3091],{"class":852}," Promise",[296,3093,770],{"class":306},[296,3095,3096],{"class":852},"void",[296,3098,792],{"class":306},[296,3100,3101],{"class":298,"line":1037},[296,3102,333],{"emptyLinePlaceholder":39},[296,3104,3105,3107,3109,3111,3113,3115,3117,3119,3121,3123,3125,3127],{"class":298,"line":1042},[296,3106,2830],{"class":339},[296,3108,3046],{"class":852},[296,3110,357],{"class":306},[296,3112,901],{"class":306},[296,3114,1366],{"class":360},[296,3116,2877],{"class":306},[296,3118,2880],{"class":306},[296,3120,383],{"class":339},[296,3122,2976],{"class":852},[296,3124,1369],{"class":306},[296,3126,383],{"class":339},[296,3128,2885],{"class":852},[296,3130,3131],{"class":298,"line":1052},[296,3132,333],{"emptyLinePlaceholder":39},[296,3134,3135,3137,3139],{"class":298,"line":1073},[296,3136,2859],{"class":339},[296,3138,3079],{"class":852},[296,3140,386],{"class":306},[296,3142,3143],{"class":298,"line":1115},[296,3144,3145],{"class":867},"  /** Time in seconds since the last frame */\n",[296,3147,3148,3151,3153],{"class":298,"line":1125},[296,3149,3150],{"class":400},"  delta",[296,3152,2877],{"class":306},[296,3154,3155],{"class":852}," number\n",[296,3157,3158],{"class":298,"line":1135},[296,3159,3160],{"class":867},"  /** Total elapsed time in seconds since render loop started */\n",[296,3162,3164,3167,3169],{"class":298,"line":3163},26,[296,3165,3166],{"class":400},"  elapsed",[296,3168,2877],{"class":306},[296,3170,3155],{"class":852},[296,3172,3174],{"class":298,"line":3173},27,[296,3175,3176],{"class":867},"  /** The Three.js WebGL renderer instance */\n",[296,3178,3180,3183,3185],{"class":298,"line":3179},28,[296,3181,3182],{"class":400},"  renderer",[296,3184,2877],{"class":306},[296,3186,3187],{"class":852}," TresRenderer\n",[296,3189,3191],{"class":298,"line":3190},29,[296,3192,3193],{"class":867},"  /** The currently active camera */\n",[296,3195,3197,3200,3202,3205,3207,3210,3212,3215],{"class":298,"line":3196},30,[296,3198,3199],{"class":400},"  camera",[296,3201,2877],{"class":306},[296,3203,3204],{"class":852}," ComputedRef",[296,3206,770],{"class":306},[296,3208,3209],{"class":852},"Camera",[296,3211,3088],{"class":306},[296,3213,3214],{"class":852}," undefined",[296,3216,792],{"class":306},[296,3218,3220],{"class":298,"line":3219},31,[296,3221,3222],{"class":867},"  /** The Three.js scene object */\n",[296,3224,3226,3229,3231,3234,3236,3239],{"class":298,"line":3225},32,[296,3227,3228],{"class":400},"  scene",[296,3230,2877],{"class":306},[296,3232,3233],{"class":852}," ShallowRef",[296,3235,770],{"class":306},[296,3237,3238],{"class":852},"TresScene",[296,3240,792],{"class":306},[296,3242,3244],{"class":298,"line":3243},33,[296,3245,3246],{"class":867},"  /** Reactive size information for the canvas */\n",[296,3248,3250,3253,3255],{"class":298,"line":3249},34,[296,3251,3252],{"class":400},"  sizes",[296,3254,2877],{"class":306},[296,3256,3257],{"class":852}," SizesType\n",[296,3259,3261],{"class":298,"line":3260},35,[296,3262,3263],{"class":867},"  /** Reference to current camera controls */\n",[296,3265,3267,3270,3272,3274,3276,3279,3281,3284],{"class":298,"line":3266},36,[296,3268,3269],{"class":400},"  controls",[296,3271,2877],{"class":306},[296,3273,2918],{"class":852},[296,3275,770],{"class":306},[296,3277,3278],{"class":852},"TresControl",[296,3280,3088],{"class":306},[296,3282,3283],{"class":852}," null",[296,3285,792],{"class":306},[296,3287,3289],{"class":298,"line":3288},37,[296,3290,3291],{"class":867},"  /** TresJS extension function */\n",[296,3293,3295,3298,3300,3302,3305,3307,3310,3312,3314],{"class":298,"line":3294},38,[296,3296,3297],{"class":400},"  extend",[296,3299,2877],{"class":306},[296,3301,901],{"class":306},[296,3303,3304],{"class":880},"objects",[296,3306,2877],{"class":306},[296,3308,3309],{"class":852}," any",[296,3311,1369],{"class":306},[296,3313,383],{"class":339},[296,3315,2885],{"class":852},[296,3317,3319],{"class":298,"line":3318},39,[296,3320,3321],{"class":867},"  /** Event manager for pointer interactions */\n",[296,3323,3325,3328,3330],{"class":298,"line":3324},40,[296,3326,3327],{"class":400},"  events",[296,3329,2877],{"class":306},[296,3331,3332],{"class":852}," EventManager\n",[296,3334,3336],{"class":298,"line":3335},41,[296,3337,3338],{"class":867},"  /** Mark scene for re-render in on-demand mode */\n",[296,3340,3342,3344,3346,3348,3350],{"class":298,"line":3341},42,[296,3343,2686],{"class":400},[296,3345,2877],{"class":306},[296,3347,2880],{"class":306},[296,3349,383],{"class":339},[296,3351,2885],{"class":852},[296,3353,3355],{"class":298,"line":3354},43,[296,3356,3357],{"class":867},"  /** Manually advance one frame in manual mode */\n",[296,3359,3361,3363,3365,3367,3369],{"class":298,"line":3360},44,[296,3362,2697],{"class":400},[296,3364,2877],{"class":306},[296,3366,2880],{"class":306},[296,3368,383],{"class":339},[296,3370,2885],{"class":852},[296,3372,3374],{"class":298,"line":3373},45,[296,3375,3057],{"class":306},[296,3377,3379],{"class":298,"line":3378},46,[296,3380,333],{"emptyLinePlaceholder":39},[296,3382,3384,3386,3389],{"class":298,"line":3383},47,[296,3385,2859],{"class":339},[296,3387,3388],{"class":852}," SizesType",[296,3390,386],{"class":306},[296,3392,3394],{"class":298,"line":3393},48,[296,3395,3396],{"class":867},"  /** Canvas width in pixels */\n",[296,3398,3400,3403,3405,3407,3409,3411],{"class":298,"line":3399},49,[296,3401,3402],{"class":400},"  width",[296,3404,2877],{"class":306},[296,3406,2918],{"class":852},[296,3408,770],{"class":306},[296,3410,2724],{"class":852},[296,3412,792],{"class":306},[296,3414,3416],{"class":298,"line":3415},50,[296,3417,3418],{"class":867},"  /** Canvas height in pixels */\n",[296,3420,3422,3425,3427,3429,3431,3433],{"class":298,"line":3421},51,[296,3423,3424],{"class":400},"  height",[296,3426,2877],{"class":306},[296,3428,2918],{"class":852},[296,3430,770],{"class":306},[296,3432,2724],{"class":852},[296,3434,792],{"class":306},[296,3436,3438],{"class":298,"line":3437},52,[296,3439,3440],{"class":867},"  /** Canvas aspect ratio (width / height) */\n",[296,3442,3444,3447,3449,3451,3453,3455],{"class":298,"line":3443},53,[296,3445,3446],{"class":400},"  aspectRatio",[296,3448,2877],{"class":306},[296,3450,2918],{"class":852},[296,3452,770],{"class":306},[296,3454,2724],{"class":852},[296,3456,792],{"class":306},[296,3458,3460],{"class":298,"line":3459},54,[296,3461,3462],{"class":867},"  /** Device pixel ratio */\n",[296,3464,3466,3469,3471,3473,3475,3477],{"class":298,"line":3465},55,[296,3467,3468],{"class":400},"  pixelRatio",[296,3470,2877],{"class":306},[296,3472,2918],{"class":852},[296,3474,770],{"class":306},[296,3476,2724],{"class":852},[296,3478,792],{"class":306},[296,3480,3482],{"class":298,"line":3481},56,[296,3483,3057],{"class":306},[296,3485,3487],{"class":298,"line":3486},57,[296,3488,333],{"emptyLinePlaceholder":39},[296,3490,3492,3494,3497,3499,3502,3504],{"class":298,"line":3491},58,[296,3493,2830],{"class":339},[296,3495,3496],{"class":852}," TresRenderer",[296,3498,357],{"class":306},[296,3500,3501],{"class":852}," WebGLRenderer",[296,3503,3088],{"class":306},[296,3505,3506],{"class":852}," Renderer\n",[3508,3509,3510],"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":3512},[3513,3518,3524],{"id":265,"depth":330,"text":266,"children":3514},[3515,3516,3517],{"id":468,"depth":336,"text":469},{"id":748,"depth":336,"text":749},{"id":1259,"depth":336,"text":1260},{"id":2447,"depth":330,"text":2448,"children":3519},[3520,3522],{"id":2711,"depth":336,"text":3521},"onBeforeRender and onRender Parameters",{"id":2788,"depth":336,"text":3523},"The render Method Parameters",{"id":2830,"depth":330,"text":2831},"useLoop provides a convenient access to the render loop of the TresJS scene.","md",null,{},{"title":120,"description":3525},"k3YBaPT4olT9dOKoSyQNuSIx6D_xrVfgxgIc1ENY7vY",[3532,3534],{"title":116,"path":117,"stem":118,"description":3533,"children":-1},"useTresContext provides a complete access to the TresJS context.",{"title":124,"path":125,"stem":126,"description":3535,"children":-1},"useGraph generates a reactive map of named nodes, materials, and meshes from a Three.js object hierarchy.",1774953659602]