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