[{"data":1,"prerenderedAt":6803},["ShallowReactive",2],{"navigation":3,"/essentials/concepts/reactivity":211,"/essentials/concepts/reactivity-surround":6798},[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":59,"body":213,"description":6792,"extension":6793,"links":6794,"meta":6795,"navigation":39,"path":60,"seo":6796,"stem":61,"__hash__":6797},"docs/2.essentials/2.concepts/2.reactivity.md",{"type":214,"value":215,"toc":6765},"minimark",[216,221,225,228,232,237,248,383,387,390,625,629,632,657,668,672,675,679,1127,1131,1134,1848,1852,1863,1867,2490,2494,2497,3219,3223,3227,3230,3642,3646,3649,4441,4445,4448,5088,5092,5096,5344,5349,5586,5590,5877,5882,6465,6469,6472,6485,6699,6712,6716,6753,6758,6761],[217,218,220],"h2",{"id":219},"understanding-reactivity-in-3d","Understanding Reactivity in 3D",[222,223,224],"p",{},"Vue's reactivity system is one of its most powerful features, automatically tracking changes and updating the UI accordingly. However, when working with 3D scenes that render at 60+ frames per second, we need to be mindful of how reactivity impacts performance.",[222,226,227],{},"TresJS leverages Vue's reactivity while providing patterns that maintain optimal performance in continuous render loops.",[217,229,231],{"id":230},"the-performance-challenge","The Performance Challenge",[233,234,236],"h3",{"id":235},"vue-reactivity-under-the-hood","Vue Reactivity Under the Hood",[222,238,239,240,247],{},"Vue's reactivity is built on ",[241,242,246],"a",{"href":243,"rel":244},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy",[245],"nofollow","JavaScript Proxies",", which intercept property access and mutations to track dependencies and trigger updates.",[249,250,256],"pre",{"className":251,"code":252,"filename":253,"language":254,"meta":255,"style":255},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// Vue creates a Proxy wrapper around your data\nconst data = reactive({ x: 0, y: 0, z: 0 })\n\n// Every property access is intercepted\ndata.x = 5 // Triggers reactivity system\nconsole.log(data.y) // Also intercepted for dependency tracking\n","reactivity-basics.js","js","",[257,258,259,268,329,335,341,361],"code",{"__ignoreMap":255},[260,261,264],"span",{"class":262,"line":263},"line",1,[260,265,267],{"class":266},"sHwdD","// Vue creates a Proxy wrapper around your data\n",[260,269,271,275,279,283,287,290,293,297,300,304,307,310,312,314,316,319,321,323,326],{"class":262,"line":270},2,[260,272,274],{"class":273},"spNyl","const",[260,276,278],{"class":277},"sTEyZ"," data ",[260,280,282],{"class":281},"sMK4o","=",[260,284,286],{"class":285},"s2Zo4"," reactive",[260,288,289],{"class":277},"(",[260,291,292],{"class":281},"{",[260,294,296],{"class":295},"swJcz"," x",[260,298,299],{"class":281},":",[260,301,303],{"class":302},"sbssI"," 0",[260,305,306],{"class":281},",",[260,308,309],{"class":295}," y",[260,311,299],{"class":281},[260,313,303],{"class":302},[260,315,306],{"class":281},[260,317,318],{"class":295}," z",[260,320,299],{"class":281},[260,322,303],{"class":302},[260,324,325],{"class":281}," }",[260,327,328],{"class":277},")\n",[260,330,332],{"class":262,"line":331},3,[260,333,334],{"emptyLinePlaceholder":39},"\n",[260,336,338],{"class":262,"line":337},4,[260,339,340],{"class":266},"// Every property access is intercepted\n",[260,342,344,347,350,353,355,358],{"class":262,"line":343},5,[260,345,346],{"class":277},"data",[260,348,349],{"class":281},".",[260,351,352],{"class":277},"x ",[260,354,282],{"class":281},[260,356,357],{"class":302}," 5",[260,359,360],{"class":266}," // Triggers reactivity system\n",[260,362,364,367,369,372,375,377,380],{"class":262,"line":363},6,[260,365,366],{"class":277},"console",[260,368,349],{"class":281},[260,370,371],{"class":285},"log",[260,373,374],{"class":277},"(data",[260,376,349],{"class":281},[260,378,379],{"class":277},"y) ",[260,381,382],{"class":266},"// Also intercepted for dependency tracking\n",[233,384,386],{"id":385},"the-60fps-problem","The 60FPS Problem",[222,388,389],{},"In a typical 3D scene running at 60 FPS, the render loop executes 60 times per second. If you're updating reactive objects in each frame, Vue's reactivity system processes these changes 60 times per second:",[249,391,396],{"className":392,"code":393,"filename":394,"language":395,"meta":255,"style":255},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\n// โŒ This creates performance issues\nconst position = reactive({ x: 0, y: 0, z: 0 })\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(() => {\n // This triggers Vue's reactivity 60 times per second\n position.x = Math.sin(Date.now() * 0.001) * 3\n position.y = Math.cos(Date.now() * 0.001) * 2\n})\n\u003C/script>\n","performance-problem.vue","vue",[257,397,398,426,431,472,476,498,514,520,568,608,615],{"__ignoreMap":255},[260,399,400,403,406,409,412,414,417,421,423],{"class":262,"line":263},[260,401,402],{"class":281},"\u003C",[260,404,405],{"class":295},"script",[260,407,408],{"class":273}," setup",[260,410,411],{"class":273}," lang",[260,413,282],{"class":281},[260,415,416],{"class":281},"\"",[260,418,420],{"class":419},"sfazB","ts",[260,422,416],{"class":281},[260,424,425],{"class":281},">\n",[260,427,428],{"class":262,"line":270},[260,429,430],{"class":266},"// โŒ This creates performance issues\n",[260,432,433,435,438,440,442,444,446,448,450,452,454,456,458,460,462,464,466,468,470],{"class":262,"line":331},[260,434,274],{"class":273},[260,436,437],{"class":277}," position ",[260,439,282],{"class":281},[260,441,286],{"class":285},[260,443,289],{"class":277},[260,445,292],{"class":281},[260,447,296],{"class":295},[260,449,299],{"class":281},[260,451,303],{"class":302},[260,453,306],{"class":281},[260,455,309],{"class":295},[260,457,299],{"class":281},[260,459,303],{"class":302},[260,461,306],{"class":281},[260,463,318],{"class":295},[260,465,299],{"class":281},[260,467,303],{"class":302},[260,469,325],{"class":281},[260,471,328],{"class":277},[260,473,474],{"class":262,"line":337},[260,475,334],{"emptyLinePlaceholder":39},[260,477,478,480,483,486,489,492,495],{"class":262,"line":343},[260,479,274],{"class":273},[260,481,482],{"class":281}," {",[260,484,485],{"class":277}," onBeforeRender ",[260,487,488],{"class":281},"}",[260,490,491],{"class":281}," =",[260,493,494],{"class":285}," useLoop",[260,496,497],{"class":277},"()\n",[260,499,500,503,505,508,511],{"class":262,"line":363},[260,501,502],{"class":285},"onBeforeRender",[260,504,289],{"class":277},[260,506,507],{"class":281},"()",[260,509,510],{"class":273}," =>",[260,512,513],{"class":281}," {\n",[260,515,517],{"class":262,"line":516},7,[260,518,519],{"class":266}," // This triggers Vue's reactivity 60 times per second\n",[260,521,523,526,528,531,533,536,538,541,543,546,548,551,554,557,560,563,565],{"class":262,"line":522},8,[260,524,525],{"class":277}," position",[260,527,349],{"class":281},[260,529,530],{"class":277},"x",[260,532,491],{"class":281},[260,534,535],{"class":277}," Math",[260,537,349],{"class":281},[260,539,540],{"class":285},"sin",[260,542,289],{"class":295},[260,544,545],{"class":277},"Date",[260,547,349],{"class":281},[260,549,550],{"class":285},"now",[260,552,553],{"class":295},"() ",[260,555,556],{"class":281},"*",[260,558,559],{"class":302}," 0.001",[260,561,562],{"class":295},") ",[260,564,556],{"class":281},[260,566,567],{"class":302}," 3\n",[260,569,571,573,575,578,580,582,584,587,589,591,593,595,597,599,601,603,605],{"class":262,"line":570},9,[260,572,525],{"class":277},[260,574,349],{"class":281},[260,576,577],{"class":277},"y",[260,579,491],{"class":281},[260,581,535],{"class":277},[260,583,349],{"class":281},[260,585,586],{"class":285},"cos",[260,588,289],{"class":295},[260,590,545],{"class":277},[260,592,349],{"class":281},[260,594,550],{"class":285},[260,596,553],{"class":295},[260,598,556],{"class":281},[260,600,559],{"class":302},[260,602,562],{"class":295},[260,604,556],{"class":281},[260,606,607],{"class":302}," 2\n",[260,609,611,613],{"class":262,"line":610},10,[260,612,488],{"class":281},[260,614,328],{"class":277},[260,616,618,621,623],{"class":262,"line":617},11,[260,619,620],{"class":281},"\u003C/",[260,622,405],{"class":295},[260,624,425],{"class":281},[233,626,628],{"id":627},"performance-impact","Performance Impact",[222,630,631],{},"Here's a benchmark comparing reactive vs non-reactive object updates:",[633,634,635,647],"card-group",{},[636,637,640],"card",{"icon":638,"title":639},"i-lucide-zap","Plain Object",[222,641,642,646],{},[643,644,645],"strong",{},"~50M operations/second","\nDirect property access without proxy overhead",[636,648,651],{"icon":649,"title":650},"i-lucide-turtle","Reactive Object",[222,652,653,656],{},[643,654,655],{},"~2M operations/second","\nProxy interception adds significant overhead",[222,658,659],{},[660,661,662,663],"em",{},"Source: ",[241,664,667],{"href":665,"rel":666},"https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter",[245],"Proxy vs Plain Object Performance",[217,669,671],{"id":670},"template-refs-the-preferred-approach","Template Refs: The Preferred Approach",[222,673,674],{},"Template refs provide direct access to Three.js instances without reactivity overhead, making them ideal for animations and frequent updates.",[233,676,678],{"id":677},"basic-template-ref-usage","Basic Template Ref Usage",[249,680,683],{"className":392,"code":681,"filename":682,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\nimport type { TresInstance } from '@tresjs/core'\n\n// Create a template ref for direct instance access\nconst meshRef = shallowRef\u003CTresInstance | null>(null)\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n if (meshRef.value) {\n // Direct property mutation - no reactivity overhead\n meshRef.value.rotation.x = elapsed * 0.5\n meshRef.value.rotation.y = elapsed * 0.3\n meshRef.value.position.y = Math.sin(elapsed) * 2\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n \u003CTresAmbientLight />\n\n \u003C!-- Template ref connects to the Three.js instance -->\n \u003CTresMesh ref=\"meshRef\">\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"#ff6b35\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n","template-refs.vue",[257,684,685,705,733,737,742,776,780,796,816,837,842,870,896,933,939,946,955,960,970,981,1023,1033,1038,1044,1065,1076,1098,1108,1118],{"__ignoreMap":255},[260,686,687,689,691,693,695,697,699,701,703],{"class":262,"line":263},[260,688,402],{"class":281},[260,690,405],{"class":295},[260,692,408],{"class":273},[260,694,411],{"class":273},[260,696,282],{"class":281},[260,698,416],{"class":281},[260,700,420],{"class":419},[260,702,416],{"class":281},[260,704,425],{"class":281},[260,706,707,711,714,716,719,721,724,727,730],{"class":262,"line":270},[260,708,710],{"class":709},"s7zQu","import",[260,712,713],{"class":709}," type",[260,715,482],{"class":281},[260,717,718],{"class":277}," TresInstance",[260,720,325],{"class":281},[260,722,723],{"class":709}," from",[260,725,726],{"class":281}," '",[260,728,729],{"class":419},"@tresjs/core",[260,731,732],{"class":281},"'\n",[260,734,735],{"class":262,"line":331},[260,736,334],{"emptyLinePlaceholder":39},[260,738,739],{"class":262,"line":337},[260,740,741],{"class":266},"// Create a template ref for direct instance access\n",[260,743,744,746,749,751,754,756,760,763,766,769,771,774],{"class":262,"line":343},[260,745,274],{"class":273},[260,747,748],{"class":277}," meshRef ",[260,750,282],{"class":281},[260,752,753],{"class":285}," shallowRef",[260,755,402],{"class":281},[260,757,759],{"class":758},"sBMFI","TresInstance",[260,761,762],{"class":281}," |",[260,764,765],{"class":758}," null",[260,767,768],{"class":281},">",[260,770,289],{"class":277},[260,772,773],{"class":281},"null",[260,775,328],{"class":277},[260,777,778],{"class":262,"line":363},[260,779,334],{"emptyLinePlaceholder":39},[260,781,782,784,786,788,790,792,794],{"class":262,"line":516},[260,783,274],{"class":273},[260,785,482],{"class":281},[260,787,485],{"class":277},[260,789,488],{"class":281},[260,791,491],{"class":281},[260,793,494],{"class":285},[260,795,497],{"class":277},[260,797,798,800,802,805,809,812,814],{"class":262,"line":522},[260,799,502],{"class":285},[260,801,289],{"class":277},[260,803,804],{"class":281},"({",[260,806,808],{"class":807},"sHdIc"," elapsed",[260,810,811],{"class":281}," })",[260,813,510],{"class":273},[260,815,513],{"class":281},[260,817,818,821,824,827,829,832,834],{"class":262,"line":570},[260,819,820],{"class":709}," if",[260,822,823],{"class":295}," (",[260,825,826],{"class":277},"meshRef",[260,828,349],{"class":281},[260,830,831],{"class":277},"value",[260,833,562],{"class":295},[260,835,836],{"class":281},"{\n",[260,838,839],{"class":262,"line":610},[260,840,841],{"class":266}," // Direct property mutation - no reactivity overhead\n",[260,843,844,847,849,851,853,856,858,860,862,864,867],{"class":262,"line":617},[260,845,846],{"class":277}," meshRef",[260,848,349],{"class":281},[260,850,831],{"class":277},[260,852,349],{"class":281},[260,854,855],{"class":277},"rotation",[260,857,349],{"class":281},[260,859,530],{"class":277},[260,861,491],{"class":281},[260,863,808],{"class":277},[260,865,866],{"class":281}," *",[260,868,869],{"class":302}," 0.5\n",[260,871,873,875,877,879,881,883,885,887,889,891,893],{"class":262,"line":872},12,[260,874,846],{"class":277},[260,876,349],{"class":281},[260,878,831],{"class":277},[260,880,349],{"class":281},[260,882,855],{"class":277},[260,884,349],{"class":281},[260,886,577],{"class":277},[260,888,491],{"class":281},[260,890,808],{"class":277},[260,892,866],{"class":281},[260,894,895],{"class":302}," 0.3\n",[260,897,899,901,903,905,907,910,912,914,916,918,920,922,924,927,929,931],{"class":262,"line":898},13,[260,900,846],{"class":277},[260,902,349],{"class":281},[260,904,831],{"class":277},[260,906,349],{"class":281},[260,908,909],{"class":277},"position",[260,911,349],{"class":281},[260,913,577],{"class":277},[260,915,491],{"class":281},[260,917,535],{"class":277},[260,919,349],{"class":281},[260,921,540],{"class":285},[260,923,289],{"class":295},[260,925,926],{"class":277},"elapsed",[260,928,562],{"class":295},[260,930,556],{"class":281},[260,932,607],{"class":302},[260,934,936],{"class":262,"line":935},14,[260,937,938],{"class":281}," }\n",[260,940,942,944],{"class":262,"line":941},15,[260,943,488],{"class":281},[260,945,328],{"class":277},[260,947,949,951,953],{"class":262,"line":948},16,[260,950,620],{"class":281},[260,952,405],{"class":295},[260,954,425],{"class":281},[260,956,958],{"class":262,"line":957},17,[260,959,334],{"emptyLinePlaceholder":39},[260,961,963,965,968],{"class":262,"line":962},18,[260,964,402],{"class":281},[260,966,967],{"class":295},"template",[260,969,425],{"class":281},[260,971,973,976,979],{"class":262,"line":972},19,[260,974,975],{"class":281}," \u003C",[260,977,978],{"class":295},"TresCanvas",[260,980,425],{"class":281},[260,982,984,987,990,993,995,997,999,1002,1005,1008,1010,1012,1015,1018,1020],{"class":262,"line":983},20,[260,985,986],{"class":281}," \u003C",[260,988,989],{"class":295},"TresPerspectiveCamera",[260,991,992],{"class":281}," :",[260,994,909],{"class":273},[260,996,282],{"class":281},[260,998,416],{"class":281},[260,1000,1001],{"class":281},"[",[260,1003,1004],{"class":302},"0",[260,1006,1007],{"class":281},", ",[260,1009,1004],{"class":302},[260,1011,1007],{"class":281},[260,1013,1014],{"class":302},"5",[260,1016,1017],{"class":281},"]",[260,1019,416],{"class":281},[260,1021,1022],{"class":281}," />\n",[260,1024,1026,1028,1031],{"class":262,"line":1025},21,[260,1027,986],{"class":281},[260,1029,1030],{"class":295},"TresAmbientLight",[260,1032,1022],{"class":281},[260,1034,1036],{"class":262,"line":1035},22,[260,1037,334],{"emptyLinePlaceholder":39},[260,1039,1041],{"class":262,"line":1040},23,[260,1042,1043],{"class":266}," \u003C!-- Template ref connects to the Three.js instance -->\n",[260,1045,1047,1049,1052,1055,1057,1059,1061,1063],{"class":262,"line":1046},24,[260,1048,986],{"class":281},[260,1050,1051],{"class":295},"TresMesh",[260,1053,1054],{"class":273}," ref",[260,1056,282],{"class":281},[260,1058,416],{"class":281},[260,1060,826],{"class":419},[260,1062,416],{"class":281},[260,1064,425],{"class":281},[260,1066,1068,1071,1074],{"class":262,"line":1067},25,[260,1069,1070],{"class":281}," \u003C",[260,1072,1073],{"class":295},"TresBoxGeometry",[260,1075,1022],{"class":281},[260,1077,1079,1081,1084,1087,1089,1091,1094,1096],{"class":262,"line":1078},26,[260,1080,1070],{"class":281},[260,1082,1083],{"class":295},"TresMeshStandardMaterial",[260,1085,1086],{"class":273}," color",[260,1088,282],{"class":281},[260,1090,416],{"class":281},[260,1092,1093],{"class":419},"#ff6b35",[260,1095,416],{"class":281},[260,1097,1022],{"class":281},[260,1099,1101,1104,1106],{"class":262,"line":1100},27,[260,1102,1103],{"class":281}," \u003C/",[260,1105,1051],{"class":295},[260,1107,425],{"class":281},[260,1109,1111,1114,1116],{"class":262,"line":1110},28,[260,1112,1113],{"class":281}," \u003C/",[260,1115,978],{"class":295},[260,1117,425],{"class":281},[260,1119,1121,1123,1125],{"class":262,"line":1120},29,[260,1122,620],{"class":281},[260,1124,967],{"class":295},[260,1126,425],{"class":281},[233,1128,1130],{"id":1129},"multiple-template-refs","Multiple Template Refs",[222,1132,1133],{},"For complex scenes with multiple animated objects:",[249,1135,1138],{"className":392,"code":1136,"filename":1137,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\nimport type { TresInstance } from '@tresjs/core'\n\nconst sphere1Ref = shallowRef\u003CTresInstance | null>(null)\nconst sphere2Ref = shallowRef\u003CTresInstance | null>(null)\nconst sphere3Ref = shallowRef\u003CTresInstance | null>(null)\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n // Animate multiple objects independently\n if (sphere1Ref.value) {\n sphere1Ref.value.position.x = Math.sin(elapsed) * 3\n }\n\n if (sphere2Ref.value) {\n sphere2Ref.value.position.x = Math.sin(elapsed + Math.PI * 0.5) * 3\n }\n\n if (sphere3Ref.value) {\n sphere3Ref.value.position.x = Math.sin(elapsed + Math.PI) * 3\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n \u003CTresMesh ref=\"sphere1Ref\" :position=\"[0, 2, 0]\">\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial color=\"red\" />\n \u003C/TresMesh>\n\n \u003CTresMesh ref=\"sphere2Ref\" :position=\"[0, 0, 0]\">\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial color=\"green\" />\n \u003C/TresMesh>\n\n \u003CTresMesh ref=\"sphere3Ref\" :position=\"[0, -2, 0]\">\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial color=\"blue\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n","multiple-refs.vue",[257,1139,1140,1160,1180,1184,1211,1238,1265,1269,1285,1301,1306,1323,1358,1362,1366,1383,1433,1437,1441,1458,1501,1505,1511,1519,1523,1531,1539,1571,1575,1618,1628,1648,1657,1662,1705,1714,1734,1743,1748,1792,1801,1821,1830,1839],{"__ignoreMap":255},[260,1141,1142,1144,1146,1148,1150,1152,1154,1156,1158],{"class":262,"line":263},[260,1143,402],{"class":281},[260,1145,405],{"class":295},[260,1147,408],{"class":273},[260,1149,411],{"class":273},[260,1151,282],{"class":281},[260,1153,416],{"class":281},[260,1155,420],{"class":419},[260,1157,416],{"class":281},[260,1159,425],{"class":281},[260,1161,1162,1164,1166,1168,1170,1172,1174,1176,1178],{"class":262,"line":270},[260,1163,710],{"class":709},[260,1165,713],{"class":709},[260,1167,482],{"class":281},[260,1169,718],{"class":277},[260,1171,325],{"class":281},[260,1173,723],{"class":709},[260,1175,726],{"class":281},[260,1177,729],{"class":419},[260,1179,732],{"class":281},[260,1181,1182],{"class":262,"line":331},[260,1183,334],{"emptyLinePlaceholder":39},[260,1185,1186,1188,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209],{"class":262,"line":337},[260,1187,274],{"class":273},[260,1189,1190],{"class":277}," sphere1Ref ",[260,1192,282],{"class":281},[260,1194,753],{"class":285},[260,1196,402],{"class":281},[260,1198,759],{"class":758},[260,1200,762],{"class":281},[260,1202,765],{"class":758},[260,1204,768],{"class":281},[260,1206,289],{"class":277},[260,1208,773],{"class":281},[260,1210,328],{"class":277},[260,1212,1213,1215,1218,1220,1222,1224,1226,1228,1230,1232,1234,1236],{"class":262,"line":343},[260,1214,274],{"class":273},[260,1216,1217],{"class":277}," sphere2Ref ",[260,1219,282],{"class":281},[260,1221,753],{"class":285},[260,1223,402],{"class":281},[260,1225,759],{"class":758},[260,1227,762],{"class":281},[260,1229,765],{"class":758},[260,1231,768],{"class":281},[260,1233,289],{"class":277},[260,1235,773],{"class":281},[260,1237,328],{"class":277},[260,1239,1240,1242,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263],{"class":262,"line":363},[260,1241,274],{"class":273},[260,1243,1244],{"class":277}," sphere3Ref ",[260,1246,282],{"class":281},[260,1248,753],{"class":285},[260,1250,402],{"class":281},[260,1252,759],{"class":758},[260,1254,762],{"class":281},[260,1256,765],{"class":758},[260,1258,768],{"class":281},[260,1260,289],{"class":277},[260,1262,773],{"class":281},[260,1264,328],{"class":277},[260,1266,1267],{"class":262,"line":516},[260,1268,334],{"emptyLinePlaceholder":39},[260,1270,1271,1273,1275,1277,1279,1281,1283],{"class":262,"line":522},[260,1272,274],{"class":273},[260,1274,482],{"class":281},[260,1276,485],{"class":277},[260,1278,488],{"class":281},[260,1280,491],{"class":281},[260,1282,494],{"class":285},[260,1284,497],{"class":277},[260,1286,1287,1289,1291,1293,1295,1297,1299],{"class":262,"line":570},[260,1288,502],{"class":285},[260,1290,289],{"class":277},[260,1292,804],{"class":281},[260,1294,808],{"class":807},[260,1296,811],{"class":281},[260,1298,510],{"class":273},[260,1300,513],{"class":281},[260,1302,1303],{"class":262,"line":610},[260,1304,1305],{"class":266}," // Animate multiple objects independently\n",[260,1307,1308,1310,1312,1315,1317,1319,1321],{"class":262,"line":617},[260,1309,820],{"class":709},[260,1311,823],{"class":295},[260,1313,1314],{"class":277},"sphere1Ref",[260,1316,349],{"class":281},[260,1318,831],{"class":277},[260,1320,562],{"class":295},[260,1322,836],{"class":281},[260,1324,1325,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356],{"class":262,"line":872},[260,1326,1327],{"class":277}," sphere1Ref",[260,1329,349],{"class":281},[260,1331,831],{"class":277},[260,1333,349],{"class":281},[260,1335,909],{"class":277},[260,1337,349],{"class":281},[260,1339,530],{"class":277},[260,1341,491],{"class":281},[260,1343,535],{"class":277},[260,1345,349],{"class":281},[260,1347,540],{"class":285},[260,1349,289],{"class":295},[260,1351,926],{"class":277},[260,1353,562],{"class":295},[260,1355,556],{"class":281},[260,1357,567],{"class":302},[260,1359,1360],{"class":262,"line":898},[260,1361,938],{"class":281},[260,1363,1364],{"class":262,"line":935},[260,1365,334],{"emptyLinePlaceholder":39},[260,1367,1368,1370,1372,1375,1377,1379,1381],{"class":262,"line":941},[260,1369,820],{"class":709},[260,1371,823],{"class":295},[260,1373,1374],{"class":277},"sphere2Ref",[260,1376,349],{"class":281},[260,1378,831],{"class":277},[260,1380,562],{"class":295},[260,1382,836],{"class":281},[260,1384,1385,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410,1412,1415,1417,1419,1422,1424,1427,1429,1431],{"class":262,"line":948},[260,1386,1387],{"class":277}," sphere2Ref",[260,1389,349],{"class":281},[260,1391,831],{"class":277},[260,1393,349],{"class":281},[260,1395,909],{"class":277},[260,1397,349],{"class":281},[260,1399,530],{"class":277},[260,1401,491],{"class":281},[260,1403,535],{"class":277},[260,1405,349],{"class":281},[260,1407,540],{"class":285},[260,1409,289],{"class":295},[260,1411,926],{"class":277},[260,1413,1414],{"class":281}," +",[260,1416,535],{"class":277},[260,1418,349],{"class":281},[260,1420,1421],{"class":277},"PI",[260,1423,866],{"class":281},[260,1425,1426],{"class":302}," 0.5",[260,1428,562],{"class":295},[260,1430,556],{"class":281},[260,1432,567],{"class":302},[260,1434,1435],{"class":262,"line":957},[260,1436,938],{"class":281},[260,1438,1439],{"class":262,"line":962},[260,1440,334],{"emptyLinePlaceholder":39},[260,1442,1443,1445,1447,1450,1452,1454,1456],{"class":262,"line":972},[260,1444,820],{"class":709},[260,1446,823],{"class":295},[260,1448,1449],{"class":277},"sphere3Ref",[260,1451,349],{"class":281},[260,1453,831],{"class":277},[260,1455,562],{"class":295},[260,1457,836],{"class":281},[260,1459,1460,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1499],{"class":262,"line":983},[260,1461,1462],{"class":277}," sphere3Ref",[260,1464,349],{"class":281},[260,1466,831],{"class":277},[260,1468,349],{"class":281},[260,1470,909],{"class":277},[260,1472,349],{"class":281},[260,1474,530],{"class":277},[260,1476,491],{"class":281},[260,1478,535],{"class":277},[260,1480,349],{"class":281},[260,1482,540],{"class":285},[260,1484,289],{"class":295},[260,1486,926],{"class":277},[260,1488,1414],{"class":281},[260,1490,535],{"class":277},[260,1492,349],{"class":281},[260,1494,1421],{"class":277},[260,1496,562],{"class":295},[260,1498,556],{"class":281},[260,1500,567],{"class":302},[260,1502,1503],{"class":262,"line":1025},[260,1504,938],{"class":281},[260,1506,1507,1509],{"class":262,"line":1035},[260,1508,488],{"class":281},[260,1510,328],{"class":277},[260,1512,1513,1515,1517],{"class":262,"line":1040},[260,1514,620],{"class":281},[260,1516,405],{"class":295},[260,1518,425],{"class":281},[260,1520,1521],{"class":262,"line":1046},[260,1522,334],{"emptyLinePlaceholder":39},[260,1524,1525,1527,1529],{"class":262,"line":1067},[260,1526,402],{"class":281},[260,1528,967],{"class":295},[260,1530,425],{"class":281},[260,1532,1533,1535,1537],{"class":262,"line":1078},[260,1534,975],{"class":281},[260,1536,978],{"class":295},[260,1538,425],{"class":281},[260,1540,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1563,1565,1567,1569],{"class":262,"line":1100},[260,1542,986],{"class":281},[260,1544,989],{"class":295},[260,1546,992],{"class":281},[260,1548,909],{"class":273},[260,1550,282],{"class":281},[260,1552,416],{"class":281},[260,1554,1001],{"class":281},[260,1556,1004],{"class":302},[260,1558,1007],{"class":281},[260,1560,1004],{"class":302},[260,1562,1007],{"class":281},[260,1564,1014],{"class":302},[260,1566,1017],{"class":281},[260,1568,416],{"class":281},[260,1570,1022],{"class":281},[260,1572,1573],{"class":262,"line":1110},[260,1574,334],{"emptyLinePlaceholder":39},[260,1576,1577,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601,1603,1605,1608,1610,1612,1614,1616],{"class":262,"line":1120},[260,1578,986],{"class":281},[260,1580,1051],{"class":295},[260,1582,1054],{"class":273},[260,1584,282],{"class":281},[260,1586,416],{"class":281},[260,1588,1314],{"class":419},[260,1590,416],{"class":281},[260,1592,992],{"class":281},[260,1594,909],{"class":273},[260,1596,282],{"class":281},[260,1598,416],{"class":281},[260,1600,1001],{"class":281},[260,1602,1004],{"class":302},[260,1604,1007],{"class":281},[260,1606,1607],{"class":302},"2",[260,1609,1007],{"class":281},[260,1611,1004],{"class":302},[260,1613,1017],{"class":281},[260,1615,416],{"class":281},[260,1617,425],{"class":281},[260,1619,1621,1623,1626],{"class":262,"line":1620},30,[260,1622,1070],{"class":281},[260,1624,1625],{"class":295},"TresSphereGeometry",[260,1627,1022],{"class":281},[260,1629,1631,1633,1635,1637,1639,1641,1644,1646],{"class":262,"line":1630},31,[260,1632,1070],{"class":281},[260,1634,1083],{"class":295},[260,1636,1086],{"class":273},[260,1638,282],{"class":281},[260,1640,416],{"class":281},[260,1642,1643],{"class":419},"red",[260,1645,416],{"class":281},[260,1647,1022],{"class":281},[260,1649,1651,1653,1655],{"class":262,"line":1650},32,[260,1652,1103],{"class":281},[260,1654,1051],{"class":295},[260,1656,425],{"class":281},[260,1658,1660],{"class":262,"line":1659},33,[260,1661,334],{"emptyLinePlaceholder":39},[260,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703],{"class":262,"line":1664},34,[260,1666,986],{"class":281},[260,1668,1051],{"class":295},[260,1670,1054],{"class":273},[260,1672,282],{"class":281},[260,1674,416],{"class":281},[260,1676,1374],{"class":419},[260,1678,416],{"class":281},[260,1680,992],{"class":281},[260,1682,909],{"class":273},[260,1684,282],{"class":281},[260,1686,416],{"class":281},[260,1688,1001],{"class":281},[260,1690,1004],{"class":302},[260,1692,1007],{"class":281},[260,1694,1004],{"class":302},[260,1696,1007],{"class":281},[260,1698,1004],{"class":302},[260,1700,1017],{"class":281},[260,1702,416],{"class":281},[260,1704,425],{"class":281},[260,1706,1708,1710,1712],{"class":262,"line":1707},35,[260,1709,1070],{"class":281},[260,1711,1625],{"class":295},[260,1713,1022],{"class":281},[260,1715,1717,1719,1721,1723,1725,1727,1730,1732],{"class":262,"line":1716},36,[260,1718,1070],{"class":281},[260,1720,1083],{"class":295},[260,1722,1086],{"class":273},[260,1724,282],{"class":281},[260,1726,416],{"class":281},[260,1728,1729],{"class":419},"green",[260,1731,416],{"class":281},[260,1733,1022],{"class":281},[260,1735,1737,1739,1741],{"class":262,"line":1736},37,[260,1738,1103],{"class":281},[260,1740,1051],{"class":295},[260,1742,425],{"class":281},[260,1744,1746],{"class":262,"line":1745},38,[260,1747,334],{"emptyLinePlaceholder":39},[260,1749,1751,1753,1755,1757,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1780,1782,1784,1786,1788,1790],{"class":262,"line":1750},39,[260,1752,986],{"class":281},[260,1754,1051],{"class":295},[260,1756,1054],{"class":273},[260,1758,282],{"class":281},[260,1760,416],{"class":281},[260,1762,1449],{"class":419},[260,1764,416],{"class":281},[260,1766,992],{"class":281},[260,1768,909],{"class":273},[260,1770,282],{"class":281},[260,1772,416],{"class":281},[260,1774,1001],{"class":281},[260,1776,1004],{"class":302},[260,1778,1779],{"class":281},", -",[260,1781,1607],{"class":302},[260,1783,1007],{"class":281},[260,1785,1004],{"class":302},[260,1787,1017],{"class":281},[260,1789,416],{"class":281},[260,1791,425],{"class":281},[260,1793,1795,1797,1799],{"class":262,"line":1794},40,[260,1796,1070],{"class":281},[260,1798,1625],{"class":295},[260,1800,1022],{"class":281},[260,1802,1804,1806,1808,1810,1812,1814,1817,1819],{"class":262,"line":1803},41,[260,1805,1070],{"class":281},[260,1807,1083],{"class":295},[260,1809,1086],{"class":273},[260,1811,282],{"class":281},[260,1813,416],{"class":281},[260,1815,1816],{"class":419},"blue",[260,1818,416],{"class":281},[260,1820,1022],{"class":281},[260,1822,1824,1826,1828],{"class":262,"line":1823},42,[260,1825,1103],{"class":281},[260,1827,1051],{"class":295},[260,1829,425],{"class":281},[260,1831,1833,1835,1837],{"class":262,"line":1832},43,[260,1834,1113],{"class":281},[260,1836,978],{"class":295},[260,1838,425],{"class":281},[260,1840,1842,1844,1846],{"class":262,"line":1841},44,[260,1843,620],{"class":281},[260,1845,967],{"class":295},[260,1847,425],{"class":281},[217,1849,1851],{"id":1850},"shallow-reactivity-when-you-need-some-reactivity","Shallow Reactivity: When You Need Some Reactivity",[222,1853,1854,1855,1858,1859,1862],{},"Sometimes you need reactivity for UI controls while maintaining performance for animations. ",[257,1856,1857],{},"shallowRef"," and ",[257,1860,1861],{},"shallowReactive"," provide the perfect balance.",[233,1864,1866],{"id":1865},"shallowref-vs-ref","shallowRef vs ref",[1868,1869,1870,2282],"code-group",{},[249,1871,1874],{"className":392,"code":1872,"filename":1873,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\n// โœ… Only .value access is reactive\nconst position = shallowRef({ x: 0, y: 0, z: 0 })\nconst meshRef = shallowRef\u003CTresInstance | null>(null)\n\n// UI control that triggers reactivity\nconst updatePosition = () => {\n position.value = { x: 5, y: 0, z: 0 } // Reactive update\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(() => {\n if (meshRef.value) {\n // Direct mutation - no reactivity\n meshRef.value.rotation.y += 0.01\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cbutton @click=\"updatePosition\">Update Position\u003C/button>\n \u003CTresCanvas>\n \u003CTresMesh ref=\"meshRef\" :position=\"position\">\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"teal\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n \u003C/div>\n\u003C/template>\n","shallowRef (Recommended)",[257,1875,1876,1896,1901,1941,1967,1971,1976,1992,2031,2036,2040,2056,2068,2084,2089,2111,2115,2121,2129,2133,2141,2150,2183,2191,2221,2230,2249,2258,2266,2274],{"__ignoreMap":255},[260,1877,1878,1880,1882,1884,1886,1888,1890,1892,1894],{"class":262,"line":263},[260,1879,402],{"class":281},[260,1881,405],{"class":295},[260,1883,408],{"class":273},[260,1885,411],{"class":273},[260,1887,282],{"class":281},[260,1889,416],{"class":281},[260,1891,420],{"class":419},[260,1893,416],{"class":281},[260,1895,425],{"class":281},[260,1897,1898],{"class":262,"line":270},[260,1899,1900],{"class":266},"// โœ… Only .value access is reactive\n",[260,1902,1903,1905,1907,1909,1911,1913,1915,1917,1919,1921,1923,1925,1927,1929,1931,1933,1935,1937,1939],{"class":262,"line":331},[260,1904,274],{"class":273},[260,1906,437],{"class":277},[260,1908,282],{"class":281},[260,1910,753],{"class":285},[260,1912,289],{"class":277},[260,1914,292],{"class":281},[260,1916,296],{"class":295},[260,1918,299],{"class":281},[260,1920,303],{"class":302},[260,1922,306],{"class":281},[260,1924,309],{"class":295},[260,1926,299],{"class":281},[260,1928,303],{"class":302},[260,1930,306],{"class":281},[260,1932,318],{"class":295},[260,1934,299],{"class":281},[260,1936,303],{"class":302},[260,1938,325],{"class":281},[260,1940,328],{"class":277},[260,1942,1943,1945,1947,1949,1951,1953,1955,1957,1959,1961,1963,1965],{"class":262,"line":337},[260,1944,274],{"class":273},[260,1946,748],{"class":277},[260,1948,282],{"class":281},[260,1950,753],{"class":285},[260,1952,402],{"class":281},[260,1954,759],{"class":758},[260,1956,762],{"class":281},[260,1958,765],{"class":758},[260,1960,768],{"class":281},[260,1962,289],{"class":277},[260,1964,773],{"class":281},[260,1966,328],{"class":277},[260,1968,1969],{"class":262,"line":343},[260,1970,334],{"emptyLinePlaceholder":39},[260,1972,1973],{"class":262,"line":363},[260,1974,1975],{"class":266},"// UI control that triggers reactivity\n",[260,1977,1978,1980,1983,1985,1988,1990],{"class":262,"line":516},[260,1979,274],{"class":273},[260,1981,1982],{"class":277}," updatePosition ",[260,1984,282],{"class":281},[260,1986,1987],{"class":281}," ()",[260,1989,510],{"class":273},[260,1991,513],{"class":281},[260,1993,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024,2026,2028],{"class":262,"line":522},[260,1995,525],{"class":277},[260,1997,349],{"class":281},[260,1999,831],{"class":277},[260,2001,491],{"class":281},[260,2003,482],{"class":281},[260,2005,296],{"class":295},[260,2007,299],{"class":281},[260,2009,357],{"class":302},[260,2011,306],{"class":281},[260,2013,309],{"class":295},[260,2015,299],{"class":281},[260,2017,303],{"class":302},[260,2019,306],{"class":281},[260,2021,318],{"class":295},[260,2023,299],{"class":281},[260,2025,303],{"class":302},[260,2027,325],{"class":281},[260,2029,2030],{"class":266}," // Reactive update\n",[260,2032,2033],{"class":262,"line":570},[260,2034,2035],{"class":281},"}\n",[260,2037,2038],{"class":262,"line":610},[260,2039,334],{"emptyLinePlaceholder":39},[260,2041,2042,2044,2046,2048,2050,2052,2054],{"class":262,"line":617},[260,2043,274],{"class":273},[260,2045,482],{"class":281},[260,2047,485],{"class":277},[260,2049,488],{"class":281},[260,2051,491],{"class":281},[260,2053,494],{"class":285},[260,2055,497],{"class":277},[260,2057,2058,2060,2062,2064,2066],{"class":262,"line":872},[260,2059,502],{"class":285},[260,2061,289],{"class":277},[260,2063,507],{"class":281},[260,2065,510],{"class":273},[260,2067,513],{"class":281},[260,2069,2070,2072,2074,2076,2078,2080,2082],{"class":262,"line":898},[260,2071,820],{"class":709},[260,2073,823],{"class":295},[260,2075,826],{"class":277},[260,2077,349],{"class":281},[260,2079,831],{"class":277},[260,2081,562],{"class":295},[260,2083,836],{"class":281},[260,2085,2086],{"class":262,"line":935},[260,2087,2088],{"class":266}," // Direct mutation - no reactivity\n",[260,2090,2091,2093,2095,2097,2099,2101,2103,2105,2108],{"class":262,"line":941},[260,2092,846],{"class":277},[260,2094,349],{"class":281},[260,2096,831],{"class":277},[260,2098,349],{"class":281},[260,2100,855],{"class":277},[260,2102,349],{"class":281},[260,2104,577],{"class":277},[260,2106,2107],{"class":281}," +=",[260,2109,2110],{"class":302}," 0.01\n",[260,2112,2113],{"class":262,"line":948},[260,2114,938],{"class":281},[260,2116,2117,2119],{"class":262,"line":957},[260,2118,488],{"class":281},[260,2120,328],{"class":277},[260,2122,2123,2125,2127],{"class":262,"line":962},[260,2124,620],{"class":281},[260,2126,405],{"class":295},[260,2128,425],{"class":281},[260,2130,2131],{"class":262,"line":972},[260,2132,334],{"emptyLinePlaceholder":39},[260,2134,2135,2137,2139],{"class":262,"line":983},[260,2136,402],{"class":281},[260,2138,967],{"class":295},[260,2140,425],{"class":281},[260,2142,2143,2145,2148],{"class":262,"line":1025},[260,2144,975],{"class":281},[260,2146,2147],{"class":295},"div",[260,2149,425],{"class":281},[260,2151,2152,2154,2157,2160,2163,2165,2167,2170,2172,2174,2177,2179,2181],{"class":262,"line":1035},[260,2153,986],{"class":281},[260,2155,2156],{"class":295},"button",[260,2158,2159],{"class":281}," @",[260,2161,2162],{"class":273},"click",[260,2164,282],{"class":281},[260,2166,416],{"class":281},[260,2168,2169],{"class":277},"updatePosition",[260,2171,416],{"class":281},[260,2173,768],{"class":281},[260,2175,2176],{"class":277},"Update Position",[260,2178,620],{"class":281},[260,2180,2156],{"class":295},[260,2182,425],{"class":281},[260,2184,2185,2187,2189],{"class":262,"line":1040},[260,2186,986],{"class":281},[260,2188,978],{"class":295},[260,2190,425],{"class":281},[260,2192,2193,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219],{"class":262,"line":1046},[260,2194,1070],{"class":281},[260,2196,1051],{"class":295},[260,2198,1054],{"class":273},[260,2200,282],{"class":281},[260,2202,416],{"class":281},[260,2204,826],{"class":419},[260,2206,416],{"class":281},[260,2208,992],{"class":281},[260,2210,909],{"class":273},[260,2212,282],{"class":281},[260,2214,416],{"class":281},[260,2216,909],{"class":277},[260,2218,416],{"class":281},[260,2220,425],{"class":281},[260,2222,2223,2226,2228],{"class":262,"line":1067},[260,2224,2225],{"class":281}," \u003C",[260,2227,1073],{"class":295},[260,2229,1022],{"class":281},[260,2231,2232,2234,2236,2238,2240,2242,2245,2247],{"class":262,"line":1078},[260,2233,2225],{"class":281},[260,2235,1083],{"class":295},[260,2237,1086],{"class":273},[260,2239,282],{"class":281},[260,2241,416],{"class":281},[260,2243,2244],{"class":419},"teal",[260,2246,416],{"class":281},[260,2248,1022],{"class":281},[260,2250,2251,2254,2256],{"class":262,"line":1100},[260,2252,2253],{"class":281}," \u003C/",[260,2255,1051],{"class":295},[260,2257,425],{"class":281},[260,2259,2260,2262,2264],{"class":262,"line":1110},[260,2261,1103],{"class":281},[260,2263,978],{"class":295},[260,2265,425],{"class":281},[260,2267,2268,2270,2272],{"class":262,"line":1120},[260,2269,1113],{"class":281},[260,2271,2147],{"class":295},[260,2273,425],{"class":281},[260,2275,2276,2278,2280],{"class":262,"line":1620},[260,2277,620],{"class":281},[260,2279,967],{"class":295},[260,2281,425],{"class":281},[249,2283,2286],{"className":392,"code":2284,"filename":2285,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\n// โŒ Deep reactivity causes performance issues\nconst position = ref({ x: 0, y: 0, z: 0 })\n\n// This would be reactive and expensive\nconst updatePosition = () => {\n position.value.x = 5 // Deep reactive mutation\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(() => {\n // โŒ This triggers reactivity every frame\n position.value.x = Math.sin(Date.now() * 0.001) * 3\n})\n\u003C/script>\n","ref (Problematic)",[257,2287,2288,2308,2313,2353,2357,2362,2376,2395,2399,2403,2419,2431,2436,2476,2482],{"__ignoreMap":255},[260,2289,2290,2292,2294,2296,2298,2300,2302,2304,2306],{"class":262,"line":263},[260,2291,402],{"class":281},[260,2293,405],{"class":295},[260,2295,408],{"class":273},[260,2297,411],{"class":273},[260,2299,282],{"class":281},[260,2301,416],{"class":281},[260,2303,420],{"class":419},[260,2305,416],{"class":281},[260,2307,425],{"class":281},[260,2309,2310],{"class":262,"line":270},[260,2311,2312],{"class":266},"// โŒ Deep reactivity causes performance issues\n",[260,2314,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341,2343,2345,2347,2349,2351],{"class":262,"line":331},[260,2316,274],{"class":273},[260,2318,437],{"class":277},[260,2320,282],{"class":281},[260,2322,1054],{"class":285},[260,2324,289],{"class":277},[260,2326,292],{"class":281},[260,2328,296],{"class":295},[260,2330,299],{"class":281},[260,2332,303],{"class":302},[260,2334,306],{"class":281},[260,2336,309],{"class":295},[260,2338,299],{"class":281},[260,2340,303],{"class":302},[260,2342,306],{"class":281},[260,2344,318],{"class":295},[260,2346,299],{"class":281},[260,2348,303],{"class":302},[260,2350,325],{"class":281},[260,2352,328],{"class":277},[260,2354,2355],{"class":262,"line":337},[260,2356,334],{"emptyLinePlaceholder":39},[260,2358,2359],{"class":262,"line":343},[260,2360,2361],{"class":266},"// This would be reactive and expensive\n",[260,2363,2364,2366,2368,2370,2372,2374],{"class":262,"line":363},[260,2365,274],{"class":273},[260,2367,1982],{"class":277},[260,2369,282],{"class":281},[260,2371,1987],{"class":281},[260,2373,510],{"class":273},[260,2375,513],{"class":281},[260,2377,2378,2380,2382,2384,2386,2388,2390,2392],{"class":262,"line":516},[260,2379,525],{"class":277},[260,2381,349],{"class":281},[260,2383,831],{"class":277},[260,2385,349],{"class":281},[260,2387,530],{"class":277},[260,2389,491],{"class":281},[260,2391,357],{"class":302},[260,2393,2394],{"class":266}," // Deep reactive mutation\n",[260,2396,2397],{"class":262,"line":522},[260,2398,2035],{"class":281},[260,2400,2401],{"class":262,"line":570},[260,2402,334],{"emptyLinePlaceholder":39},[260,2404,2405,2407,2409,2411,2413,2415,2417],{"class":262,"line":610},[260,2406,274],{"class":273},[260,2408,482],{"class":281},[260,2410,485],{"class":277},[260,2412,488],{"class":281},[260,2414,491],{"class":281},[260,2416,494],{"class":285},[260,2418,497],{"class":277},[260,2420,2421,2423,2425,2427,2429],{"class":262,"line":617},[260,2422,502],{"class":285},[260,2424,289],{"class":277},[260,2426,507],{"class":281},[260,2428,510],{"class":273},[260,2430,513],{"class":281},[260,2432,2433],{"class":262,"line":872},[260,2434,2435],{"class":266}," // โŒ This triggers reactivity every frame\n",[260,2437,2438,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458,2460,2462,2464,2466,2468,2470,2472,2474],{"class":262,"line":898},[260,2439,525],{"class":277},[260,2441,349],{"class":281},[260,2443,831],{"class":277},[260,2445,349],{"class":281},[260,2447,530],{"class":277},[260,2449,491],{"class":281},[260,2451,535],{"class":277},[260,2453,349],{"class":281},[260,2455,540],{"class":285},[260,2457,289],{"class":295},[260,2459,545],{"class":277},[260,2461,349],{"class":281},[260,2463,550],{"class":285},[260,2465,553],{"class":295},[260,2467,556],{"class":281},[260,2469,559],{"class":302},[260,2471,562],{"class":295},[260,2473,556],{"class":281},[260,2475,567],{"class":302},[260,2477,2478,2480],{"class":262,"line":935},[260,2479,488],{"class":281},[260,2481,328],{"class":277},[260,2483,2484,2486,2488],{"class":262,"line":941},[260,2485,620],{"class":281},[260,2487,405],{"class":295},[260,2489,425],{"class":281},[233,2491,2493],{"id":2492},"shallowreactive-for-object-properties","shallowReactive for Object Properties",[222,2495,2496],{},"When you need to reactively update multiple properties independently:",[249,2498,2501],{"className":392,"code":2499,"filename":2500,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\n// โœ… Top-level properties are reactive, nested ones aren't\nconst meshProps = shallowReactive({\n color: '#ff6b35',\n wireframe: false,\n visible: true,\n position: { x: 0, y: 0, z: 0 } // This object isn't deeply reactive\n})\n\nconst meshRef = shallowRef\u003CTresInstance | null>(null)\n\n// UI controls that modify appearance\nconst toggleWireframe = () => {\n meshProps.wireframe = !meshProps.wireframe // Reactive\n}\n\nconst changeColor = () => {\n meshProps.color = `#${Math.floor(Math.random() * 16777215).toString(16)}` // Reactive\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(() => {\n if (meshRef.value) {\n // Direct position mutation - no reactivity overhead\n meshRef.value.position.y = Math.sin(Date.now() * 0.001) * 2\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv class=\"controls\">\n \u003Cbutton @click=\"toggleWireframe\">Toggle Wireframe\u003C/button>\n \u003Cbutton @click=\"changeColor\">Random Color\u003C/button>\n \u003C/div>\n\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n \u003CTresAmbientLight />\n\n \u003CTresMesh\n ref=\"meshRef\"\n :visible=\"meshProps.visible\"\n >\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial\n :color=\"meshProps.color\"\n :wireframe=\"meshProps.wireframe\"\n />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n \u003C/div>\n\u003C/template>\n","shallow-reactive.vue",[257,2502,2503,2523,2528,2544,2561,2574,2586,2621,2627,2631,2657,2661,2666,2681,2706,2710,2714,2729,2792,2796,2800,2816,2828,2844,2849,2893,2897,2903,2911,2915,2923,2931,2951,2981,3011,3019,3023,3031,3063,3071,3075,3082,3096,3116,3121,3130,3138,3158,3177,3183,3192,3201,3210],{"__ignoreMap":255},[260,2504,2505,2507,2509,2511,2513,2515,2517,2519,2521],{"class":262,"line":263},[260,2506,402],{"class":281},[260,2508,405],{"class":295},[260,2510,408],{"class":273},[260,2512,411],{"class":273},[260,2514,282],{"class":281},[260,2516,416],{"class":281},[260,2518,420],{"class":419},[260,2520,416],{"class":281},[260,2522,425],{"class":281},[260,2524,2525],{"class":262,"line":270},[260,2526,2527],{"class":266},"// โœ… Top-level properties are reactive, nested ones aren't\n",[260,2529,2530,2532,2535,2537,2540,2542],{"class":262,"line":331},[260,2531,274],{"class":273},[260,2533,2534],{"class":277}," meshProps ",[260,2536,282],{"class":281},[260,2538,2539],{"class":285}," shallowReactive",[260,2541,289],{"class":277},[260,2543,836],{"class":281},[260,2545,2546,2549,2551,2553,2555,2558],{"class":262,"line":337},[260,2547,2548],{"class":295}," color",[260,2550,299],{"class":281},[260,2552,726],{"class":281},[260,2554,1093],{"class":419},[260,2556,2557],{"class":281},"'",[260,2559,2560],{"class":281},",\n",[260,2562,2563,2566,2568,2572],{"class":262,"line":343},[260,2564,2565],{"class":295}," wireframe",[260,2567,299],{"class":281},[260,2569,2571],{"class":2570},"sfNiH"," false",[260,2573,2560],{"class":281},[260,2575,2576,2579,2581,2584],{"class":262,"line":363},[260,2577,2578],{"class":295}," visible",[260,2580,299],{"class":281},[260,2582,2583],{"class":2570}," true",[260,2585,2560],{"class":281},[260,2587,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618],{"class":262,"line":516},[260,2589,525],{"class":295},[260,2591,299],{"class":281},[260,2593,482],{"class":281},[260,2595,296],{"class":295},[260,2597,299],{"class":281},[260,2599,303],{"class":302},[260,2601,306],{"class":281},[260,2603,309],{"class":295},[260,2605,299],{"class":281},[260,2607,303],{"class":302},[260,2609,306],{"class":281},[260,2611,318],{"class":295},[260,2613,299],{"class":281},[260,2615,303],{"class":302},[260,2617,325],{"class":281},[260,2619,2620],{"class":266}," // This object isn't deeply reactive\n",[260,2622,2623,2625],{"class":262,"line":522},[260,2624,488],{"class":281},[260,2626,328],{"class":277},[260,2628,2629],{"class":262,"line":570},[260,2630,334],{"emptyLinePlaceholder":39},[260,2632,2633,2635,2637,2639,2641,2643,2645,2647,2649,2651,2653,2655],{"class":262,"line":610},[260,2634,274],{"class":273},[260,2636,748],{"class":277},[260,2638,282],{"class":281},[260,2640,753],{"class":285},[260,2642,402],{"class":281},[260,2644,759],{"class":758},[260,2646,762],{"class":281},[260,2648,765],{"class":758},[260,2650,768],{"class":281},[260,2652,289],{"class":277},[260,2654,773],{"class":281},[260,2656,328],{"class":277},[260,2658,2659],{"class":262,"line":617},[260,2660,334],{"emptyLinePlaceholder":39},[260,2662,2663],{"class":262,"line":872},[260,2664,2665],{"class":266},"// UI controls that modify appearance\n",[260,2667,2668,2670,2673,2675,2677,2679],{"class":262,"line":898},[260,2669,274],{"class":273},[260,2671,2672],{"class":277}," toggleWireframe ",[260,2674,282],{"class":281},[260,2676,1987],{"class":281},[260,2678,510],{"class":273},[260,2680,513],{"class":281},[260,2682,2683,2686,2688,2691,2693,2696,2699,2701,2703],{"class":262,"line":935},[260,2684,2685],{"class":277}," meshProps",[260,2687,349],{"class":281},[260,2689,2690],{"class":277},"wireframe",[260,2692,491],{"class":281},[260,2694,2695],{"class":281}," !",[260,2697,2698],{"class":277},"meshProps",[260,2700,349],{"class":281},[260,2702,2690],{"class":277},[260,2704,2705],{"class":266}," // Reactive\n",[260,2707,2708],{"class":262,"line":941},[260,2709,2035],{"class":281},[260,2711,2712],{"class":262,"line":948},[260,2713,334],{"emptyLinePlaceholder":39},[260,2715,2716,2718,2721,2723,2725,2727],{"class":262,"line":957},[260,2717,274],{"class":273},[260,2719,2720],{"class":277}," changeColor ",[260,2722,282],{"class":281},[260,2724,1987],{"class":281},[260,2726,510],{"class":273},[260,2728,513],{"class":281},[260,2730,2731,2733,2735,2738,2740,2743,2746,2749,2752,2754,2757,2760,2762,2765,2767,2769,2772,2775,2777,2780,2782,2785,2787,2790],{"class":262,"line":962},[260,2732,2685],{"class":277},[260,2734,349],{"class":281},[260,2736,2737],{"class":277},"color",[260,2739,491],{"class":281},[260,2741,2742],{"class":281}," `",[260,2744,2745],{"class":419},"#",[260,2747,2748],{"class":281},"${",[260,2750,2751],{"class":277},"Math",[260,2753,349],{"class":281},[260,2755,2756],{"class":285},"floor",[260,2758,2759],{"class":277},"(Math",[260,2761,349],{"class":281},[260,2763,2764],{"class":285},"random",[260,2766,553],{"class":277},[260,2768,556],{"class":281},[260,2770,2771],{"class":302}," 16777215",[260,2773,2774],{"class":277},")",[260,2776,349],{"class":281},[260,2778,2779],{"class":285},"toString",[260,2781,289],{"class":277},[260,2783,2784],{"class":302},"16",[260,2786,2774],{"class":277},[260,2788,2789],{"class":281},"}`",[260,2791,2705],{"class":266},[260,2793,2794],{"class":262,"line":972},[260,2795,2035],{"class":281},[260,2797,2798],{"class":262,"line":983},[260,2799,334],{"emptyLinePlaceholder":39},[260,2801,2802,2804,2806,2808,2810,2812,2814],{"class":262,"line":1025},[260,2803,274],{"class":273},[260,2805,482],{"class":281},[260,2807,485],{"class":277},[260,2809,488],{"class":281},[260,2811,491],{"class":281},[260,2813,494],{"class":285},[260,2815,497],{"class":277},[260,2817,2818,2820,2822,2824,2826],{"class":262,"line":1035},[260,2819,502],{"class":285},[260,2821,289],{"class":277},[260,2823,507],{"class":281},[260,2825,510],{"class":273},[260,2827,513],{"class":281},[260,2829,2830,2832,2834,2836,2838,2840,2842],{"class":262,"line":1040},[260,2831,820],{"class":709},[260,2833,823],{"class":295},[260,2835,826],{"class":277},[260,2837,349],{"class":281},[260,2839,831],{"class":277},[260,2841,562],{"class":295},[260,2843,836],{"class":281},[260,2845,2846],{"class":262,"line":1046},[260,2847,2848],{"class":266}," // Direct position mutation - no reactivity overhead\n",[260,2850,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889,2891],{"class":262,"line":1067},[260,2852,846],{"class":277},[260,2854,349],{"class":281},[260,2856,831],{"class":277},[260,2858,349],{"class":281},[260,2860,909],{"class":277},[260,2862,349],{"class":281},[260,2864,577],{"class":277},[260,2866,491],{"class":281},[260,2868,535],{"class":277},[260,2870,349],{"class":281},[260,2872,540],{"class":285},[260,2874,289],{"class":295},[260,2876,545],{"class":277},[260,2878,349],{"class":281},[260,2880,550],{"class":285},[260,2882,553],{"class":295},[260,2884,556],{"class":281},[260,2886,559],{"class":302},[260,2888,562],{"class":295},[260,2890,556],{"class":281},[260,2892,607],{"class":302},[260,2894,2895],{"class":262,"line":1078},[260,2896,938],{"class":281},[260,2898,2899,2901],{"class":262,"line":1100},[260,2900,488],{"class":281},[260,2902,328],{"class":277},[260,2904,2905,2907,2909],{"class":262,"line":1110},[260,2906,620],{"class":281},[260,2908,405],{"class":295},[260,2910,425],{"class":281},[260,2912,2913],{"class":262,"line":1120},[260,2914,334],{"emptyLinePlaceholder":39},[260,2916,2917,2919,2921],{"class":262,"line":1620},[260,2918,402],{"class":281},[260,2920,967],{"class":295},[260,2922,425],{"class":281},[260,2924,2925,2927,2929],{"class":262,"line":1630},[260,2926,975],{"class":281},[260,2928,2147],{"class":295},[260,2930,425],{"class":281},[260,2932,2933,2935,2937,2940,2942,2944,2947,2949],{"class":262,"line":1650},[260,2934,986],{"class":281},[260,2936,2147],{"class":295},[260,2938,2939],{"class":273}," class",[260,2941,282],{"class":281},[260,2943,416],{"class":281},[260,2945,2946],{"class":419},"controls",[260,2948,416],{"class":281},[260,2950,425],{"class":281},[260,2952,2953,2955,2957,2959,2961,2963,2965,2968,2970,2972,2975,2977,2979],{"class":262,"line":1659},[260,2954,1070],{"class":281},[260,2956,2156],{"class":295},[260,2958,2159],{"class":281},[260,2960,2162],{"class":273},[260,2962,282],{"class":281},[260,2964,416],{"class":281},[260,2966,2967],{"class":277},"toggleWireframe",[260,2969,416],{"class":281},[260,2971,768],{"class":281},[260,2973,2974],{"class":277},"Toggle Wireframe",[260,2976,620],{"class":281},[260,2978,2156],{"class":295},[260,2980,425],{"class":281},[260,2982,2983,2985,2987,2989,2991,2993,2995,2998,3000,3002,3005,3007,3009],{"class":262,"line":1664},[260,2984,1070],{"class":281},[260,2986,2156],{"class":295},[260,2988,2159],{"class":281},[260,2990,2162],{"class":273},[260,2992,282],{"class":281},[260,2994,416],{"class":281},[260,2996,2997],{"class":277},"changeColor",[260,2999,416],{"class":281},[260,3001,768],{"class":281},[260,3003,3004],{"class":277},"Random Color",[260,3006,620],{"class":281},[260,3008,2156],{"class":295},[260,3010,425],{"class":281},[260,3012,3013,3015,3017],{"class":262,"line":1707},[260,3014,1103],{"class":281},[260,3016,2147],{"class":295},[260,3018,425],{"class":281},[260,3020,3021],{"class":262,"line":1716},[260,3022,334],{"emptyLinePlaceholder":39},[260,3024,3025,3027,3029],{"class":262,"line":1736},[260,3026,986],{"class":281},[260,3028,978],{"class":295},[260,3030,425],{"class":281},[260,3032,3033,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053,3055,3057,3059,3061],{"class":262,"line":1745},[260,3034,1070],{"class":281},[260,3036,989],{"class":295},[260,3038,992],{"class":281},[260,3040,909],{"class":273},[260,3042,282],{"class":281},[260,3044,416],{"class":281},[260,3046,1001],{"class":281},[260,3048,1004],{"class":302},[260,3050,1007],{"class":281},[260,3052,1004],{"class":302},[260,3054,1007],{"class":281},[260,3056,1014],{"class":302},[260,3058,1017],{"class":281},[260,3060,416],{"class":281},[260,3062,1022],{"class":281},[260,3064,3065,3067,3069],{"class":262,"line":1750},[260,3066,1070],{"class":281},[260,3068,1030],{"class":295},[260,3070,1022],{"class":281},[260,3072,3073],{"class":262,"line":1794},[260,3074,334],{"emptyLinePlaceholder":39},[260,3076,3077,3079],{"class":262,"line":1803},[260,3078,1070],{"class":281},[260,3080,3081],{"class":295},"TresMesh\n",[260,3083,3084,3087,3089,3091,3093],{"class":262,"line":1823},[260,3085,3086],{"class":273}," ref",[260,3088,282],{"class":281},[260,3090,416],{"class":281},[260,3092,826],{"class":419},[260,3094,3095],{"class":281},"\"\n",[260,3097,3098,3101,3104,3106,3108,3110,3112,3114],{"class":262,"line":1832},[260,3099,3100],{"class":281}," :",[260,3102,3103],{"class":273},"visible",[260,3105,282],{"class":281},[260,3107,416],{"class":281},[260,3109,2698],{"class":277},[260,3111,349],{"class":281},[260,3113,3103],{"class":277},[260,3115,3095],{"class":281},[260,3117,3118],{"class":262,"line":1841},[260,3119,3120],{"class":281}," >\n",[260,3122,3124,3126,3128],{"class":262,"line":3123},45,[260,3125,2225],{"class":281},[260,3127,1073],{"class":295},[260,3129,1022],{"class":281},[260,3131,3133,3135],{"class":262,"line":3132},46,[260,3134,2225],{"class":281},[260,3136,3137],{"class":295},"TresMeshStandardMaterial\n",[260,3139,3141,3144,3146,3148,3150,3152,3154,3156],{"class":262,"line":3140},47,[260,3142,3143],{"class":281}," :",[260,3145,2737],{"class":273},[260,3147,282],{"class":281},[260,3149,416],{"class":281},[260,3151,2698],{"class":277},[260,3153,349],{"class":281},[260,3155,2737],{"class":277},[260,3157,3095],{"class":281},[260,3159,3161,3163,3165,3167,3169,3171,3173,3175],{"class":262,"line":3160},48,[260,3162,3143],{"class":281},[260,3164,2690],{"class":273},[260,3166,282],{"class":281},[260,3168,416],{"class":281},[260,3170,2698],{"class":277},[260,3172,349],{"class":281},[260,3174,2690],{"class":277},[260,3176,3095],{"class":281},[260,3178,3180],{"class":262,"line":3179},49,[260,3181,3182],{"class":281}," />\n",[260,3184,3186,3188,3190],{"class":262,"line":3185},50,[260,3187,2253],{"class":281},[260,3189,1051],{"class":295},[260,3191,425],{"class":281},[260,3193,3195,3197,3199],{"class":262,"line":3194},51,[260,3196,1103],{"class":281},[260,3198,978],{"class":295},[260,3200,425],{"class":281},[260,3202,3204,3206,3208],{"class":262,"line":3203},52,[260,3205,1113],{"class":281},[260,3207,2147],{"class":295},[260,3209,425],{"class":281},[260,3211,3213,3215,3217],{"class":262,"line":3212},53,[260,3214,620],{"class":281},[260,3216,967],{"class":295},[260,3218,425],{"class":281},[217,3220,3222],{"id":3221},"best-practices-and-patterns","Best Practices and Patterns",[233,3224,3226],{"id":3225},"_1-initial-positioning-vs-animation","1. Initial Positioning vs Animation",[222,3228,3229],{},"Use reactive props for initial positioning and template refs for animation:",[249,3231,3234],{"className":392,"code":3232,"filename":3233,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\n// โœ… Reactive initial state\nconst initialPosition = ref([0, 0, 0])\nconst color = ref('#ff6b35')\n\n// โœ… Template ref for animations\nconst meshRef = shallowRef\u003CTresInstance | null>(null)\n\n// UI control for initial position\nconst moveLeft = () => {\n initialPosition.value = [-3, 0, 0]\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n if (meshRef.value) {\n // โœ… Animate relative to initial position\n meshRef.value.position.y = initialPosition.value[1] + Math.sin(elapsed) * 2\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresMesh\n ref=\"meshRef\"\n :position=\"initialPosition\"\n >\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial :color=\"color\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n","best-practices.vue",[257,3235,3236,3256,3261,3288,3309,3313,3318,3344,3348,3353,3368,3399,3403,3407,3423,3439,3455,3460,3512,3516,3522,3530,3534,3542,3550,3556,3569,3585,3590,3598,3618,3626,3634],{"__ignoreMap":255},[260,3237,3238,3240,3242,3244,3246,3248,3250,3252,3254],{"class":262,"line":263},[260,3239,402],{"class":281},[260,3241,405],{"class":295},[260,3243,408],{"class":273},[260,3245,411],{"class":273},[260,3247,282],{"class":281},[260,3249,416],{"class":281},[260,3251,420],{"class":419},[260,3253,416],{"class":281},[260,3255,425],{"class":281},[260,3257,3258],{"class":262,"line":270},[260,3259,3260],{"class":266},"// โœ… Reactive initial state\n",[260,3262,3263,3265,3268,3270,3272,3275,3277,3279,3281,3283,3285],{"class":262,"line":331},[260,3264,274],{"class":273},[260,3266,3267],{"class":277}," initialPosition ",[260,3269,282],{"class":281},[260,3271,1054],{"class":285},[260,3273,3274],{"class":277},"([",[260,3276,1004],{"class":302},[260,3278,306],{"class":281},[260,3280,303],{"class":302},[260,3282,306],{"class":281},[260,3284,303],{"class":302},[260,3286,3287],{"class":277},"])\n",[260,3289,3290,3292,3295,3297,3299,3301,3303,3305,3307],{"class":262,"line":337},[260,3291,274],{"class":273},[260,3293,3294],{"class":277}," color ",[260,3296,282],{"class":281},[260,3298,1054],{"class":285},[260,3300,289],{"class":277},[260,3302,2557],{"class":281},[260,3304,1093],{"class":419},[260,3306,2557],{"class":281},[260,3308,328],{"class":277},[260,3310,3311],{"class":262,"line":343},[260,3312,334],{"emptyLinePlaceholder":39},[260,3314,3315],{"class":262,"line":363},[260,3316,3317],{"class":266},"// โœ… Template ref for animations\n",[260,3319,3320,3322,3324,3326,3328,3330,3332,3334,3336,3338,3340,3342],{"class":262,"line":516},[260,3321,274],{"class":273},[260,3323,748],{"class":277},[260,3325,282],{"class":281},[260,3327,753],{"class":285},[260,3329,402],{"class":281},[260,3331,759],{"class":758},[260,3333,762],{"class":281},[260,3335,765],{"class":758},[260,3337,768],{"class":281},[260,3339,289],{"class":277},[260,3341,773],{"class":281},[260,3343,328],{"class":277},[260,3345,3346],{"class":262,"line":522},[260,3347,334],{"emptyLinePlaceholder":39},[260,3349,3350],{"class":262,"line":570},[260,3351,3352],{"class":266},"// UI control for initial position\n",[260,3354,3355,3357,3360,3362,3364,3366],{"class":262,"line":610},[260,3356,274],{"class":273},[260,3358,3359],{"class":277}," moveLeft ",[260,3361,282],{"class":281},[260,3363,1987],{"class":281},[260,3365,510],{"class":273},[260,3367,513],{"class":281},[260,3369,3370,3373,3375,3377,3379,3382,3385,3388,3390,3392,3394,3396],{"class":262,"line":617},[260,3371,3372],{"class":277}," initialPosition",[260,3374,349],{"class":281},[260,3376,831],{"class":277},[260,3378,491],{"class":281},[260,3380,3381],{"class":295}," [",[260,3383,3384],{"class":281},"-",[260,3386,3387],{"class":302},"3",[260,3389,306],{"class":281},[260,3391,303],{"class":302},[260,3393,306],{"class":281},[260,3395,303],{"class":302},[260,3397,3398],{"class":295},"]\n",[260,3400,3401],{"class":262,"line":872},[260,3402,2035],{"class":281},[260,3404,3405],{"class":262,"line":898},[260,3406,334],{"emptyLinePlaceholder":39},[260,3408,3409,3411,3413,3415,3417,3419,3421],{"class":262,"line":935},[260,3410,274],{"class":273},[260,3412,482],{"class":281},[260,3414,485],{"class":277},[260,3416,488],{"class":281},[260,3418,491],{"class":281},[260,3420,494],{"class":285},[260,3422,497],{"class":277},[260,3424,3425,3427,3429,3431,3433,3435,3437],{"class":262,"line":941},[260,3426,502],{"class":285},[260,3428,289],{"class":277},[260,3430,804],{"class":281},[260,3432,808],{"class":807},[260,3434,811],{"class":281},[260,3436,510],{"class":273},[260,3438,513],{"class":281},[260,3440,3441,3443,3445,3447,3449,3451,3453],{"class":262,"line":948},[260,3442,820],{"class":709},[260,3444,823],{"class":295},[260,3446,826],{"class":277},[260,3448,349],{"class":281},[260,3450,831],{"class":277},[260,3452,562],{"class":295},[260,3454,836],{"class":281},[260,3456,3457],{"class":262,"line":957},[260,3458,3459],{"class":266}," // โœ… Animate relative to initial position\n",[260,3461,3462,3464,3466,3468,3470,3472,3474,3476,3478,3481,3483,3485,3487,3490,3493,3496,3498,3500,3502,3504,3506,3508,3510],{"class":262,"line":962},[260,3463,846],{"class":277},[260,3465,349],{"class":281},[260,3467,831],{"class":277},[260,3469,349],{"class":281},[260,3471,909],{"class":277},[260,3473,349],{"class":281},[260,3475,577],{"class":277},[260,3477,491],{"class":281},[260,3479,3480],{"class":277}," initialPosition",[260,3482,349],{"class":281},[260,3484,831],{"class":277},[260,3486,1001],{"class":295},[260,3488,3489],{"class":302},"1",[260,3491,3492],{"class":295},"] ",[260,3494,3495],{"class":281},"+",[260,3497,535],{"class":277},[260,3499,349],{"class":281},[260,3501,540],{"class":285},[260,3503,289],{"class":295},[260,3505,926],{"class":277},[260,3507,562],{"class":295},[260,3509,556],{"class":281},[260,3511,607],{"class":302},[260,3513,3514],{"class":262,"line":972},[260,3515,938],{"class":281},[260,3517,3518,3520],{"class":262,"line":983},[260,3519,488],{"class":281},[260,3521,328],{"class":277},[260,3523,3524,3526,3528],{"class":262,"line":1025},[260,3525,620],{"class":281},[260,3527,405],{"class":295},[260,3529,425],{"class":281},[260,3531,3532],{"class":262,"line":1035},[260,3533,334],{"emptyLinePlaceholder":39},[260,3535,3536,3538,3540],{"class":262,"line":1040},[260,3537,402],{"class":281},[260,3539,967],{"class":295},[260,3541,425],{"class":281},[260,3543,3544,3546,3548],{"class":262,"line":1046},[260,3545,975],{"class":281},[260,3547,978],{"class":295},[260,3549,425],{"class":281},[260,3551,3552,3554],{"class":262,"line":1067},[260,3553,986],{"class":281},[260,3555,3081],{"class":295},[260,3557,3558,3561,3563,3565,3567],{"class":262,"line":1078},[260,3559,3560],{"class":273}," ref",[260,3562,282],{"class":281},[260,3564,416],{"class":281},[260,3566,826],{"class":419},[260,3568,3095],{"class":281},[260,3570,3571,3574,3576,3578,3580,3583],{"class":262,"line":1100},[260,3572,3573],{"class":281}," :",[260,3575,909],{"class":273},[260,3577,282],{"class":281},[260,3579,416],{"class":281},[260,3581,3582],{"class":277},"initialPosition",[260,3584,3095],{"class":281},[260,3586,3587],{"class":262,"line":1110},[260,3588,3589],{"class":281}," >\n",[260,3591,3592,3594,3596],{"class":262,"line":1120},[260,3593,1070],{"class":281},[260,3595,1073],{"class":295},[260,3597,1022],{"class":281},[260,3599,3600,3602,3604,3606,3608,3610,3612,3614,3616],{"class":262,"line":1620},[260,3601,1070],{"class":281},[260,3603,1083],{"class":295},[260,3605,992],{"class":281},[260,3607,2737],{"class":273},[260,3609,282],{"class":281},[260,3611,416],{"class":281},[260,3613,2737],{"class":277},[260,3615,416],{"class":281},[260,3617,1022],{"class":281},[260,3619,3620,3622,3624],{"class":262,"line":1630},[260,3621,1103],{"class":281},[260,3623,1051],{"class":295},[260,3625,425],{"class":281},[260,3627,3628,3630,3632],{"class":262,"line":1650},[260,3629,1113],{"class":281},[260,3631,978],{"class":295},[260,3633,425],{"class":281},[260,3635,3636,3638,3640],{"class":262,"line":1659},[260,3637,620],{"class":281},[260,3639,967],{"class":295},[260,3641,425],{"class":281},[233,3643,3645],{"id":3644},"_2-computed-properties-for-complex-calculations","2. Computed Properties for Complex Calculations",[222,3647,3648],{},"Use computed properties for expensive calculations that shouldn't run in every frame:",[249,3650,3653],{"className":392,"code":3651,"filename":3652,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\nconst settings = shallowReactive({\n radius: 3,\n speed: 1,\n objects: 5\n})\n\n// โœ… Computed property recalculates only when dependencies change\nconst orbitPositions = computed(() => {\n const positions = []\n for (let i = 0; i \u003C settings.objects; i++) {\n const angle = (i / settings.objects) * Math.PI * 2\n positions.push({\n x: Math.cos(angle) * settings.radius,\n z: Math.sin(angle) * settings.radius\n })\n }\n return positions\n})\n\nconst meshRefs = shallowRef\u003C(TresInstance | null)[]>([])\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n meshRefs.value.forEach((mesh, index) => {\n if (mesh && orbitPositions.value[index]) {\n const pos = orbitPositions.value[index]\n // Animate around the computed orbit positions\n mesh.position.x = pos.x + Math.sin(elapsed * settings.speed) * 0.5\n mesh.position.z = pos.z + Math.cos(elapsed * settings.speed) * 0.5\n }\n })\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresMesh\n v-for=\"(position, index) in orbitPositions\"\n :key=\"index\"\n :ref=\"(el) => (meshRefs[index] = el)\"\n :position=\"[position.x, 0, position.z]\"\n >\n \u003CTresSphereGeometry :args=\"[0.2]\" />\n \u003CTresMeshStandardMaterial color=\"#ff6b35\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n","computed-properties.vue",[257,3654,3655,3675,3690,3702,3714,3724,3730,3734,3739,3759,3772,3816,3854,3868,3899,3927,3934,3938,3946,3952,3956,3985,3989,4005,4021,4053,4082,4104,4109,4157,4204,4209,4216,4222,4230,4234,4242,4250,4256,4281,4296,4335,4369,4373,4399,4417,4425,4433],{"__ignoreMap":255},[260,3656,3657,3659,3661,3663,3665,3667,3669,3671,3673],{"class":262,"line":263},[260,3658,402],{"class":281},[260,3660,405],{"class":295},[260,3662,408],{"class":273},[260,3664,411],{"class":273},[260,3666,282],{"class":281},[260,3668,416],{"class":281},[260,3670,420],{"class":419},[260,3672,416],{"class":281},[260,3674,425],{"class":281},[260,3676,3677,3679,3682,3684,3686,3688],{"class":262,"line":270},[260,3678,274],{"class":273},[260,3680,3681],{"class":277}," settings ",[260,3683,282],{"class":281},[260,3685,2539],{"class":285},[260,3687,289],{"class":277},[260,3689,836],{"class":281},[260,3691,3692,3695,3697,3700],{"class":262,"line":331},[260,3693,3694],{"class":295}," radius",[260,3696,299],{"class":281},[260,3698,3699],{"class":302}," 3",[260,3701,2560],{"class":281},[260,3703,3704,3707,3709,3712],{"class":262,"line":337},[260,3705,3706],{"class":295}," speed",[260,3708,299],{"class":281},[260,3710,3711],{"class":302}," 1",[260,3713,2560],{"class":281},[260,3715,3716,3719,3721],{"class":262,"line":343},[260,3717,3718],{"class":295}," objects",[260,3720,299],{"class":281},[260,3722,3723],{"class":302}," 5\n",[260,3725,3726,3728],{"class":262,"line":363},[260,3727,488],{"class":281},[260,3729,328],{"class":277},[260,3731,3732],{"class":262,"line":516},[260,3733,334],{"emptyLinePlaceholder":39},[260,3735,3736],{"class":262,"line":522},[260,3737,3738],{"class":266},"// โœ… Computed property recalculates only when dependencies change\n",[260,3740,3741,3743,3746,3748,3751,3753,3755,3757],{"class":262,"line":570},[260,3742,274],{"class":273},[260,3744,3745],{"class":277}," orbitPositions ",[260,3747,282],{"class":281},[260,3749,3750],{"class":285}," computed",[260,3752,289],{"class":277},[260,3754,507],{"class":281},[260,3756,510],{"class":273},[260,3758,513],{"class":281},[260,3760,3761,3764,3767,3769],{"class":262,"line":610},[260,3762,3763],{"class":273}," const",[260,3765,3766],{"class":277}," positions",[260,3768,491],{"class":281},[260,3770,3771],{"class":295}," []\n",[260,3773,3774,3777,3779,3782,3785,3787,3789,3792,3794,3797,3800,3802,3805,3807,3809,3812,3814],{"class":262,"line":617},[260,3775,3776],{"class":709}," for",[260,3778,823],{"class":295},[260,3780,3781],{"class":273},"let",[260,3783,3784],{"class":277}," i",[260,3786,491],{"class":281},[260,3788,303],{"class":302},[260,3790,3791],{"class":281},";",[260,3793,3784],{"class":277},[260,3795,3796],{"class":281}," \u003C",[260,3798,3799],{"class":277}," settings",[260,3801,349],{"class":281},[260,3803,3804],{"class":277},"objects",[260,3806,3791],{"class":281},[260,3808,3784],{"class":277},[260,3810,3811],{"class":281},"++",[260,3813,562],{"class":295},[260,3815,836],{"class":281},[260,3817,3818,3821,3824,3826,3828,3831,3834,3836,3838,3840,3842,3844,3846,3848,3850,3852],{"class":262,"line":872},[260,3819,3820],{"class":273}," const",[260,3822,3823],{"class":277}," angle",[260,3825,491],{"class":281},[260,3827,823],{"class":295},[260,3829,3830],{"class":277},"i",[260,3832,3833],{"class":281}," /",[260,3835,3799],{"class":277},[260,3837,349],{"class":281},[260,3839,3804],{"class":277},[260,3841,562],{"class":295},[260,3843,556],{"class":281},[260,3845,535],{"class":277},[260,3847,349],{"class":281},[260,3849,1421],{"class":277},[260,3851,866],{"class":281},[260,3853,607],{"class":302},[260,3855,3856,3859,3861,3864,3866],{"class":262,"line":898},[260,3857,3858],{"class":277}," positions",[260,3860,349],{"class":281},[260,3862,3863],{"class":285},"push",[260,3865,289],{"class":295},[260,3867,836],{"class":281},[260,3869,3870,3873,3875,3877,3879,3881,3883,3886,3888,3890,3892,3894,3897],{"class":262,"line":935},[260,3871,3872],{"class":295}," x",[260,3874,299],{"class":281},[260,3876,535],{"class":277},[260,3878,349],{"class":281},[260,3880,586],{"class":285},[260,3882,289],{"class":295},[260,3884,3885],{"class":277},"angle",[260,3887,562],{"class":295},[260,3889,556],{"class":281},[260,3891,3799],{"class":277},[260,3893,349],{"class":281},[260,3895,3896],{"class":277},"radius",[260,3898,2560],{"class":281},[260,3900,3901,3904,3906,3908,3910,3912,3914,3916,3918,3920,3922,3924],{"class":262,"line":941},[260,3902,3903],{"class":295}," z",[260,3905,299],{"class":281},[260,3907,535],{"class":277},[260,3909,349],{"class":281},[260,3911,540],{"class":285},[260,3913,289],{"class":295},[260,3915,3885],{"class":277},[260,3917,562],{"class":295},[260,3919,556],{"class":281},[260,3921,3799],{"class":277},[260,3923,349],{"class":281},[260,3925,3926],{"class":277},"radius\n",[260,3928,3929,3932],{"class":262,"line":948},[260,3930,3931],{"class":281}," }",[260,3933,328],{"class":295},[260,3935,3936],{"class":262,"line":957},[260,3937,938],{"class":281},[260,3939,3940,3943],{"class":262,"line":962},[260,3941,3942],{"class":709}," return",[260,3944,3945],{"class":277}," positions\n",[260,3947,3948,3950],{"class":262,"line":972},[260,3949,488],{"class":281},[260,3951,328],{"class":277},[260,3953,3954],{"class":262,"line":983},[260,3955,334],{"emptyLinePlaceholder":39},[260,3957,3958,3960,3963,3965,3967,3969,3971,3973,3975,3977,3980,3982],{"class":262,"line":1025},[260,3959,274],{"class":273},[260,3961,3962],{"class":277}," meshRefs ",[260,3964,282],{"class":281},[260,3966,753],{"class":285},[260,3968,402],{"class":281},[260,3970,289],{"class":277},[260,3972,759],{"class":758},[260,3974,762],{"class":281},[260,3976,765],{"class":758},[260,3978,3979],{"class":277},")[]",[260,3981,768],{"class":281},[260,3983,3984],{"class":277},"([])\n",[260,3986,3987],{"class":262,"line":1035},[260,3988,334],{"emptyLinePlaceholder":39},[260,3990,3991,3993,3995,3997,3999,4001,4003],{"class":262,"line":1040},[260,3992,274],{"class":273},[260,3994,482],{"class":281},[260,3996,485],{"class":277},[260,3998,488],{"class":281},[260,4000,491],{"class":281},[260,4002,494],{"class":285},[260,4004,497],{"class":277},[260,4006,4007,4009,4011,4013,4015,4017,4019],{"class":262,"line":1046},[260,4008,502],{"class":285},[260,4010,289],{"class":277},[260,4012,804],{"class":281},[260,4014,808],{"class":807},[260,4016,811],{"class":281},[260,4018,510],{"class":273},[260,4020,513],{"class":281},[260,4022,4023,4026,4028,4030,4032,4035,4037,4039,4042,4044,4047,4049,4051],{"class":262,"line":1067},[260,4024,4025],{"class":277}," meshRefs",[260,4027,349],{"class":281},[260,4029,831],{"class":277},[260,4031,349],{"class":281},[260,4033,4034],{"class":285},"forEach",[260,4036,289],{"class":295},[260,4038,289],{"class":281},[260,4040,4041],{"class":807},"mesh",[260,4043,306],{"class":281},[260,4045,4046],{"class":807}," index",[260,4048,2774],{"class":281},[260,4050,510],{"class":273},[260,4052,513],{"class":281},[260,4054,4055,4058,4060,4062,4065,4068,4070,4072,4074,4077,4080],{"class":262,"line":1078},[260,4056,4057],{"class":709}," if",[260,4059,823],{"class":295},[260,4061,4041],{"class":277},[260,4063,4064],{"class":281}," &&",[260,4066,4067],{"class":277}," orbitPositions",[260,4069,349],{"class":281},[260,4071,831],{"class":277},[260,4073,1001],{"class":295},[260,4075,4076],{"class":277},"index",[260,4078,4079],{"class":295},"]) ",[260,4081,836],{"class":281},[260,4083,4084,4087,4090,4092,4094,4096,4098,4100,4102],{"class":262,"line":1100},[260,4085,4086],{"class":273}," const",[260,4088,4089],{"class":277}," pos",[260,4091,491],{"class":281},[260,4093,4067],{"class":277},[260,4095,349],{"class":281},[260,4097,831],{"class":277},[260,4099,1001],{"class":295},[260,4101,4076],{"class":277},[260,4103,3398],{"class":295},[260,4105,4106],{"class":262,"line":1110},[260,4107,4108],{"class":266}," // Animate around the computed orbit positions\n",[260,4110,4111,4114,4116,4118,4120,4122,4124,4126,4128,4130,4132,4134,4136,4138,4140,4142,4144,4146,4148,4151,4153,4155],{"class":262,"line":1120},[260,4112,4113],{"class":277}," mesh",[260,4115,349],{"class":281},[260,4117,909],{"class":277},[260,4119,349],{"class":281},[260,4121,530],{"class":277},[260,4123,491],{"class":281},[260,4125,4089],{"class":277},[260,4127,349],{"class":281},[260,4129,530],{"class":277},[260,4131,1414],{"class":281},[260,4133,535],{"class":277},[260,4135,349],{"class":281},[260,4137,540],{"class":285},[260,4139,289],{"class":295},[260,4141,926],{"class":277},[260,4143,866],{"class":281},[260,4145,3799],{"class":277},[260,4147,349],{"class":281},[260,4149,4150],{"class":277},"speed",[260,4152,562],{"class":295},[260,4154,556],{"class":281},[260,4156,869],{"class":302},[260,4158,4159,4161,4163,4165,4167,4170,4172,4174,4176,4178,4180,4182,4184,4186,4188,4190,4192,4194,4196,4198,4200,4202],{"class":262,"line":1620},[260,4160,4113],{"class":277},[260,4162,349],{"class":281},[260,4164,909],{"class":277},[260,4166,349],{"class":281},[260,4168,4169],{"class":277},"z",[260,4171,491],{"class":281},[260,4173,4089],{"class":277},[260,4175,349],{"class":281},[260,4177,4169],{"class":277},[260,4179,1414],{"class":281},[260,4181,535],{"class":277},[260,4183,349],{"class":281},[260,4185,586],{"class":285},[260,4187,289],{"class":295},[260,4189,926],{"class":277},[260,4191,866],{"class":281},[260,4193,3799],{"class":277},[260,4195,349],{"class":281},[260,4197,4150],{"class":277},[260,4199,562],{"class":295},[260,4201,556],{"class":281},[260,4203,869],{"class":302},[260,4205,4206],{"class":262,"line":1630},[260,4207,4208],{"class":281}," }\n",[260,4210,4211,4214],{"class":262,"line":1650},[260,4212,4213],{"class":281}," }",[260,4215,328],{"class":295},[260,4217,4218,4220],{"class":262,"line":1659},[260,4219,488],{"class":281},[260,4221,328],{"class":277},[260,4223,4224,4226,4228],{"class":262,"line":1664},[260,4225,620],{"class":281},[260,4227,405],{"class":295},[260,4229,425],{"class":281},[260,4231,4232],{"class":262,"line":1707},[260,4233,334],{"emptyLinePlaceholder":39},[260,4235,4236,4238,4240],{"class":262,"line":1716},[260,4237,402],{"class":281},[260,4239,967],{"class":295},[260,4241,425],{"class":281},[260,4243,4244,4246,4248],{"class":262,"line":1736},[260,4245,975],{"class":281},[260,4247,978],{"class":295},[260,4249,425],{"class":281},[260,4251,4252,4254],{"class":262,"line":1745},[260,4253,986],{"class":281},[260,4255,3081],{"class":295},[260,4257,4258,4261,4263,4265,4267,4269,4271,4273,4276,4279],{"class":262,"line":1750},[260,4259,4260],{"class":709}," v-for",[260,4262,282],{"class":281},[260,4264,416],{"class":281},[260,4266,289],{"class":281},[260,4268,909],{"class":277},[260,4270,1007],{"class":281},[260,4272,4076],{"class":277},[260,4274,4275],{"class":281},") in ",[260,4277,4278],{"class":277},"orbitPositions",[260,4280,3095],{"class":281},[260,4282,4283,4285,4288,4290,4292,4294],{"class":262,"line":1794},[260,4284,3573],{"class":281},[260,4286,4287],{"class":273},"key",[260,4289,282],{"class":281},[260,4291,416],{"class":281},[260,4293,4076],{"class":277},[260,4295,3095],{"class":281},[260,4297,4298,4300,4303,4305,4307,4309,4312,4314,4317,4319,4322,4324,4326,4329,4331,4333],{"class":262,"line":1803},[260,4299,3573],{"class":281},[260,4301,4302],{"class":273},"ref",[260,4304,282],{"class":281},[260,4306,416],{"class":281},[260,4308,289],{"class":281},[260,4310,4311],{"class":807},"el",[260,4313,562],{"class":281},[260,4315,4316],{"class":273},"=>",[260,4318,823],{"class":281},[260,4320,4321],{"class":277},"meshRefs",[260,4323,1001],{"class":281},[260,4325,4076],{"class":277},[260,4327,4328],{"class":281},"] = ",[260,4330,4311],{"class":277},[260,4332,2774],{"class":281},[260,4334,3095],{"class":281},[260,4336,4337,4339,4341,4343,4345,4347,4349,4351,4353,4355,4357,4359,4361,4363,4365,4367],{"class":262,"line":1823},[260,4338,3573],{"class":281},[260,4340,909],{"class":273},[260,4342,282],{"class":281},[260,4344,416],{"class":281},[260,4346,1001],{"class":281},[260,4348,909],{"class":277},[260,4350,349],{"class":281},[260,4352,530],{"class":277},[260,4354,1007],{"class":281},[260,4356,1004],{"class":302},[260,4358,1007],{"class":281},[260,4360,909],{"class":277},[260,4362,349],{"class":281},[260,4364,4169],{"class":277},[260,4366,1017],{"class":281},[260,4368,3095],{"class":281},[260,4370,4371],{"class":262,"line":1832},[260,4372,3589],{"class":281},[260,4374,4375,4377,4379,4381,4384,4386,4388,4390,4393,4395,4397],{"class":262,"line":1841},[260,4376,1070],{"class":281},[260,4378,1625],{"class":295},[260,4380,992],{"class":281},[260,4382,4383],{"class":273},"args",[260,4385,282],{"class":281},[260,4387,416],{"class":281},[260,4389,1001],{"class":281},[260,4391,4392],{"class":302},"0.2",[260,4394,1017],{"class":281},[260,4396,416],{"class":281},[260,4398,1022],{"class":281},[260,4400,4401,4403,4405,4407,4409,4411,4413,4415],{"class":262,"line":3123},[260,4402,1070],{"class":281},[260,4404,1083],{"class":295},[260,4406,1086],{"class":273},[260,4408,282],{"class":281},[260,4410,416],{"class":281},[260,4412,1093],{"class":419},[260,4414,416],{"class":281},[260,4416,1022],{"class":281},[260,4418,4419,4421,4423],{"class":262,"line":3132},[260,4420,1103],{"class":281},[260,4422,1051],{"class":295},[260,4424,425],{"class":281},[260,4426,4427,4429,4431],{"class":262,"line":3140},[260,4428,1113],{"class":281},[260,4430,978],{"class":295},[260,4432,425],{"class":281},[260,4434,4435,4437,4439],{"class":262,"line":3160},[260,4436,620],{"class":281},[260,4438,967],{"class":295},[260,4440,425],{"class":281},[233,4442,4444],{"id":4443},"_3-lifecycle-based-updates","3. Lifecycle-Based Updates",[222,4446,4447],{},"Use Vue's lifecycle hooks for performance-sensitive updates:",[249,4449,4452],{"className":392,"code":4450,"filename":4451,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\nconst meshRef = shallowRef\u003CTresInstance | null>(null)\nconst isAnimating = ref(true)\n\n// Performance-sensitive animation state\nconst animationState = {\n time: 0,\n amplitude: 2,\n frequency: 1\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ delta, elapsed }) => {\n if (!isAnimating.value || !meshRef.value) { return }\n\n // Update non-reactive state\n animationState.time += delta\n\n // Apply to Three.js instance\n meshRef.value.position.y = Math.sin(animationState.time * animationState.frequency) * animationState.amplitude\n meshRef.value.rotation.y = elapsed * 0.5\n})\n\n// Reactive controls that update animation parameters\nconst increaseAmplitude = () => {\n animationState.amplitude += 0.5\n}\n\nconst toggleAnimation = () => {\n isAnimating.value = !isAnimating.value\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv class=\"controls\">\n \u003Cbutton @click=\"toggleAnimation\">\n {{ isAnimating ? 'Pause' : 'Play' }} Animation\n \u003C/button>\n \u003Cbutton @click=\"increaseAmplitude\">Increase Amplitude\u003C/button>\n \u003C/div>\n\n \u003CTresCanvas>\n \u003CTresMesh ref=\"meshRef\">\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"teal\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n \u003C/div>\n\u003C/template>\n","lifecycle-updates.vue",[257,4453,4454,4474,4500,4518,4522,4527,4538,4549,4561,4571,4575,4579,4595,4616,4653,4657,4662,4677,4681,4686,4741,4765,4771,4775,4780,4795,4808,4812,4816,4831,4851,4855,4863,4867,4875,4883,4901,4922,4954,4962,4992,5000,5004,5012,5030,5038,5056,5064,5072,5080],{"__ignoreMap":255},[260,4455,4456,4458,4460,4462,4464,4466,4468,4470,4472],{"class":262,"line":263},[260,4457,402],{"class":281},[260,4459,405],{"class":295},[260,4461,408],{"class":273},[260,4463,411],{"class":273},[260,4465,282],{"class":281},[260,4467,416],{"class":281},[260,4469,420],{"class":419},[260,4471,416],{"class":281},[260,4473,425],{"class":281},[260,4475,4476,4478,4480,4482,4484,4486,4488,4490,4492,4494,4496,4498],{"class":262,"line":270},[260,4477,274],{"class":273},[260,4479,748],{"class":277},[260,4481,282],{"class":281},[260,4483,753],{"class":285},[260,4485,402],{"class":281},[260,4487,759],{"class":758},[260,4489,762],{"class":281},[260,4491,765],{"class":758},[260,4493,768],{"class":281},[260,4495,289],{"class":277},[260,4497,773],{"class":281},[260,4499,328],{"class":277},[260,4501,4502,4504,4507,4509,4511,4513,4516],{"class":262,"line":331},[260,4503,274],{"class":273},[260,4505,4506],{"class":277}," isAnimating ",[260,4508,282],{"class":281},[260,4510,1054],{"class":285},[260,4512,289],{"class":277},[260,4514,4515],{"class":2570},"true",[260,4517,328],{"class":277},[260,4519,4520],{"class":262,"line":337},[260,4521,334],{"emptyLinePlaceholder":39},[260,4523,4524],{"class":262,"line":343},[260,4525,4526],{"class":266},"// Performance-sensitive animation state\n",[260,4528,4529,4531,4534,4536],{"class":262,"line":363},[260,4530,274],{"class":273},[260,4532,4533],{"class":277}," animationState ",[260,4535,282],{"class":281},[260,4537,513],{"class":281},[260,4539,4540,4543,4545,4547],{"class":262,"line":516},[260,4541,4542],{"class":295}," time",[260,4544,299],{"class":281},[260,4546,303],{"class":302},[260,4548,2560],{"class":281},[260,4550,4551,4554,4556,4559],{"class":262,"line":522},[260,4552,4553],{"class":295}," amplitude",[260,4555,299],{"class":281},[260,4557,4558],{"class":302}," 2",[260,4560,2560],{"class":281},[260,4562,4563,4566,4568],{"class":262,"line":570},[260,4564,4565],{"class":295}," frequency",[260,4567,299],{"class":281},[260,4569,4570],{"class":302}," 1\n",[260,4572,4573],{"class":262,"line":610},[260,4574,2035],{"class":281},[260,4576,4577],{"class":262,"line":617},[260,4578,334],{"emptyLinePlaceholder":39},[260,4580,4581,4583,4585,4587,4589,4591,4593],{"class":262,"line":872},[260,4582,274],{"class":273},[260,4584,482],{"class":281},[260,4586,485],{"class":277},[260,4588,488],{"class":281},[260,4590,491],{"class":281},[260,4592,494],{"class":285},[260,4594,497],{"class":277},[260,4596,4597,4599,4601,4603,4606,4608,4610,4612,4614],{"class":262,"line":898},[260,4598,502],{"class":285},[260,4600,289],{"class":277},[260,4602,804],{"class":281},[260,4604,4605],{"class":807}," delta",[260,4607,306],{"class":281},[260,4609,808],{"class":807},[260,4611,811],{"class":281},[260,4613,510],{"class":273},[260,4615,513],{"class":281},[260,4617,4618,4620,4622,4625,4628,4630,4632,4635,4637,4639,4641,4643,4645,4647,4650],{"class":262,"line":935},[260,4619,820],{"class":709},[260,4621,823],{"class":295},[260,4623,4624],{"class":281},"!",[260,4626,4627],{"class":277},"isAnimating",[260,4629,349],{"class":281},[260,4631,831],{"class":277},[260,4633,4634],{"class":281}," ||",[260,4636,2695],{"class":281},[260,4638,826],{"class":277},[260,4640,349],{"class":281},[260,4642,831],{"class":277},[260,4644,562],{"class":295},[260,4646,292],{"class":281},[260,4648,4649],{"class":709}," return",[260,4651,4652],{"class":281}," }\n",[260,4654,4655],{"class":262,"line":941},[260,4656,334],{"emptyLinePlaceholder":39},[260,4658,4659],{"class":262,"line":948},[260,4660,4661],{"class":266}," // Update non-reactive state\n",[260,4663,4664,4667,4669,4672,4674],{"class":262,"line":957},[260,4665,4666],{"class":277}," animationState",[260,4668,349],{"class":281},[260,4670,4671],{"class":277},"time",[260,4673,2107],{"class":281},[260,4675,4676],{"class":277}," delta\n",[260,4678,4679],{"class":262,"line":962},[260,4680,334],{"emptyLinePlaceholder":39},[260,4682,4683],{"class":262,"line":972},[260,4684,4685],{"class":266}," // Apply to Three.js instance\n",[260,4687,4688,4691,4693,4695,4697,4699,4701,4703,4705,4707,4709,4711,4713,4716,4718,4720,4722,4725,4727,4730,4732,4734,4736,4738],{"class":262,"line":983},[260,4689,4690],{"class":277}," meshRef",[260,4692,349],{"class":281},[260,4694,831],{"class":277},[260,4696,349],{"class":281},[260,4698,909],{"class":277},[260,4700,349],{"class":281},[260,4702,577],{"class":277},[260,4704,491],{"class":281},[260,4706,535],{"class":277},[260,4708,349],{"class":281},[260,4710,540],{"class":285},[260,4712,289],{"class":295},[260,4714,4715],{"class":277},"animationState",[260,4717,349],{"class":281},[260,4719,4671],{"class":277},[260,4721,866],{"class":281},[260,4723,4724],{"class":277}," animationState",[260,4726,349],{"class":281},[260,4728,4729],{"class":277},"frequency",[260,4731,562],{"class":295},[260,4733,556],{"class":281},[260,4735,4724],{"class":277},[260,4737,349],{"class":281},[260,4739,4740],{"class":277},"amplitude\n",[260,4742,4743,4745,4747,4749,4751,4753,4755,4757,4759,4761,4763],{"class":262,"line":1025},[260,4744,4690],{"class":277},[260,4746,349],{"class":281},[260,4748,831],{"class":277},[260,4750,349],{"class":281},[260,4752,855],{"class":277},[260,4754,349],{"class":281},[260,4756,577],{"class":277},[260,4758,491],{"class":281},[260,4760,808],{"class":277},[260,4762,866],{"class":281},[260,4764,869],{"class":302},[260,4766,4767,4769],{"class":262,"line":1035},[260,4768,488],{"class":281},[260,4770,328],{"class":277},[260,4772,4773],{"class":262,"line":1040},[260,4774,334],{"emptyLinePlaceholder":39},[260,4776,4777],{"class":262,"line":1046},[260,4778,4779],{"class":266},"// Reactive controls that update animation parameters\n",[260,4781,4782,4784,4787,4789,4791,4793],{"class":262,"line":1067},[260,4783,274],{"class":273},[260,4785,4786],{"class":277}," increaseAmplitude ",[260,4788,282],{"class":281},[260,4790,1987],{"class":281},[260,4792,510],{"class":273},[260,4794,513],{"class":281},[260,4796,4797,4799,4801,4804,4806],{"class":262,"line":1078},[260,4798,4666],{"class":277},[260,4800,349],{"class":281},[260,4802,4803],{"class":277},"amplitude",[260,4805,2107],{"class":281},[260,4807,869],{"class":302},[260,4809,4810],{"class":262,"line":1100},[260,4811,2035],{"class":281},[260,4813,4814],{"class":262,"line":1110},[260,4815,334],{"emptyLinePlaceholder":39},[260,4817,4818,4820,4823,4825,4827,4829],{"class":262,"line":1120},[260,4819,274],{"class":273},[260,4821,4822],{"class":277}," toggleAnimation ",[260,4824,282],{"class":281},[260,4826,1987],{"class":281},[260,4828,510],{"class":273},[260,4830,513],{"class":281},[260,4832,4833,4836,4838,4840,4842,4844,4846,4848],{"class":262,"line":1620},[260,4834,4835],{"class":277}," isAnimating",[260,4837,349],{"class":281},[260,4839,831],{"class":277},[260,4841,491],{"class":281},[260,4843,2695],{"class":281},[260,4845,4627],{"class":277},[260,4847,349],{"class":281},[260,4849,4850],{"class":277},"value\n",[260,4852,4853],{"class":262,"line":1630},[260,4854,2035],{"class":281},[260,4856,4857,4859,4861],{"class":262,"line":1650},[260,4858,620],{"class":281},[260,4860,405],{"class":295},[260,4862,425],{"class":281},[260,4864,4865],{"class":262,"line":1659},[260,4866,334],{"emptyLinePlaceholder":39},[260,4868,4869,4871,4873],{"class":262,"line":1664},[260,4870,402],{"class":281},[260,4872,967],{"class":295},[260,4874,425],{"class":281},[260,4876,4877,4879,4881],{"class":262,"line":1707},[260,4878,975],{"class":281},[260,4880,2147],{"class":295},[260,4882,425],{"class":281},[260,4884,4885,4887,4889,4891,4893,4895,4897,4899],{"class":262,"line":1716},[260,4886,986],{"class":281},[260,4888,2147],{"class":295},[260,4890,2939],{"class":273},[260,4892,282],{"class":281},[260,4894,416],{"class":281},[260,4896,2946],{"class":419},[260,4898,416],{"class":281},[260,4900,425],{"class":281},[260,4902,4903,4905,4907,4909,4911,4913,4915,4918,4920],{"class":262,"line":1736},[260,4904,1070],{"class":281},[260,4906,2156],{"class":295},[260,4908,2159],{"class":281},[260,4910,2162],{"class":273},[260,4912,282],{"class":281},[260,4914,416],{"class":281},[260,4916,4917],{"class":277},"toggleAnimation",[260,4919,416],{"class":281},[260,4921,425],{"class":281},[260,4923,4924,4927,4929,4932,4934,4937,4939,4941,4943,4946,4948,4951],{"class":262,"line":1745},[260,4925,4926],{"class":281}," {{",[260,4928,4506],{"class":277},[260,4930,4931],{"class":281},"?",[260,4933,726],{"class":281},[260,4935,4936],{"class":419},"Pause",[260,4938,2557],{"class":281},[260,4940,992],{"class":281},[260,4942,726],{"class":281},[260,4944,4945],{"class":419},"Play",[260,4947,2557],{"class":281},[260,4949,4950],{"class":281}," }}",[260,4952,4953],{"class":277}," Animation\n",[260,4955,4956,4958,4960],{"class":262,"line":1750},[260,4957,2253],{"class":281},[260,4959,2156],{"class":295},[260,4961,425],{"class":281},[260,4963,4964,4966,4968,4970,4972,4974,4976,4979,4981,4983,4986,4988,4990],{"class":262,"line":1794},[260,4965,1070],{"class":281},[260,4967,2156],{"class":295},[260,4969,2159],{"class":281},[260,4971,2162],{"class":273},[260,4973,282],{"class":281},[260,4975,416],{"class":281},[260,4977,4978],{"class":277},"increaseAmplitude",[260,4980,416],{"class":281},[260,4982,768],{"class":281},[260,4984,4985],{"class":277},"Increase Amplitude",[260,4987,620],{"class":281},[260,4989,2156],{"class":295},[260,4991,425],{"class":281},[260,4993,4994,4996,4998],{"class":262,"line":1803},[260,4995,1103],{"class":281},[260,4997,2147],{"class":295},[260,4999,425],{"class":281},[260,5001,5002],{"class":262,"line":1823},[260,5003,334],{"emptyLinePlaceholder":39},[260,5005,5006,5008,5010],{"class":262,"line":1832},[260,5007,986],{"class":281},[260,5009,978],{"class":295},[260,5011,425],{"class":281},[260,5013,5014,5016,5018,5020,5022,5024,5026,5028],{"class":262,"line":1841},[260,5015,1070],{"class":281},[260,5017,1051],{"class":295},[260,5019,1054],{"class":273},[260,5021,282],{"class":281},[260,5023,416],{"class":281},[260,5025,826],{"class":419},[260,5027,416],{"class":281},[260,5029,425],{"class":281},[260,5031,5032,5034,5036],{"class":262,"line":3123},[260,5033,2225],{"class":281},[260,5035,1073],{"class":295},[260,5037,1022],{"class":281},[260,5039,5040,5042,5044,5046,5048,5050,5052,5054],{"class":262,"line":3132},[260,5041,2225],{"class":281},[260,5043,1083],{"class":295},[260,5045,1086],{"class":273},[260,5047,282],{"class":281},[260,5049,416],{"class":281},[260,5051,2244],{"class":419},[260,5053,416],{"class":281},[260,5055,1022],{"class":281},[260,5057,5058,5060,5062],{"class":262,"line":3140},[260,5059,2253],{"class":281},[260,5061,1051],{"class":295},[260,5063,425],{"class":281},[260,5065,5066,5068,5070],{"class":262,"line":3160},[260,5067,1103],{"class":281},[260,5069,978],{"class":295},[260,5071,425],{"class":281},[260,5073,5074,5076,5078],{"class":262,"line":3179},[260,5075,1113],{"class":281},[260,5077,2147],{"class":295},[260,5079,425],{"class":281},[260,5081,5082,5084,5086],{"class":262,"line":3185},[260,5083,620],{"class":281},[260,5085,967],{"class":295},[260,5087,425],{"class":281},[217,5089,5091],{"id":5090},"common-pitfalls-and-solutions","Common Pitfalls and Solutions",[233,5093,5095],{"id":5094},"pitfall-1-reactive-animation-data","โŒ Pitfall 1: Reactive Animation Data",[249,5097,5100],{"className":392,"code":5098,"filename":5099,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\n// โŒ DON'T: Reactive objects in render loop\nconst rotation = reactive({ x: 0, y: 0, z: 0 })\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n // This triggers Vue's reactivity system every frame\n rotation.x = elapsed * 0.5\n rotation.y = elapsed * 0.3\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh :rotation=\"[rotation.x, rotation.y, rotation.z]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial />\n \u003C/TresMesh>\n\u003C/template>\n","pitfall-reactive-animation.vue",[257,5101,5102,5122,5127,5168,5172,5188,5204,5209,5226,5242,5248,5256,5260,5268,5312,5320,5328,5336],{"__ignoreMap":255},[260,5103,5104,5106,5108,5110,5112,5114,5116,5118,5120],{"class":262,"line":263},[260,5105,402],{"class":281},[260,5107,405],{"class":295},[260,5109,408],{"class":273},[260,5111,411],{"class":273},[260,5113,282],{"class":281},[260,5115,416],{"class":281},[260,5117,420],{"class":419},[260,5119,416],{"class":281},[260,5121,425],{"class":281},[260,5123,5124],{"class":262,"line":270},[260,5125,5126],{"class":266},"// โŒ DON'T: Reactive objects in render loop\n",[260,5128,5129,5131,5134,5136,5138,5140,5142,5144,5146,5148,5150,5152,5154,5156,5158,5160,5162,5164,5166],{"class":262,"line":331},[260,5130,274],{"class":273},[260,5132,5133],{"class":277}," rotation ",[260,5135,282],{"class":281},[260,5137,286],{"class":285},[260,5139,289],{"class":277},[260,5141,292],{"class":281},[260,5143,296],{"class":295},[260,5145,299],{"class":281},[260,5147,303],{"class":302},[260,5149,306],{"class":281},[260,5151,309],{"class":295},[260,5153,299],{"class":281},[260,5155,303],{"class":302},[260,5157,306],{"class":281},[260,5159,318],{"class":295},[260,5161,299],{"class":281},[260,5163,303],{"class":302},[260,5165,325],{"class":281},[260,5167,328],{"class":277},[260,5169,5170],{"class":262,"line":337},[260,5171,334],{"emptyLinePlaceholder":39},[260,5173,5174,5176,5178,5180,5182,5184,5186],{"class":262,"line":343},[260,5175,274],{"class":273},[260,5177,482],{"class":281},[260,5179,485],{"class":277},[260,5181,488],{"class":281},[260,5183,491],{"class":281},[260,5185,494],{"class":285},[260,5187,497],{"class":277},[260,5189,5190,5192,5194,5196,5198,5200,5202],{"class":262,"line":363},[260,5191,502],{"class":285},[260,5193,289],{"class":277},[260,5195,804],{"class":281},[260,5197,808],{"class":807},[260,5199,811],{"class":281},[260,5201,510],{"class":273},[260,5203,513],{"class":281},[260,5205,5206],{"class":262,"line":516},[260,5207,5208],{"class":266}," // This triggers Vue's reactivity system every frame\n",[260,5210,5211,5214,5216,5218,5220,5222,5224],{"class":262,"line":522},[260,5212,5213],{"class":277}," rotation",[260,5215,349],{"class":281},[260,5217,530],{"class":277},[260,5219,491],{"class":281},[260,5221,808],{"class":277},[260,5223,866],{"class":281},[260,5225,869],{"class":302},[260,5227,5228,5230,5232,5234,5236,5238,5240],{"class":262,"line":570},[260,5229,5213],{"class":277},[260,5231,349],{"class":281},[260,5233,577],{"class":277},[260,5235,491],{"class":281},[260,5237,808],{"class":277},[260,5239,866],{"class":281},[260,5241,895],{"class":302},[260,5243,5244,5246],{"class":262,"line":610},[260,5245,488],{"class":281},[260,5247,328],{"class":277},[260,5249,5250,5252,5254],{"class":262,"line":617},[260,5251,620],{"class":281},[260,5253,405],{"class":295},[260,5255,425],{"class":281},[260,5257,5258],{"class":262,"line":872},[260,5259,334],{"emptyLinePlaceholder":39},[260,5261,5262,5264,5266],{"class":262,"line":898},[260,5263,402],{"class":281},[260,5265,967],{"class":295},[260,5267,425],{"class":281},[260,5269,5270,5272,5274,5276,5278,5280,5282,5284,5286,5288,5290,5292,5294,5296,5298,5300,5302,5304,5306,5308,5310],{"class":262,"line":935},[260,5271,975],{"class":281},[260,5273,1051],{"class":295},[260,5275,992],{"class":281},[260,5277,855],{"class":273},[260,5279,282],{"class":281},[260,5281,416],{"class":281},[260,5283,1001],{"class":281},[260,5285,855],{"class":277},[260,5287,349],{"class":281},[260,5289,530],{"class":277},[260,5291,1007],{"class":281},[260,5293,855],{"class":277},[260,5295,349],{"class":281},[260,5297,577],{"class":277},[260,5299,1007],{"class":281},[260,5301,855],{"class":277},[260,5303,349],{"class":281},[260,5305,4169],{"class":277},[260,5307,1017],{"class":281},[260,5309,416],{"class":281},[260,5311,425],{"class":281},[260,5313,5314,5316,5318],{"class":262,"line":941},[260,5315,986],{"class":281},[260,5317,1073],{"class":295},[260,5319,1022],{"class":281},[260,5321,5322,5324,5326],{"class":262,"line":948},[260,5323,986],{"class":281},[260,5325,1083],{"class":295},[260,5327,1022],{"class":281},[260,5329,5330,5332,5334],{"class":262,"line":957},[260,5331,1113],{"class":281},[260,5333,1051],{"class":295},[260,5335,425],{"class":281},[260,5337,5338,5340,5342],{"class":262,"line":962},[260,5339,620],{"class":281},[260,5341,967],{"class":295},[260,5343,425],{"class":281},[222,5345,5346],{},[643,5347,5348],{},"Solution: Use template refs",[249,5350,5353],{"className":392,"code":5351,"filename":5352,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\n// โœ… DO: Direct instance manipulation\nconst meshRef = shallowRef\u003CTresInstance | null>(null)\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n if (meshRef.value) {\n meshRef.value.rotation.x = elapsed * 0.5\n meshRef.value.rotation.y = elapsed * 0.3\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh ref=\"meshRef\">\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial />\n \u003C/TresMesh>\n\u003C/template>\n","solution-template-refs.vue",[257,5354,5355,5375,5380,5406,5410,5426,5442,5458,5482,5506,5510,5516,5524,5528,5536,5554,5562,5570,5578],{"__ignoreMap":255},[260,5356,5357,5359,5361,5363,5365,5367,5369,5371,5373],{"class":262,"line":263},[260,5358,402],{"class":281},[260,5360,405],{"class":295},[260,5362,408],{"class":273},[260,5364,411],{"class":273},[260,5366,282],{"class":281},[260,5368,416],{"class":281},[260,5370,420],{"class":419},[260,5372,416],{"class":281},[260,5374,425],{"class":281},[260,5376,5377],{"class":262,"line":270},[260,5378,5379],{"class":266},"// โœ… DO: Direct instance manipulation\n",[260,5381,5382,5384,5386,5388,5390,5392,5394,5396,5398,5400,5402,5404],{"class":262,"line":331},[260,5383,274],{"class":273},[260,5385,748],{"class":277},[260,5387,282],{"class":281},[260,5389,753],{"class":285},[260,5391,402],{"class":281},[260,5393,759],{"class":758},[260,5395,762],{"class":281},[260,5397,765],{"class":758},[260,5399,768],{"class":281},[260,5401,289],{"class":277},[260,5403,773],{"class":281},[260,5405,328],{"class":277},[260,5407,5408],{"class":262,"line":337},[260,5409,334],{"emptyLinePlaceholder":39},[260,5411,5412,5414,5416,5418,5420,5422,5424],{"class":262,"line":343},[260,5413,274],{"class":273},[260,5415,482],{"class":281},[260,5417,485],{"class":277},[260,5419,488],{"class":281},[260,5421,491],{"class":281},[260,5423,494],{"class":285},[260,5425,497],{"class":277},[260,5427,5428,5430,5432,5434,5436,5438,5440],{"class":262,"line":363},[260,5429,502],{"class":285},[260,5431,289],{"class":277},[260,5433,804],{"class":281},[260,5435,808],{"class":807},[260,5437,811],{"class":281},[260,5439,510],{"class":273},[260,5441,513],{"class":281},[260,5443,5444,5446,5448,5450,5452,5454,5456],{"class":262,"line":516},[260,5445,820],{"class":709},[260,5447,823],{"class":295},[260,5449,826],{"class":277},[260,5451,349],{"class":281},[260,5453,831],{"class":277},[260,5455,562],{"class":295},[260,5457,836],{"class":281},[260,5459,5460,5462,5464,5466,5468,5470,5472,5474,5476,5478,5480],{"class":262,"line":522},[260,5461,846],{"class":277},[260,5463,349],{"class":281},[260,5465,831],{"class":277},[260,5467,349],{"class":281},[260,5469,855],{"class":277},[260,5471,349],{"class":281},[260,5473,530],{"class":277},[260,5475,491],{"class":281},[260,5477,808],{"class":277},[260,5479,866],{"class":281},[260,5481,869],{"class":302},[260,5483,5484,5486,5488,5490,5492,5494,5496,5498,5500,5502,5504],{"class":262,"line":570},[260,5485,846],{"class":277},[260,5487,349],{"class":281},[260,5489,831],{"class":277},[260,5491,349],{"class":281},[260,5493,855],{"class":277},[260,5495,349],{"class":281},[260,5497,577],{"class":277},[260,5499,491],{"class":281},[260,5501,808],{"class":277},[260,5503,866],{"class":281},[260,5505,895],{"class":302},[260,5507,5508],{"class":262,"line":610},[260,5509,938],{"class":281},[260,5511,5512,5514],{"class":262,"line":617},[260,5513,488],{"class":281},[260,5515,328],{"class":277},[260,5517,5518,5520,5522],{"class":262,"line":872},[260,5519,620],{"class":281},[260,5521,405],{"class":295},[260,5523,425],{"class":281},[260,5525,5526],{"class":262,"line":898},[260,5527,334],{"emptyLinePlaceholder":39},[260,5529,5530,5532,5534],{"class":262,"line":935},[260,5531,402],{"class":281},[260,5533,967],{"class":295},[260,5535,425],{"class":281},[260,5537,5538,5540,5542,5544,5546,5548,5550,5552],{"class":262,"line":941},[260,5539,975],{"class":281},[260,5541,1051],{"class":295},[260,5543,1054],{"class":273},[260,5545,282],{"class":281},[260,5547,416],{"class":281},[260,5549,826],{"class":419},[260,5551,416],{"class":281},[260,5553,425],{"class":281},[260,5555,5556,5558,5560],{"class":262,"line":948},[260,5557,986],{"class":281},[260,5559,1073],{"class":295},[260,5561,1022],{"class":281},[260,5563,5564,5566,5568],{"class":262,"line":957},[260,5565,986],{"class":281},[260,5567,1083],{"class":295},[260,5569,1022],{"class":281},[260,5571,5572,5574,5576],{"class":262,"line":962},[260,5573,1113],{"class":281},[260,5575,1051],{"class":295},[260,5577,425],{"class":281},[260,5579,5580,5582,5584],{"class":262,"line":972},[260,5581,620],{"class":281},[260,5583,967],{"class":295},[260,5585,425],{"class":281},[233,5587,5589],{"id":5588},"pitfall-2-deep-reactive-arrays","โŒ Pitfall 2: Deep Reactive Arrays",[249,5591,5594],{"className":392,"code":5592,"filename":5593,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\n// โŒ DON'T: Deep reactive array updates\nconst particles = reactive(Array.from({ length: 100 }, (_, i) => ({\n position: { x: i, y: 0, z: 0 },\n velocity: { x: 0, y: 0, z: 0 }\n})))\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(() => {\n particles.forEach((particle) => {\n // This is extremely expensive with 100 reactive objects\n particle.position.x += particle.velocity.x\n particle.position.y += particle.velocity.y\n })\n})\n\u003C/script>\n","pitfall-reactive-arrays.vue",[257,5595,5596,5616,5621,5672,5705,5738,5745,5749,5765,5777,5799,5804,5832,5857,5863,5869],{"__ignoreMap":255},[260,5597,5598,5600,5602,5604,5606,5608,5610,5612,5614],{"class":262,"line":263},[260,5599,402],{"class":281},[260,5601,405],{"class":295},[260,5603,408],{"class":273},[260,5605,411],{"class":273},[260,5607,282],{"class":281},[260,5609,416],{"class":281},[260,5611,420],{"class":419},[260,5613,416],{"class":281},[260,5615,425],{"class":281},[260,5617,5618],{"class":262,"line":270},[260,5619,5620],{"class":266},"// โŒ DON'T: Deep reactive array updates\n",[260,5622,5623,5625,5628,5630,5632,5635,5637,5640,5642,5644,5647,5649,5652,5655,5657,5660,5662,5664,5666,5668,5670],{"class":262,"line":331},[260,5624,274],{"class":273},[260,5626,5627],{"class":277}," particles ",[260,5629,282],{"class":281},[260,5631,286],{"class":285},[260,5633,5634],{"class":277},"(Array",[260,5636,349],{"class":281},[260,5638,5639],{"class":285},"from",[260,5641,289],{"class":277},[260,5643,292],{"class":281},[260,5645,5646],{"class":295}," length",[260,5648,299],{"class":281},[260,5650,5651],{"class":302}," 100",[260,5653,5654],{"class":281}," },",[260,5656,823],{"class":281},[260,5658,5659],{"class":807},"_",[260,5661,306],{"class":281},[260,5663,3784],{"class":807},[260,5665,2774],{"class":281},[260,5667,510],{"class":273},[260,5669,823],{"class":277},[260,5671,836],{"class":281},[260,5673,5674,5676,5678,5680,5682,5684,5686,5688,5690,5692,5694,5696,5698,5700,5702],{"class":262,"line":337},[260,5675,525],{"class":295},[260,5677,299],{"class":281},[260,5679,482],{"class":281},[260,5681,296],{"class":295},[260,5683,299],{"class":281},[260,5685,3784],{"class":277},[260,5687,306],{"class":281},[260,5689,309],{"class":295},[260,5691,299],{"class":281},[260,5693,303],{"class":302},[260,5695,306],{"class":281},[260,5697,318],{"class":295},[260,5699,299],{"class":281},[260,5701,303],{"class":302},[260,5703,5704],{"class":281}," },\n",[260,5706,5707,5710,5712,5714,5716,5718,5720,5722,5724,5726,5728,5730,5732,5734,5736],{"class":262,"line":343},[260,5708,5709],{"class":295}," velocity",[260,5711,299],{"class":281},[260,5713,482],{"class":281},[260,5715,296],{"class":295},[260,5717,299],{"class":281},[260,5719,303],{"class":302},[260,5721,306],{"class":281},[260,5723,309],{"class":295},[260,5725,299],{"class":281},[260,5727,303],{"class":302},[260,5729,306],{"class":281},[260,5731,318],{"class":295},[260,5733,299],{"class":281},[260,5735,303],{"class":302},[260,5737,4652],{"class":281},[260,5739,5740,5742],{"class":262,"line":363},[260,5741,488],{"class":281},[260,5743,5744],{"class":277},")))\n",[260,5746,5747],{"class":262,"line":516},[260,5748,334],{"emptyLinePlaceholder":39},[260,5750,5751,5753,5755,5757,5759,5761,5763],{"class":262,"line":522},[260,5752,274],{"class":273},[260,5754,482],{"class":281},[260,5756,485],{"class":277},[260,5758,488],{"class":281},[260,5760,491],{"class":281},[260,5762,494],{"class":285},[260,5764,497],{"class":277},[260,5766,5767,5769,5771,5773,5775],{"class":262,"line":570},[260,5768,502],{"class":285},[260,5770,289],{"class":277},[260,5772,507],{"class":281},[260,5774,510],{"class":273},[260,5776,513],{"class":281},[260,5778,5779,5782,5784,5786,5788,5790,5793,5795,5797],{"class":262,"line":610},[260,5780,5781],{"class":277}," particles",[260,5783,349],{"class":281},[260,5785,4034],{"class":285},[260,5787,289],{"class":295},[260,5789,289],{"class":281},[260,5791,5792],{"class":807},"particle",[260,5794,2774],{"class":281},[260,5796,510],{"class":273},[260,5798,513],{"class":281},[260,5800,5801],{"class":262,"line":617},[260,5802,5803],{"class":266}," // This is extremely expensive with 100 reactive objects\n",[260,5805,5806,5809,5811,5813,5815,5817,5819,5822,5824,5827,5829],{"class":262,"line":872},[260,5807,5808],{"class":277}," particle",[260,5810,349],{"class":281},[260,5812,909],{"class":277},[260,5814,349],{"class":281},[260,5816,530],{"class":277},[260,5818,2107],{"class":281},[260,5820,5821],{"class":277}," particle",[260,5823,349],{"class":281},[260,5825,5826],{"class":277},"velocity",[260,5828,349],{"class":281},[260,5830,5831],{"class":277},"x\n",[260,5833,5834,5836,5838,5840,5842,5844,5846,5848,5850,5852,5854],{"class":262,"line":898},[260,5835,5808],{"class":277},[260,5837,349],{"class":281},[260,5839,909],{"class":277},[260,5841,349],{"class":281},[260,5843,577],{"class":277},[260,5845,2107],{"class":281},[260,5847,5821],{"class":277},[260,5849,349],{"class":281},[260,5851,5826],{"class":277},[260,5853,349],{"class":281},[260,5855,5856],{"class":277},"y\n",[260,5858,5859,5861],{"class":262,"line":935},[260,5860,4213],{"class":281},[260,5862,328],{"class":295},[260,5864,5865,5867],{"class":262,"line":941},[260,5866,488],{"class":281},[260,5868,328],{"class":277},[260,5870,5871,5873,5875],{"class":262,"line":948},[260,5872,620],{"class":281},[260,5874,405],{"class":295},[260,5876,425],{"class":281},[222,5878,5879],{},[643,5880,5881],{},"Solution: Non-reactive data with template refs",[249,5883,5886],{"className":392,"code":5884,"filename":5885,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\n// โœ… DO: Plain objects + template refs\nconst particleData = Array.from({ length: 100 }, (_, i) => ({\n position: { x: i, y: 0, z: 0 },\n velocity: { x: (Math.random() - 0.5) * 0.1, y: 0, z: 0 }\n}))\n\nconst particleRefs = shallowRef\u003C(TresInstance | null)[]>([])\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(() => {\n particleData.forEach((particle, index) => {\n // Update plain object data\n particle.position.x += particle.velocity.x\n particle.position.y += particle.velocity.y\n\n // Apply to Three.js instance\n const mesh = particleRefs.value[index]\n if (mesh) {\n mesh.position.set(particle.position.x, particle.position.y, particle.position.z)\n }\n })\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresMesh\n v-for=\"(_, index) in particleData\"\n :key=\"index\"\n :ref=\"(el) => (particleRefs[index] = el)\"\n >\n \u003CTresSphereGeometry :args=\"[0.05]\" />\n \u003CTresMeshBasicMaterial />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n","solution-particle-system.vue",[257,5887,5888,5908,5913,5957,5989,6039,6046,6050,6077,6081,6097,6109,6134,6139,6163,6187,6191,6196,6218,6230,6281,6285,6291,6297,6305,6309,6317,6325,6331,6354,6368,6403,6407,6432,6441,6449,6457],{"__ignoreMap":255},[260,5889,5890,5892,5894,5896,5898,5900,5902,5904,5906],{"class":262,"line":263},[260,5891,402],{"class":281},[260,5893,405],{"class":295},[260,5895,408],{"class":273},[260,5897,411],{"class":273},[260,5899,282],{"class":281},[260,5901,416],{"class":281},[260,5903,420],{"class":419},[260,5905,416],{"class":281},[260,5907,425],{"class":281},[260,5909,5910],{"class":262,"line":270},[260,5911,5912],{"class":266},"// โœ… DO: Plain objects + template refs\n",[260,5914,5915,5917,5920,5922,5925,5927,5929,5931,5933,5935,5937,5939,5941,5943,5945,5947,5949,5951,5953,5955],{"class":262,"line":331},[260,5916,274],{"class":273},[260,5918,5919],{"class":277}," particleData ",[260,5921,282],{"class":281},[260,5923,5924],{"class":277}," Array",[260,5926,349],{"class":281},[260,5928,5639],{"class":285},[260,5930,289],{"class":277},[260,5932,292],{"class":281},[260,5934,5646],{"class":295},[260,5936,299],{"class":281},[260,5938,5651],{"class":302},[260,5940,5654],{"class":281},[260,5942,823],{"class":281},[260,5944,5659],{"class":807},[260,5946,306],{"class":281},[260,5948,3784],{"class":807},[260,5950,2774],{"class":281},[260,5952,510],{"class":273},[260,5954,823],{"class":277},[260,5956,836],{"class":281},[260,5958,5959,5961,5963,5965,5967,5969,5971,5973,5975,5977,5979,5981,5983,5985,5987],{"class":262,"line":337},[260,5960,525],{"class":295},[260,5962,299],{"class":281},[260,5964,482],{"class":281},[260,5966,296],{"class":295},[260,5968,299],{"class":281},[260,5970,3784],{"class":277},[260,5972,306],{"class":281},[260,5974,309],{"class":295},[260,5976,299],{"class":281},[260,5978,303],{"class":302},[260,5980,306],{"class":281},[260,5982,318],{"class":295},[260,5984,299],{"class":281},[260,5986,303],{"class":302},[260,5988,5704],{"class":281},[260,5990,5991,5993,5995,5997,5999,6001,6004,6006,6008,6010,6012,6014,6016,6018,6021,6023,6025,6027,6029,6031,6033,6035,6037],{"class":262,"line":343},[260,5992,5709],{"class":295},[260,5994,299],{"class":281},[260,5996,482],{"class":281},[260,5998,296],{"class":295},[260,6000,299],{"class":281},[260,6002,6003],{"class":277}," (Math",[260,6005,349],{"class":281},[260,6007,2764],{"class":285},[260,6009,553],{"class":277},[260,6011,3384],{"class":281},[260,6013,1426],{"class":302},[260,6015,562],{"class":277},[260,6017,556],{"class":281},[260,6019,6020],{"class":302}," 0.1",[260,6022,306],{"class":281},[260,6024,309],{"class":295},[260,6026,299],{"class":281},[260,6028,303],{"class":302},[260,6030,306],{"class":281},[260,6032,318],{"class":295},[260,6034,299],{"class":281},[260,6036,303],{"class":302},[260,6038,4652],{"class":281},[260,6040,6041,6043],{"class":262,"line":363},[260,6042,488],{"class":281},[260,6044,6045],{"class":277},"))\n",[260,6047,6048],{"class":262,"line":516},[260,6049,334],{"emptyLinePlaceholder":39},[260,6051,6052,6054,6057,6059,6061,6063,6065,6067,6069,6071,6073,6075],{"class":262,"line":522},[260,6053,274],{"class":273},[260,6055,6056],{"class":277}," particleRefs ",[260,6058,282],{"class":281},[260,6060,753],{"class":285},[260,6062,402],{"class":281},[260,6064,289],{"class":277},[260,6066,759],{"class":758},[260,6068,762],{"class":281},[260,6070,765],{"class":758},[260,6072,3979],{"class":277},[260,6074,768],{"class":281},[260,6076,3984],{"class":277},[260,6078,6079],{"class":262,"line":570},[260,6080,334],{"emptyLinePlaceholder":39},[260,6082,6083,6085,6087,6089,6091,6093,6095],{"class":262,"line":610},[260,6084,274],{"class":273},[260,6086,482],{"class":281},[260,6088,485],{"class":277},[260,6090,488],{"class":281},[260,6092,491],{"class":281},[260,6094,494],{"class":285},[260,6096,497],{"class":277},[260,6098,6099,6101,6103,6105,6107],{"class":262,"line":617},[260,6100,502],{"class":285},[260,6102,289],{"class":277},[260,6104,507],{"class":281},[260,6106,510],{"class":273},[260,6108,513],{"class":281},[260,6110,6111,6114,6116,6118,6120,6122,6124,6126,6128,6130,6132],{"class":262,"line":872},[260,6112,6113],{"class":277}," particleData",[260,6115,349],{"class":281},[260,6117,4034],{"class":285},[260,6119,289],{"class":295},[260,6121,289],{"class":281},[260,6123,5792],{"class":807},[260,6125,306],{"class":281},[260,6127,4046],{"class":807},[260,6129,2774],{"class":281},[260,6131,510],{"class":273},[260,6133,513],{"class":281},[260,6135,6136],{"class":262,"line":898},[260,6137,6138],{"class":266}," // Update plain object data\n",[260,6140,6141,6143,6145,6147,6149,6151,6153,6155,6157,6159,6161],{"class":262,"line":935},[260,6142,5808],{"class":277},[260,6144,349],{"class":281},[260,6146,909],{"class":277},[260,6148,349],{"class":281},[260,6150,530],{"class":277},[260,6152,2107],{"class":281},[260,6154,5821],{"class":277},[260,6156,349],{"class":281},[260,6158,5826],{"class":277},[260,6160,349],{"class":281},[260,6162,5831],{"class":277},[260,6164,6165,6167,6169,6171,6173,6175,6177,6179,6181,6183,6185],{"class":262,"line":941},[260,6166,5808],{"class":277},[260,6168,349],{"class":281},[260,6170,909],{"class":277},[260,6172,349],{"class":281},[260,6174,577],{"class":277},[260,6176,2107],{"class":281},[260,6178,5821],{"class":277},[260,6180,349],{"class":281},[260,6182,5826],{"class":277},[260,6184,349],{"class":281},[260,6186,5856],{"class":277},[260,6188,6189],{"class":262,"line":948},[260,6190,334],{"emptyLinePlaceholder":39},[260,6192,6193],{"class":262,"line":957},[260,6194,6195],{"class":266}," // Apply to Three.js instance\n",[260,6197,6198,6200,6203,6205,6208,6210,6212,6214,6216],{"class":262,"line":962},[260,6199,3820],{"class":273},[260,6201,6202],{"class":277}," mesh",[260,6204,491],{"class":281},[260,6206,6207],{"class":277}," particleRefs",[260,6209,349],{"class":281},[260,6211,831],{"class":277},[260,6213,1001],{"class":295},[260,6215,4076],{"class":277},[260,6217,3398],{"class":295},[260,6219,6220,6222,6224,6226,6228],{"class":262,"line":972},[260,6221,4057],{"class":709},[260,6223,823],{"class":295},[260,6225,4041],{"class":277},[260,6227,562],{"class":295},[260,6229,836],{"class":281},[260,6231,6232,6234,6236,6238,6240,6243,6245,6247,6249,6251,6253,6255,6257,6259,6261,6263,6265,6267,6269,6271,6273,6275,6277,6279],{"class":262,"line":983},[260,6233,4113],{"class":277},[260,6235,349],{"class":281},[260,6237,909],{"class":277},[260,6239,349],{"class":281},[260,6241,6242],{"class":285},"set",[260,6244,289],{"class":295},[260,6246,5792],{"class":277},[260,6248,349],{"class":281},[260,6250,909],{"class":277},[260,6252,349],{"class":281},[260,6254,530],{"class":277},[260,6256,306],{"class":281},[260,6258,5821],{"class":277},[260,6260,349],{"class":281},[260,6262,909],{"class":277},[260,6264,349],{"class":281},[260,6266,577],{"class":277},[260,6268,306],{"class":281},[260,6270,5821],{"class":277},[260,6272,349],{"class":281},[260,6274,909],{"class":277},[260,6276,349],{"class":281},[260,6278,4169],{"class":277},[260,6280,328],{"class":295},[260,6282,6283],{"class":262,"line":1025},[260,6284,4208],{"class":281},[260,6286,6287,6289],{"class":262,"line":1035},[260,6288,4213],{"class":281},[260,6290,328],{"class":295},[260,6292,6293,6295],{"class":262,"line":1040},[260,6294,488],{"class":281},[260,6296,328],{"class":277},[260,6298,6299,6301,6303],{"class":262,"line":1046},[260,6300,620],{"class":281},[260,6302,405],{"class":295},[260,6304,425],{"class":281},[260,6306,6307],{"class":262,"line":1067},[260,6308,334],{"emptyLinePlaceholder":39},[260,6310,6311,6313,6315],{"class":262,"line":1078},[260,6312,402],{"class":281},[260,6314,967],{"class":295},[260,6316,425],{"class":281},[260,6318,6319,6321,6323],{"class":262,"line":1100},[260,6320,975],{"class":281},[260,6322,978],{"class":295},[260,6324,425],{"class":281},[260,6326,6327,6329],{"class":262,"line":1110},[260,6328,986],{"class":281},[260,6330,3081],{"class":295},[260,6332,6333,6335,6337,6339,6341,6343,6345,6347,6349,6352],{"class":262,"line":1120},[260,6334,4260],{"class":709},[260,6336,282],{"class":281},[260,6338,416],{"class":281},[260,6340,289],{"class":281},[260,6342,5659],{"class":277},[260,6344,1007],{"class":281},[260,6346,4076],{"class":277},[260,6348,4275],{"class":281},[260,6350,6351],{"class":277},"particleData",[260,6353,3095],{"class":281},[260,6355,6356,6358,6360,6362,6364,6366],{"class":262,"line":1620},[260,6357,3573],{"class":281},[260,6359,4287],{"class":273},[260,6361,282],{"class":281},[260,6363,416],{"class":281},[260,6365,4076],{"class":277},[260,6367,3095],{"class":281},[260,6369,6370,6372,6374,6376,6378,6380,6382,6384,6386,6388,6391,6393,6395,6397,6399,6401],{"class":262,"line":1630},[260,6371,3573],{"class":281},[260,6373,4302],{"class":273},[260,6375,282],{"class":281},[260,6377,416],{"class":281},[260,6379,289],{"class":281},[260,6381,4311],{"class":807},[260,6383,562],{"class":281},[260,6385,4316],{"class":273},[260,6387,823],{"class":281},[260,6389,6390],{"class":277},"particleRefs",[260,6392,1001],{"class":281},[260,6394,4076],{"class":277},[260,6396,4328],{"class":281},[260,6398,4311],{"class":277},[260,6400,2774],{"class":281},[260,6402,3095],{"class":281},[260,6404,6405],{"class":262,"line":1650},[260,6406,3589],{"class":281},[260,6408,6409,6411,6413,6415,6417,6419,6421,6423,6426,6428,6430],{"class":262,"line":1659},[260,6410,1070],{"class":281},[260,6412,1625],{"class":295},[260,6414,992],{"class":281},[260,6416,4383],{"class":273},[260,6418,282],{"class":281},[260,6420,416],{"class":281},[260,6422,1001],{"class":281},[260,6424,6425],{"class":302},"0.05",[260,6427,1017],{"class":281},[260,6429,416],{"class":281},[260,6431,1022],{"class":281},[260,6433,6434,6436,6439],{"class":262,"line":1664},[260,6435,1070],{"class":281},[260,6437,6438],{"class":295},"TresMeshBasicMaterial",[260,6440,1022],{"class":281},[260,6442,6443,6445,6447],{"class":262,"line":1707},[260,6444,1103],{"class":281},[260,6446,1051],{"class":295},[260,6448,425],{"class":281},[260,6450,6451,6453,6455],{"class":262,"line":1716},[260,6452,1113],{"class":281},[260,6454,978],{"class":295},[260,6456,425],{"class":281},[260,6458,6459,6461,6463],{"class":262,"line":1736},[260,6460,620],{"class":281},[260,6462,967],{"class":295},[260,6464,425],{"class":281},[217,6466,6468],{"id":6467},"performance-monitoring","Performance Monitoring",[6470,6471],"examples-performance-monitor",{},[222,6473,6474,6475,6478,6479,6484],{},"Use ",[257,6476,6477],{},"@tresjs/leches"," ",[241,6480,6483],{"href":6481,"rel":6482},"https://tresleches.tresjs.org/misc/#fpsgraph",[245],"built-in fpsgraph"," for monitoring performance in your TresJS applications. This control displays real-time FPS information:",[249,6486,6489],{"className":392,"code":6487,"filename":6488,"language":395,"meta":255,"style":255},"\u003Cscript setup lang=\"ts\">\nimport { TresLeches, useControls } from '@tresjs/leches'\n\n// Enable FPS monitoring with TresLeches\nuseControls('fpsgraph')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresLeches />\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n \u003CTresAmbientLight />\n\n \u003CTresMesh>\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"teal\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[257,6490,6491,6511,6535,6539,6544,6560,6568,6572,6580,6589,6597,6629,6637,6641,6649,6657,6675,6683,6691],{"__ignoreMap":255},[260,6492,6493,6495,6497,6499,6501,6503,6505,6507,6509],{"class":262,"line":263},[260,6494,402],{"class":281},[260,6496,405],{"class":295},[260,6498,408],{"class":273},[260,6500,411],{"class":273},[260,6502,282],{"class":281},[260,6504,416],{"class":281},[260,6506,420],{"class":419},[260,6508,416],{"class":281},[260,6510,425],{"class":281},[260,6512,6513,6515,6517,6520,6522,6525,6527,6529,6531,6533],{"class":262,"line":270},[260,6514,710],{"class":709},[260,6516,482],{"class":281},[260,6518,6519],{"class":277}," TresLeches",[260,6521,306],{"class":281},[260,6523,6524],{"class":277}," useControls",[260,6526,325],{"class":281},[260,6528,723],{"class":709},[260,6530,726],{"class":281},[260,6532,6477],{"class":419},[260,6534,732],{"class":281},[260,6536,6537],{"class":262,"line":331},[260,6538,334],{"emptyLinePlaceholder":39},[260,6540,6541],{"class":262,"line":337},[260,6542,6543],{"class":266},"// Enable FPS monitoring with TresLeches\n",[260,6545,6546,6549,6551,6553,6556,6558],{"class":262,"line":343},[260,6547,6548],{"class":285},"useControls",[260,6550,289],{"class":277},[260,6552,2557],{"class":281},[260,6554,6555],{"class":419},"fpsgraph",[260,6557,2557],{"class":281},[260,6559,328],{"class":277},[260,6561,6562,6564,6566],{"class":262,"line":363},[260,6563,620],{"class":281},[260,6565,405],{"class":295},[260,6567,425],{"class":281},[260,6569,6570],{"class":262,"line":516},[260,6571,334],{"emptyLinePlaceholder":39},[260,6573,6574,6576,6578],{"class":262,"line":522},[260,6575,402],{"class":281},[260,6577,967],{"class":295},[260,6579,425],{"class":281},[260,6581,6582,6584,6587],{"class":262,"line":570},[260,6583,975],{"class":281},[260,6585,6586],{"class":295},"TresLeches",[260,6588,1022],{"class":281},[260,6590,6591,6593,6595],{"class":262,"line":610},[260,6592,975],{"class":281},[260,6594,978],{"class":295},[260,6596,425],{"class":281},[260,6598,6599,6601,6603,6605,6607,6609,6611,6613,6615,6617,6619,6621,6623,6625,6627],{"class":262,"line":617},[260,6600,986],{"class":281},[260,6602,989],{"class":295},[260,6604,992],{"class":281},[260,6606,909],{"class":273},[260,6608,282],{"class":281},[260,6610,416],{"class":281},[260,6612,1001],{"class":281},[260,6614,1004],{"class":302},[260,6616,1007],{"class":281},[260,6618,1004],{"class":302},[260,6620,1007],{"class":281},[260,6622,1014],{"class":302},[260,6624,1017],{"class":281},[260,6626,416],{"class":281},[260,6628,1022],{"class":281},[260,6630,6631,6633,6635],{"class":262,"line":872},[260,6632,986],{"class":281},[260,6634,1030],{"class":295},[260,6636,1022],{"class":281},[260,6638,6639],{"class":262,"line":898},[260,6640,334],{"emptyLinePlaceholder":39},[260,6642,6643,6645,6647],{"class":262,"line":935},[260,6644,986],{"class":281},[260,6646,1051],{"class":295},[260,6648,425],{"class":281},[260,6650,6651,6653,6655],{"class":262,"line":941},[260,6652,1070],{"class":281},[260,6654,1073],{"class":295},[260,6656,1022],{"class":281},[260,6658,6659,6661,6663,6665,6667,6669,6671,6673],{"class":262,"line":948},[260,6660,1070],{"class":281},[260,6662,1083],{"class":295},[260,6664,1086],{"class":273},[260,6666,282],{"class":281},[260,6668,416],{"class":281},[260,6670,2244],{"class":419},[260,6672,416],{"class":281},[260,6674,1022],{"class":281},[260,6676,6677,6679,6681],{"class":262,"line":957},[260,6678,1103],{"class":281},[260,6680,1051],{"class":295},[260,6682,425],{"class":281},[260,6684,6685,6687,6689],{"class":262,"line":962},[260,6686,1113],{"class":281},[260,6688,978],{"class":295},[260,6690,425],{"class":281},[260,6692,6693,6695,6697],{"class":262,"line":972},[260,6694,620],{"class":281},[260,6696,967],{"class":295},[260,6698,425],{"class":281},[6700,6701,6702],"tip",{},[222,6703,6704,6705,6707,6708,349],{},"TresLeches automatically displays an FPS graph overlay when you use the ",[257,6706,6555],{}," control. This provides real-time performance insights without manual implementation. Learn more at ",[241,6709,6711],{"href":6481,"rel":6710},[245],"TresLeches Documentation",[217,6713,6715],{"id":6714},"key-takeaways","Key Takeaways",[633,6717,6718,6725,6736,6743],{},[636,6719,6722],{"icon":6720,"title":6721},"i-lucide-target","Template Refs First",[222,6723,6724],{},"Use template refs for direct Three.js instance access in render loops to avoid reactivity overhead.",[636,6726,6729],{"icon":6727,"title":6728},"i-lucide-layers-2","Shallow Reactivity",[222,6730,6474,6731,1858,6733,6735],{},[257,6732,1857],{},[257,6734,1861],{}," when you need some reactivity without deep proxy overhead.",[636,6737,6740],{"icon":6738,"title":6739},"i-lucide-git-branch","Separate Concerns",[222,6741,6742],{},"Keep UI state reactive and animation state non-reactive for optimal performance.",[636,6744,6747],{"icon":6745,"title":6746},"i-lucide-activity","Monitor Performance",[222,6748,6749,6750,6752],{},"Use Nuxt DevTools and ",[257,6751,6477],{}," performance monitoring to identify reactivity bottlenecks in your 3D scenes.",[6700,6754,6755],{},[222,6756,6757],{},"Remember: Vue's reactivity is powerful for UI updates but can be expensive in high-frequency render loops. Choose the right tool for each use case - reactive for user interactions, template refs for animations.",[222,6759,6760],{},"By understanding and applying these reactivity patterns, you can create performant 3D experiences that leverage Vue's strengths while avoiding common performance pitfalls.",[6762,6763,6764],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":255,"searchDepth":263,"depth":270,"links":6766},[6767,6768,6773,6777,6781,6786,6790,6791],{"id":219,"depth":270,"text":220},{"id":230,"depth":270,"text":231,"children":6769},[6770,6771,6772],{"id":235,"depth":331,"text":236},{"id":385,"depth":331,"text":386},{"id":627,"depth":331,"text":628},{"id":670,"depth":270,"text":671,"children":6774},[6775,6776],{"id":677,"depth":331,"text":678},{"id":1129,"depth":331,"text":1130},{"id":1850,"depth":270,"text":1851,"children":6778},[6779,6780],{"id":1865,"depth":331,"text":1866},{"id":2492,"depth":331,"text":2493},{"id":3221,"depth":270,"text":3222,"children":6782},[6783,6784,6785],{"id":3225,"depth":331,"text":3226},{"id":3644,"depth":331,"text":3645},{"id":4443,"depth":331,"text":4444},{"id":5090,"depth":270,"text":5091,"children":6787},[6788,6789],{"id":5094,"depth":331,"text":5095},{"id":5588,"depth":331,"text":5589},{"id":6467,"depth":270,"text":6468},{"id":6714,"depth":270,"text":6715},"Learn how to effectively use Vue's reactivity system with TresJS while maintaining optimal performance in high-frequency render loops.","md",null,{},{"title":59,"description":6792},"r457wnT-P1_Tp-WMt11LgBzws83IyzAl69fVz29DF5E",[6799,6801],{"title":55,"path":56,"stem":57,"description":6800,"children":-1},"Discover how TresJS transforms imperative Three.js code into declarative Vue components, making 3D development more intuitive and maintainable.",{"title":68,"path":64,"stem":69,"description":6802,"children":-1},"Explore the TresJS components, composables, utilities and more.",1768600245522]