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