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