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