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