[{"data":1,"prerenderedAt":2181},["ShallowReactive",2],{"navigation":3,"/api/advanced/performance":239,"/api/advanced/performance-surround":2176},[4,29,78,173,205,215,219,223,227,231,235],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":162,"body":241,"description":2170,"extension":2171,"links":2172,"meta":2173,"navigation":39,"path":163,"seo":2174,"stem":164,"__hash__":2175},"docs/3.api/5.advanced/performance.md",{"type":242,"value":243,"toc":2152},"minimark",[244,248,253,256,259,262,270,286,293,596,601,626,631,639,692,699,792,796,803,1085,1091,1094,1146,1160,1167,1177,1233,1237,1240,1246,1253,1257,1546,1550,1855,1869,1876,1879,1885,1894,2140,2148],[245,246,247],"p",{},"Running WebGL in the browser can be resource-intensive depending on the user's device capabilities. To make 3D accessible to everyone, it's important to optimize your applications for performance, especially on low-end devices. This guide shares practical tips to help you get the best performance from your TresJS projects.",[249,250,252],"h2",{"id":251},"rendering-modes","Rendering Modes",[254,255],"examples-on-demand",{},[245,257,258],{},"By default, TresJS renders your scene on every frame. While this works for most cases, if you're building a game or a complex app, you may want to control when rendering happens.",[245,260,261],{},"Otherwise it might drain your device battery 🔋 and make your computer sound like an airplane 🛫.",[245,263,264,265,269],{},"To optimize performance, ",[266,267,268],"strong",{},"scene rendering should be triggered only when necessary events"," occur—like user input, camera transformations, or object animations.",[245,271,272,273,277,278,281,282,285],{},"You can achieve this by setting the ",[274,275,276],"code",{},"renderMode"," prop to ",[274,279,280],{},"on-demand"," or ",[274,283,284],{},"manual",":",[287,288,290,291],"h3",{"id":289},"mode-on-demand","Mode ",[274,292,280],{},[294,295,301],"pre",{"className":296,"code":297,"filename":298,"language":299,"meta":300,"style":300},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\n// Reactive position for the mesh\nconst positionX = ref(0)\n\n// Simulate a change after 1 second\nsetTimeout(() => {\n  positionX.value = 1\n}, 1000)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas render-mode=\"on-demand\">\n    \u003CTresMesh :position-x=\"positionX\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshBasicMaterial color=\"teal\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n","on-demand.vue","vue","",[274,302,303,338,366,372,379,403,408,414,431,449,460,470,475,485,507,533,545,567,577,587],{"__ignoreMap":300},[304,305,308,312,316,320,323,326,329,333,335],"span",{"class":306,"line":307},"line",1,[304,309,311],{"class":310},"sMK4o","\u003C",[304,313,315],{"class":314},"swJcz","script",[304,317,319],{"class":318},"spNyl"," setup",[304,321,322],{"class":318}," lang",[304,324,325],{"class":310},"=",[304,327,328],{"class":310},"\"",[304,330,332],{"class":331},"sfazB","ts",[304,334,328],{"class":310},[304,336,337],{"class":310},">\n",[304,339,341,345,348,352,355,358,361,363],{"class":306,"line":340},2,[304,342,344],{"class":343},"s7zQu","import",[304,346,347],{"class":310}," {",[304,349,351],{"class":350},"sTEyZ"," ref",[304,353,354],{"class":310}," }",[304,356,357],{"class":343}," from",[304,359,360],{"class":310}," '",[304,362,299],{"class":331},[304,364,365],{"class":310},"'\n",[304,367,369],{"class":306,"line":368},3,[304,370,371],{"emptyLinePlaceholder":39},"\n",[304,373,375],{"class":306,"line":374},4,[304,376,378],{"class":377},"sHwdD","// Reactive position for the mesh\n",[304,380,382,385,388,390,393,396,400],{"class":306,"line":381},5,[304,383,384],{"class":318},"const",[304,386,387],{"class":350}," positionX ",[304,389,325],{"class":310},[304,391,351],{"class":392},"s2Zo4",[304,394,395],{"class":350},"(",[304,397,399],{"class":398},"sbssI","0",[304,401,402],{"class":350},")\n",[304,404,406],{"class":306,"line":405},6,[304,407,371],{"emptyLinePlaceholder":39},[304,409,411],{"class":306,"line":410},7,[304,412,413],{"class":377},"// Simulate a change after 1 second\n",[304,415,417,420,422,425,428],{"class":306,"line":416},8,[304,418,419],{"class":392},"setTimeout",[304,421,395],{"class":350},[304,423,424],{"class":310},"()",[304,426,427],{"class":318}," =>",[304,429,430],{"class":310}," {\n",[304,432,434,437,440,443,446],{"class":306,"line":433},9,[304,435,436],{"class":350},"  positionX",[304,438,439],{"class":310},".",[304,441,442],{"class":350},"value",[304,444,445],{"class":310}," =",[304,447,448],{"class":398}," 1\n",[304,450,452,455,458],{"class":306,"line":451},10,[304,453,454],{"class":310},"},",[304,456,457],{"class":398}," 1000",[304,459,402],{"class":350},[304,461,463,466,468],{"class":306,"line":462},11,[304,464,465],{"class":310},"\u003C/",[304,467,315],{"class":314},[304,469,337],{"class":310},[304,471,473],{"class":306,"line":472},12,[304,474,371],{"emptyLinePlaceholder":39},[304,476,478,480,483],{"class":306,"line":477},13,[304,479,311],{"class":310},[304,481,482],{"class":314},"template",[304,484,337],{"class":310},[304,486,488,491,494,497,499,501,503,505],{"class":306,"line":487},14,[304,489,490],{"class":310},"  \u003C",[304,492,493],{"class":314},"TresCanvas",[304,495,496],{"class":318}," render-mode",[304,498,325],{"class":310},[304,500,328],{"class":310},[304,502,280],{"class":331},[304,504,328],{"class":310},[304,506,337],{"class":310},[304,508,510,513,516,519,522,524,526,529,531],{"class":306,"line":509},15,[304,511,512],{"class":310},"    \u003C",[304,514,515],{"class":314},"TresMesh",[304,517,518],{"class":310}," :",[304,520,521],{"class":318},"position-x",[304,523,325],{"class":310},[304,525,328],{"class":310},[304,527,528],{"class":350},"positionX",[304,530,328],{"class":310},[304,532,337],{"class":310},[304,534,536,539,542],{"class":306,"line":535},16,[304,537,538],{"class":310},"      \u003C",[304,540,541],{"class":314},"TresBoxGeometry",[304,543,544],{"class":310}," />\n",[304,546,548,550,553,556,558,560,563,565],{"class":306,"line":547},17,[304,549,538],{"class":310},[304,551,552],{"class":314},"TresMeshBasicMaterial",[304,554,555],{"class":318}," color",[304,557,325],{"class":310},[304,559,328],{"class":310},[304,561,562],{"class":331},"teal",[304,564,328],{"class":310},[304,566,544],{"class":310},[304,568,570,573,575],{"class":306,"line":569},18,[304,571,572],{"class":310},"    \u003C/",[304,574,515],{"class":314},[304,576,337],{"class":310},[304,578,580,583,585],{"class":306,"line":579},19,[304,581,582],{"class":310},"  \u003C/",[304,584,493],{"class":314},[304,586,337],{"class":310},[304,588,590,592,594],{"class":306,"line":589},20,[304,591,465],{"class":310},[304,593,482],{"class":314},[304,595,337],{"class":310},[597,598,600],"h4",{"id":599},"automatic-invalidation","Automatic Invalidation",[245,602,603,604,607,608,611,612,615,616,619,620,281,623,439],{},"When using ",[274,605,606],{},"render-mode=\"on-demand\"",", TresJS will automatically invalidate the current frame by observing component props and lifecycle hooks like ",[274,609,610],{},"onMounted"," and ",[274,613,614],{},"onUnmounted",". It will also invalidate the frame when resizing the window or changing any prop from the ",[274,617,618],{},"\u003CTresCanvas>"," component like ",[274,621,622],{},"clearColor",[274,624,625],{},"antialias",[287,627,290,629],{"id":628},"mode-manual",[274,630,284],{},[245,632,633,634,277,637,285],{},"If you want to have full control of when the scene is rendered, you can set the ",[274,635,636],{},"render-mode",[274,638,284],{},[294,640,643],{"className":296,"code":641,"filename":642,"language":299,"meta":300,"style":300},"\u003Ctemplate>\n  \u003CTresCanvas render-mode=\"manual\">\n    \u003C!-- Your scene goes here -->\n  \u003C/TresCanvas>\n\u003C/template>\n","manual-mode.vue",[274,644,645,653,671,676,684],{"__ignoreMap":300},[304,646,647,649,651],{"class":306,"line":307},[304,648,311],{"class":310},[304,650,482],{"class":314},[304,652,337],{"class":310},[304,654,655,657,659,661,663,665,667,669],{"class":306,"line":340},[304,656,490],{"class":310},[304,658,493],{"class":314},[304,660,496],{"class":318},[304,662,325],{"class":310},[304,664,328],{"class":310},[304,666,284],{"class":331},[304,668,328],{"class":310},[304,670,337],{"class":310},[304,672,673],{"class":306,"line":368},[304,674,675],{"class":377},"    \u003C!-- Your scene goes here -->\n",[304,677,678,680,682],{"class":306,"line":374},[304,679,582],{"class":310},[304,681,493],{"class":314},[304,683,337],{"class":310},[304,685,686,688,690],{"class":306,"line":381},[304,687,465],{"class":310},[304,689,482],{"class":314},[304,691,337],{"class":310},[245,693,694,695,698],{},"In this mode, Tres will not render the scene automatically. You will need to call the ",[274,696,697],{},"advance()"," method from the useTres composable to render the scene:",[294,700,703],{"className":296,"code":701,"filename":702,"language":299,"meta":300,"style":300},"\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\n\nconst { advance } = useTres()\n\n// Call advance() whenever you want to render a frame\nadvance()\n\u003C/script>\n","manual-invalidate.vue",[274,704,705,725,745,749,768,772,777,784],{"__ignoreMap":300},[304,706,707,709,711,713,715,717,719,721,723],{"class":306,"line":307},[304,708,311],{"class":310},[304,710,315],{"class":314},[304,712,319],{"class":318},[304,714,322],{"class":318},[304,716,325],{"class":310},[304,718,328],{"class":310},[304,720,332],{"class":331},[304,722,328],{"class":310},[304,724,337],{"class":310},[304,726,727,729,731,734,736,738,740,743],{"class":306,"line":340},[304,728,344],{"class":343},[304,730,347],{"class":310},[304,732,733],{"class":350}," useTres",[304,735,354],{"class":310},[304,737,357],{"class":343},[304,739,360],{"class":310},[304,741,742],{"class":331},"@tresjs/core",[304,744,365],{"class":310},[304,746,747],{"class":306,"line":368},[304,748,371],{"emptyLinePlaceholder":39},[304,750,751,753,755,758,761,763,765],{"class":306,"line":374},[304,752,384],{"class":318},[304,754,347],{"class":310},[304,756,757],{"class":350}," advance ",[304,759,760],{"class":310},"}",[304,762,445],{"class":310},[304,764,733],{"class":392},[304,766,767],{"class":350},"()\n",[304,769,770],{"class":306,"line":381},[304,771,371],{"emptyLinePlaceholder":39},[304,773,774],{"class":306,"line":405},[304,775,776],{"class":377},"// Call advance() whenever you want to render a frame\n",[304,778,779,782],{"class":306,"line":410},[304,780,781],{"class":392},"advance",[304,783,767],{"class":350},[304,785,786,788,790],{"class":306,"line":416},[304,787,465],{"class":310},[304,789,315],{"class":314},[304,791,337],{"class":310},[597,793,795],{"id":794},"manual-invalidation","Manual Invalidation",[245,797,798,799,802],{},"It’s often not possible to observe every change in your application. In such cases, you can manually invalidate the frame using the ",[274,800,801],{},"invalidate()"," method from the useTres composable.:",[294,804,806],{"className":296,"code":805,"filename":702,"language":299,"meta":300,"style":300},"\u003Cscript setup lang=\"ts\">\nimport { useTres } from '@tresjs/core'\nimport { shallowRef, watch } from 'vue'\n\nconst boxRef = shallowRef(null)\nconst { invalidate } = useTres()\n\nwatch(boxRef, () => {\n  if (boxRef.value?.position) {\n    boxRef.value.position.x = 1\n  }\n  // Invalidate the frame to trigger a render\n  invalidate()\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh ref=\"boxRef\">\n    \u003CTresBoxGeometry />\n    \u003CTresMeshBasicMaterial color=\"teal\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[274,807,808,828,846,871,875,893,910,914,931,958,980,985,990,997,1003,1011,1015,1023,1041,1049,1067,1076],{"__ignoreMap":300},[304,809,810,812,814,816,818,820,822,824,826],{"class":306,"line":307},[304,811,311],{"class":310},[304,813,315],{"class":314},[304,815,319],{"class":318},[304,817,322],{"class":318},[304,819,325],{"class":310},[304,821,328],{"class":310},[304,823,332],{"class":331},[304,825,328],{"class":310},[304,827,337],{"class":310},[304,829,830,832,834,836,838,840,842,844],{"class":306,"line":340},[304,831,344],{"class":343},[304,833,347],{"class":310},[304,835,733],{"class":350},[304,837,354],{"class":310},[304,839,357],{"class":343},[304,841,360],{"class":310},[304,843,742],{"class":331},[304,845,365],{"class":310},[304,847,848,850,852,855,858,861,863,865,867,869],{"class":306,"line":368},[304,849,344],{"class":343},[304,851,347],{"class":310},[304,853,854],{"class":350}," shallowRef",[304,856,857],{"class":310},",",[304,859,860],{"class":350}," watch",[304,862,354],{"class":310},[304,864,357],{"class":343},[304,866,360],{"class":310},[304,868,299],{"class":331},[304,870,365],{"class":310},[304,872,873],{"class":306,"line":374},[304,874,371],{"emptyLinePlaceholder":39},[304,876,877,879,882,884,886,888,891],{"class":306,"line":381},[304,878,384],{"class":318},[304,880,881],{"class":350}," boxRef ",[304,883,325],{"class":310},[304,885,854],{"class":392},[304,887,395],{"class":350},[304,889,890],{"class":310},"null",[304,892,402],{"class":350},[304,894,895,897,899,902,904,906,908],{"class":306,"line":405},[304,896,384],{"class":318},[304,898,347],{"class":310},[304,900,901],{"class":350}," invalidate ",[304,903,760],{"class":310},[304,905,445],{"class":310},[304,907,733],{"class":392},[304,909,767],{"class":350},[304,911,912],{"class":306,"line":410},[304,913,371],{"emptyLinePlaceholder":39},[304,915,916,919,922,924,927,929],{"class":306,"line":416},[304,917,918],{"class":392},"watch",[304,920,921],{"class":350},"(boxRef",[304,923,857],{"class":310},[304,925,926],{"class":310}," ()",[304,928,427],{"class":318},[304,930,430],{"class":310},[304,932,933,936,939,942,944,946,949,952,955],{"class":306,"line":433},[304,934,935],{"class":343},"  if",[304,937,938],{"class":314}," (",[304,940,941],{"class":350},"boxRef",[304,943,439],{"class":310},[304,945,442],{"class":350},[304,947,948],{"class":310},"?.",[304,950,951],{"class":350},"position",[304,953,954],{"class":314},") ",[304,956,957],{"class":310},"{\n",[304,959,960,963,965,967,969,971,973,976,978],{"class":306,"line":451},[304,961,962],{"class":350},"    boxRef",[304,964,439],{"class":310},[304,966,442],{"class":350},[304,968,439],{"class":310},[304,970,951],{"class":350},[304,972,439],{"class":310},[304,974,975],{"class":350},"x",[304,977,445],{"class":310},[304,979,448],{"class":398},[304,981,982],{"class":306,"line":462},[304,983,984],{"class":310},"  }\n",[304,986,987],{"class":306,"line":472},[304,988,989],{"class":377},"  // Invalidate the frame to trigger a render\n",[304,991,992,995],{"class":306,"line":477},[304,993,994],{"class":392},"  invalidate",[304,996,767],{"class":314},[304,998,999,1001],{"class":306,"line":487},[304,1000,760],{"class":310},[304,1002,402],{"class":350},[304,1004,1005,1007,1009],{"class":306,"line":509},[304,1006,465],{"class":310},[304,1008,315],{"class":314},[304,1010,337],{"class":310},[304,1012,1013],{"class":306,"line":535},[304,1014,371],{"emptyLinePlaceholder":39},[304,1016,1017,1019,1021],{"class":306,"line":547},[304,1018,311],{"class":310},[304,1020,482],{"class":314},[304,1022,337],{"class":310},[304,1024,1025,1027,1029,1031,1033,1035,1037,1039],{"class":306,"line":569},[304,1026,490],{"class":310},[304,1028,515],{"class":314},[304,1030,351],{"class":318},[304,1032,325],{"class":310},[304,1034,328],{"class":310},[304,1036,941],{"class":331},[304,1038,328],{"class":310},[304,1040,337],{"class":310},[304,1042,1043,1045,1047],{"class":306,"line":579},[304,1044,512],{"class":310},[304,1046,541],{"class":314},[304,1048,544],{"class":310},[304,1050,1051,1053,1055,1057,1059,1061,1063,1065],{"class":306,"line":589},[304,1052,512],{"class":310},[304,1054,552],{"class":314},[304,1056,555],{"class":318},[304,1058,325],{"class":310},[304,1060,328],{"class":310},[304,1062,562],{"class":331},[304,1064,328],{"class":310},[304,1066,544],{"class":310},[304,1068,1070,1072,1074],{"class":306,"line":1069},21,[304,1071,582],{"class":310},[304,1073,515],{"class":314},[304,1075,337],{"class":310},[304,1077,1079,1081,1083],{"class":306,"line":1078},22,[304,1080,465],{"class":310},[304,1082,482],{"class":314},[304,1084,337],{"class":310},[287,1086,290,1088],{"id":1087},"mode-always",[274,1089,1090],{},"always",[245,1092,1093],{},"In this rendering mode, Tres will continuously render the scene on every frame. This is the default mode and the easiest to use, but it's also the most resource expensive one.",[294,1095,1098],{"className":296,"code":1096,"filename":1097,"language":299,"meta":300,"style":300},"\u003Ctemplate>\n  \u003CTresCanvas render-mode=\"always\">\n    \u003C!-- Your scene goes here -->\n  \u003C/TresCanvas>\n\u003C/template>\n","always-mode.vue",[274,1099,1100,1108,1126,1130,1138],{"__ignoreMap":300},[304,1101,1102,1104,1106],{"class":306,"line":307},[304,1103,311],{"class":310},[304,1105,482],{"class":314},[304,1107,337],{"class":310},[304,1109,1110,1112,1114,1116,1118,1120,1122,1124],{"class":306,"line":340},[304,1111,490],{"class":310},[304,1113,493],{"class":314},[304,1115,496],{"class":318},[304,1117,325],{"class":310},[304,1119,328],{"class":310},[304,1121,1090],{"class":331},[304,1123,328],{"class":310},[304,1125,337],{"class":310},[304,1127,1128],{"class":306,"line":368},[304,1129,675],{"class":377},[304,1131,1132,1134,1136],{"class":306,"line":374},[304,1133,582],{"class":310},[304,1135,493],{"class":314},[304,1137,337],{"class":310},[304,1139,1140,1142,1144],{"class":306,"line":381},[304,1141,465],{"class":310},[304,1143,482],{"class":314},[304,1145,337],{"class":310},[1147,1148,1149],"note",{},[245,1150,1151,1154,1155,281,1157,1159],{},[266,1152,1153],{},"Tip:"," Use ",[274,1156,280],{},[274,1158,284],{}," rendering modes for static or mostly-static scenes to save resources and improve battery life.",[249,1161,1163,1164],{"id":1162},"limit-fps-with-fpslimit","Limit FPS with ",[274,1165,1166],{},"fpsLimit",[245,1168,1169,1170,1173,1174,1176],{},"If your scene does not need to update at full refresh rate, cap the loop with the ",[274,1171,1172],{},"fps-limit"," prop on ",[274,1175,493],{},". Lowering FPS reduces CPU/GPU work and can improve thermals and battery life.",[294,1178,1181],{"className":296,"code":1179,"filename":1180,"language":299,"meta":300,"style":300},"\u003Ctemplate>\n  \u003CTresCanvas :fps-limit=\"30\">\n    \u003C!-- Your scene -->\n  \u003C/TresCanvas>\n\u003C/template>\n","fps-limit.vue",[274,1182,1183,1191,1212,1217,1225],{"__ignoreMap":300},[304,1184,1185,1187,1189],{"class":306,"line":307},[304,1186,311],{"class":310},[304,1188,482],{"class":314},[304,1190,337],{"class":310},[304,1192,1193,1195,1197,1199,1201,1203,1205,1208,1210],{"class":306,"line":340},[304,1194,490],{"class":310},[304,1196,493],{"class":314},[304,1198,518],{"class":310},[304,1200,1172],{"class":318},[304,1202,325],{"class":310},[304,1204,328],{"class":310},[304,1206,1207],{"class":398},"30",[304,1209,328],{"class":310},[304,1211,337],{"class":310},[304,1213,1214],{"class":306,"line":368},[304,1215,1216],{"class":377},"    \u003C!-- Your scene -->\n",[304,1218,1219,1221,1223],{"class":306,"line":374},[304,1220,582],{"class":310},[304,1222,493],{"class":314},[304,1224,337],{"class":310},[304,1226,1227,1229,1231],{"class":306,"line":381},[304,1228,465],{"class":310},[304,1230,482],{"class":314},[304,1232,337],{"class":310},[249,1234,1236],{"id":1235},"reactivity-and-performance","Reactivity and Performance",[245,1238,1239],{},"Vue's reactivity system is powerful, but when working with Three.js objects in a real-time 3D scene, it can introduce unnecessary overhead. Since TresJS scenes often update at high frame rates (e.g., 60 FPS), making Three.js objects deeply reactive can significantly hurt performance.",[1241,1242,1243],"warning",{},[245,1244,1245],{},"Avoid making Three.js objects or their properties deeply reactive. Vue will try to track every change, which is inefficient for objects updated every frame.",[245,1247,1248,1249,1252],{},"Instead, use ",[274,1250,1251],{},"shallowRef"," for Three.js objects. This keeps the reference reactive, but does not make the internal properties reactive, which is much more efficient.",[287,1254,1256],{"id":1255},"incorrect-deep-reactivity","❌ Incorrect: Deep Reactivity",[294,1258,1261],{"className":296,"code":1259,"filename":1260,"language":299,"meta":300,"style":300},"\u003Cscript setup lang=\"ts\">\nimport { reactive } from 'vue'\n\n// This will make all properties reactive (not recommended for Three.js objects)\nconst position = reactive({ x: 0, y: 0, z: 0 })\n\nonLoop(({ _delta, elapsed }) => {\n  position.x = Math.sin(elapsed * 0.1) * 3\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh :position=\"position\" cast-shadow>\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n    \u003CTresMeshStandardMaterial color=\"teal\" />\n  \u003C/TresMesh>\n\u003C/template>\n","incorrect-reactivity.vue",[274,1262,1263,1283,1302,1306,1311,1357,1361,1387,1425,1431,1439,1443,1451,1474,1511,1530,1538],{"__ignoreMap":300},[304,1264,1265,1267,1269,1271,1273,1275,1277,1279,1281],{"class":306,"line":307},[304,1266,311],{"class":310},[304,1268,315],{"class":314},[304,1270,319],{"class":318},[304,1272,322],{"class":318},[304,1274,325],{"class":310},[304,1276,328],{"class":310},[304,1278,332],{"class":331},[304,1280,328],{"class":310},[304,1282,337],{"class":310},[304,1284,1285,1287,1289,1292,1294,1296,1298,1300],{"class":306,"line":340},[304,1286,344],{"class":343},[304,1288,347],{"class":310},[304,1290,1291],{"class":350}," reactive",[304,1293,354],{"class":310},[304,1295,357],{"class":343},[304,1297,360],{"class":310},[304,1299,299],{"class":331},[304,1301,365],{"class":310},[304,1303,1304],{"class":306,"line":368},[304,1305,371],{"emptyLinePlaceholder":39},[304,1307,1308],{"class":306,"line":374},[304,1309,1310],{"class":377},"// This will make all properties reactive (not recommended for Three.js objects)\n",[304,1312,1313,1315,1318,1320,1322,1324,1327,1330,1332,1335,1337,1340,1342,1344,1346,1349,1351,1353,1355],{"class":306,"line":381},[304,1314,384],{"class":318},[304,1316,1317],{"class":350}," position ",[304,1319,325],{"class":310},[304,1321,1291],{"class":392},[304,1323,395],{"class":350},[304,1325,1326],{"class":310},"{",[304,1328,1329],{"class":314}," x",[304,1331,285],{"class":310},[304,1333,1334],{"class":398}," 0",[304,1336,857],{"class":310},[304,1338,1339],{"class":314}," y",[304,1341,285],{"class":310},[304,1343,1334],{"class":398},[304,1345,857],{"class":310},[304,1347,1348],{"class":314}," z",[304,1350,285],{"class":310},[304,1352,1334],{"class":398},[304,1354,354],{"class":310},[304,1356,402],{"class":350},[304,1358,1359],{"class":306,"line":405},[304,1360,371],{"emptyLinePlaceholder":39},[304,1362,1363,1366,1368,1371,1375,1377,1380,1383,1385],{"class":306,"line":410},[304,1364,1365],{"class":392},"onLoop",[304,1367,395],{"class":350},[304,1369,1370],{"class":310},"({",[304,1372,1374],{"class":1373},"sHdIc"," _delta",[304,1376,857],{"class":310},[304,1378,1379],{"class":1373}," elapsed",[304,1381,1382],{"class":310}," })",[304,1384,427],{"class":318},[304,1386,430],{"class":310},[304,1388,1389,1392,1394,1396,1398,1401,1403,1406,1408,1411,1414,1417,1419,1422],{"class":306,"line":416},[304,1390,1391],{"class":350},"  position",[304,1393,439],{"class":310},[304,1395,975],{"class":350},[304,1397,445],{"class":310},[304,1399,1400],{"class":350}," Math",[304,1402,439],{"class":310},[304,1404,1405],{"class":392},"sin",[304,1407,395],{"class":314},[304,1409,1410],{"class":350},"elapsed",[304,1412,1413],{"class":310}," *",[304,1415,1416],{"class":398}," 0.1",[304,1418,954],{"class":314},[304,1420,1421],{"class":310},"*",[304,1423,1424],{"class":398}," 3\n",[304,1426,1427,1429],{"class":306,"line":433},[304,1428,760],{"class":310},[304,1430,402],{"class":350},[304,1432,1433,1435,1437],{"class":306,"line":451},[304,1434,465],{"class":310},[304,1436,315],{"class":314},[304,1438,337],{"class":310},[304,1440,1441],{"class":306,"line":462},[304,1442,371],{"emptyLinePlaceholder":39},[304,1444,1445,1447,1449],{"class":306,"line":472},[304,1446,311],{"class":310},[304,1448,482],{"class":314},[304,1450,337],{"class":310},[304,1452,1453,1455,1457,1459,1461,1463,1465,1467,1469,1472],{"class":306,"line":477},[304,1454,490],{"class":310},[304,1456,515],{"class":314},[304,1458,518],{"class":310},[304,1460,951],{"class":318},[304,1462,325],{"class":310},[304,1464,328],{"class":310},[304,1466,951],{"class":350},[304,1468,328],{"class":310},[304,1470,1471],{"class":318}," cast-shadow",[304,1473,337],{"class":310},[304,1475,1476,1478,1480,1482,1485,1487,1489,1492,1495,1498,1500,1502,1504,1507,1509],{"class":306,"line":487},[304,1477,512],{"class":310},[304,1479,541],{"class":314},[304,1481,518],{"class":310},[304,1483,1484],{"class":318},"args",[304,1486,325],{"class":310},[304,1488,328],{"class":310},[304,1490,1491],{"class":310},"[",[304,1493,1494],{"class":398},"1",[304,1496,1497],{"class":310},", ",[304,1499,1494],{"class":398},[304,1501,1497],{"class":310},[304,1503,1494],{"class":398},[304,1505,1506],{"class":310},"]",[304,1508,328],{"class":310},[304,1510,544],{"class":310},[304,1512,1513,1515,1518,1520,1522,1524,1526,1528],{"class":306,"line":509},[304,1514,512],{"class":310},[304,1516,1517],{"class":314},"TresMeshStandardMaterial",[304,1519,555],{"class":318},[304,1521,325],{"class":310},[304,1523,328],{"class":310},[304,1525,562],{"class":331},[304,1527,328],{"class":310},[304,1529,544],{"class":310},[304,1531,1532,1534,1536],{"class":306,"line":535},[304,1533,582],{"class":310},[304,1535,515],{"class":314},[304,1537,337],{"class":310},[304,1539,1540,1542,1544],{"class":306,"line":547},[304,1541,465],{"class":310},[304,1543,482],{"class":314},[304,1545,337],{"class":310},[287,1547,1549],{"id":1548},"correct-use-shallowref-and-direct-assignment","✅ Correct: Use shallowRef and Direct Assignment",[294,1551,1554],{"className":296,"code":1552,"filename":1553,"language":299,"meta":300,"style":300},"\u003Cscript setup lang=\"ts\">\nimport { shallowRef } from 'vue'\n\nconst position = { x: 0, y: 0, z: 0 }\nconst boxRef = shallowRef(null)\n\nonLoop(({ _delta, elapsed }) => {\n  if (boxRef.value) {\n    boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh ref=\"boxRef\" :position=\"position\" cast-shadow>\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n    \u003CTresMeshStandardMaterial color=\"teal\" />\n  \u003C/TresMesh>\n\u003C/template>\n","correct-reactivity.vue",[274,1555,1556,1576,1594,1598,1633,1649,1653,1673,1689,1727,1731,1737,1745,1749,1757,1789,1821,1839,1847],{"__ignoreMap":300},[304,1557,1558,1560,1562,1564,1566,1568,1570,1572,1574],{"class":306,"line":307},[304,1559,311],{"class":310},[304,1561,315],{"class":314},[304,1563,319],{"class":318},[304,1565,322],{"class":318},[304,1567,325],{"class":310},[304,1569,328],{"class":310},[304,1571,332],{"class":331},[304,1573,328],{"class":310},[304,1575,337],{"class":310},[304,1577,1578,1580,1582,1584,1586,1588,1590,1592],{"class":306,"line":340},[304,1579,344],{"class":343},[304,1581,347],{"class":310},[304,1583,854],{"class":350},[304,1585,354],{"class":310},[304,1587,357],{"class":343},[304,1589,360],{"class":310},[304,1591,299],{"class":331},[304,1593,365],{"class":310},[304,1595,1596],{"class":306,"line":368},[304,1597,371],{"emptyLinePlaceholder":39},[304,1599,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630],{"class":306,"line":374},[304,1601,384],{"class":318},[304,1603,1317],{"class":350},[304,1605,325],{"class":310},[304,1607,347],{"class":310},[304,1609,1329],{"class":314},[304,1611,285],{"class":310},[304,1613,1334],{"class":398},[304,1615,857],{"class":310},[304,1617,1339],{"class":314},[304,1619,285],{"class":310},[304,1621,1334],{"class":398},[304,1623,857],{"class":310},[304,1625,1348],{"class":314},[304,1627,285],{"class":310},[304,1629,1334],{"class":398},[304,1631,1632],{"class":310}," }\n",[304,1634,1635,1637,1639,1641,1643,1645,1647],{"class":306,"line":381},[304,1636,384],{"class":318},[304,1638,881],{"class":350},[304,1640,325],{"class":310},[304,1642,854],{"class":392},[304,1644,395],{"class":350},[304,1646,890],{"class":310},[304,1648,402],{"class":350},[304,1650,1651],{"class":306,"line":405},[304,1652,371],{"emptyLinePlaceholder":39},[304,1654,1655,1657,1659,1661,1663,1665,1667,1669,1671],{"class":306,"line":410},[304,1656,1365],{"class":392},[304,1658,395],{"class":350},[304,1660,1370],{"class":310},[304,1662,1374],{"class":1373},[304,1664,857],{"class":310},[304,1666,1379],{"class":1373},[304,1668,1382],{"class":310},[304,1670,427],{"class":318},[304,1672,430],{"class":310},[304,1674,1675,1677,1679,1681,1683,1685,1687],{"class":306,"line":416},[304,1676,935],{"class":343},[304,1678,938],{"class":314},[304,1680,941],{"class":350},[304,1682,439],{"class":310},[304,1684,442],{"class":350},[304,1686,954],{"class":314},[304,1688,957],{"class":310},[304,1690,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725],{"class":306,"line":433},[304,1692,962],{"class":350},[304,1694,439],{"class":310},[304,1696,442],{"class":350},[304,1698,439],{"class":310},[304,1700,951],{"class":350},[304,1702,439],{"class":310},[304,1704,975],{"class":350},[304,1706,445],{"class":310},[304,1708,1400],{"class":350},[304,1710,439],{"class":310},[304,1712,1405],{"class":392},[304,1714,395],{"class":314},[304,1716,1410],{"class":350},[304,1718,1413],{"class":310},[304,1720,1416],{"class":398},[304,1722,954],{"class":314},[304,1724,1421],{"class":310},[304,1726,1424],{"class":398},[304,1728,1729],{"class":306,"line":451},[304,1730,984],{"class":310},[304,1732,1733,1735],{"class":306,"line":462},[304,1734,760],{"class":310},[304,1736,402],{"class":350},[304,1738,1739,1741,1743],{"class":306,"line":472},[304,1740,465],{"class":310},[304,1742,315],{"class":314},[304,1744,337],{"class":310},[304,1746,1747],{"class":306,"line":477},[304,1748,371],{"emptyLinePlaceholder":39},[304,1750,1751,1753,1755],{"class":306,"line":487},[304,1752,311],{"class":310},[304,1754,482],{"class":314},[304,1756,337],{"class":310},[304,1758,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1783,1785,1787],{"class":306,"line":509},[304,1760,490],{"class":310},[304,1762,515],{"class":314},[304,1764,351],{"class":318},[304,1766,325],{"class":310},[304,1768,328],{"class":310},[304,1770,941],{"class":331},[304,1772,328],{"class":310},[304,1774,518],{"class":310},[304,1776,951],{"class":318},[304,1778,325],{"class":310},[304,1780,328],{"class":310},[304,1782,951],{"class":350},[304,1784,328],{"class":310},[304,1786,1471],{"class":318},[304,1788,337],{"class":310},[304,1790,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819],{"class":306,"line":535},[304,1792,512],{"class":310},[304,1794,541],{"class":314},[304,1796,518],{"class":310},[304,1798,1484],{"class":318},[304,1800,325],{"class":310},[304,1802,328],{"class":310},[304,1804,1491],{"class":310},[304,1806,1494],{"class":398},[304,1808,1497],{"class":310},[304,1810,1494],{"class":398},[304,1812,1497],{"class":310},[304,1814,1494],{"class":398},[304,1816,1506],{"class":310},[304,1818,328],{"class":310},[304,1820,544],{"class":310},[304,1822,1823,1825,1827,1829,1831,1833,1835,1837],{"class":306,"line":547},[304,1824,512],{"class":310},[304,1826,1517],{"class":314},[304,1828,555],{"class":318},[304,1830,325],{"class":310},[304,1832,328],{"class":310},[304,1834,562],{"class":331},[304,1836,328],{"class":310},[304,1838,544],{"class":310},[304,1840,1841,1843,1845],{"class":306,"line":569},[304,1842,582],{"class":310},[304,1844,515],{"class":314},[304,1846,337],{"class":310},[304,1848,1849,1851,1853],{"class":306,"line":579},[304,1850,465],{"class":310},[304,1852,482],{"class":314},[304,1854,337],{"class":310},[1147,1856,1857],{},[245,1858,1859,1861,1862,1865,1866,1868],{},[266,1860,1153],{}," Only the ",[274,1863,1864],{},".value"," of a ",[274,1867,1251],{}," is reactive. The internal properties are not, which is ideal for Three.js objects that are updated frequently.",[249,1870,1872,1873],{"id":1871},"dispose-resources-with-dispose","Dispose Resources with ",[274,1874,1875],{},"dispose()",[245,1877,1878],{},"When a resource is no longer needed—such as a texture, geometry, or material—be sure to dispose of it to free up memory. This is especially important if your app frequently creates and destroys resources, like in games or interactive experiences.",[245,1880,1881,1882,1884],{},"TresJS will automatically dispose of resources recursively when the component is unmounted, but you can also perform this manually by calling the ",[274,1883,1875],{}," directly from the package:",[1241,1886,1887],{},[245,1888,1889,1890,1893],{},"To avoid errors and unwanted side effects, resources created programmatically with the use of ",[274,1891,1892],{},"primitives"," need to be manually disposed.",[294,1895,1898],{"className":296,"code":1896,"filename":1897,"language":299,"meta":300,"style":300},"\u003Cscript setup lang=\"ts\">\nimport { dispose } from '@tresjs/core'\nimport { useGLTF } from '@tresjs/cientos'\nimport { onUnmounted } from 'vue'\n\nconst { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', {\n  draco: true,\n})\nconst model = nodes.Cube\n\nonUnmounted(() => {\n  // Dispose of the model when the component is destroyed\n  dispose(model)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive :object=\"model\" />\n\u003C/template>\n","manual-dispose.vue",[274,1899,1900,1920,1939,1959,1978,1982,2014,2028,2034,2051,2055,2067,2072,2084,2090,2098,2102,2110,2132],{"__ignoreMap":300},[304,1901,1902,1904,1906,1908,1910,1912,1914,1916,1918],{"class":306,"line":307},[304,1903,311],{"class":310},[304,1905,315],{"class":314},[304,1907,319],{"class":318},[304,1909,322],{"class":318},[304,1911,325],{"class":310},[304,1913,328],{"class":310},[304,1915,332],{"class":331},[304,1917,328],{"class":310},[304,1919,337],{"class":310},[304,1921,1922,1924,1926,1929,1931,1933,1935,1937],{"class":306,"line":340},[304,1923,344],{"class":343},[304,1925,347],{"class":310},[304,1927,1928],{"class":350}," dispose",[304,1930,354],{"class":310},[304,1932,357],{"class":343},[304,1934,360],{"class":310},[304,1936,742],{"class":331},[304,1938,365],{"class":310},[304,1940,1941,1943,1945,1948,1950,1952,1954,1957],{"class":306,"line":368},[304,1942,344],{"class":343},[304,1944,347],{"class":310},[304,1946,1947],{"class":350}," useGLTF",[304,1949,354],{"class":310},[304,1951,357],{"class":343},[304,1953,360],{"class":310},[304,1955,1956],{"class":331},"@tresjs/cientos",[304,1958,365],{"class":310},[304,1960,1961,1963,1965,1968,1970,1972,1974,1976],{"class":306,"line":374},[304,1962,344],{"class":343},[304,1964,347],{"class":310},[304,1966,1967],{"class":350}," onUnmounted",[304,1969,354],{"class":310},[304,1971,357],{"class":343},[304,1973,360],{"class":310},[304,1975,299],{"class":331},[304,1977,365],{"class":310},[304,1979,1980],{"class":306,"line":381},[304,1981,371],{"emptyLinePlaceholder":39},[304,1983,1984,1986,1988,1991,1993,1995,1998,2000,2002,2005,2008,2010,2012],{"class":306,"line":405},[304,1985,384],{"class":318},[304,1987,347],{"class":310},[304,1989,1990],{"class":350}," nodes ",[304,1992,760],{"class":310},[304,1994,445],{"class":310},[304,1996,1997],{"class":343}," await",[304,1999,1947],{"class":392},[304,2001,395],{"class":350},[304,2003,2004],{"class":310},"'",[304,2006,2007],{"class":331},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[304,2009,2004],{"class":310},[304,2011,857],{"class":310},[304,2013,430],{"class":310},[304,2015,2016,2019,2021,2025],{"class":306,"line":410},[304,2017,2018],{"class":314},"  draco",[304,2020,285],{"class":310},[304,2022,2024],{"class":2023},"sfNiH"," true",[304,2026,2027],{"class":310},",\n",[304,2029,2030,2032],{"class":306,"line":416},[304,2031,760],{"class":310},[304,2033,402],{"class":350},[304,2035,2036,2038,2041,2043,2046,2048],{"class":306,"line":433},[304,2037,384],{"class":318},[304,2039,2040],{"class":350}," model ",[304,2042,325],{"class":310},[304,2044,2045],{"class":350}," nodes",[304,2047,439],{"class":310},[304,2049,2050],{"class":350},"Cube\n",[304,2052,2053],{"class":306,"line":451},[304,2054,371],{"emptyLinePlaceholder":39},[304,2056,2057,2059,2061,2063,2065],{"class":306,"line":462},[304,2058,614],{"class":392},[304,2060,395],{"class":350},[304,2062,424],{"class":310},[304,2064,427],{"class":318},[304,2066,430],{"class":310},[304,2068,2069],{"class":306,"line":472},[304,2070,2071],{"class":377},"  // Dispose of the model when the component is destroyed\n",[304,2073,2074,2077,2079,2082],{"class":306,"line":477},[304,2075,2076],{"class":392},"  dispose",[304,2078,395],{"class":314},[304,2080,2081],{"class":350},"model",[304,2083,402],{"class":314},[304,2085,2086,2088],{"class":306,"line":487},[304,2087,760],{"class":310},[304,2089,402],{"class":350},[304,2091,2092,2094,2096],{"class":306,"line":509},[304,2093,465],{"class":310},[304,2095,315],{"class":314},[304,2097,337],{"class":310},[304,2099,2100],{"class":306,"line":535},[304,2101,371],{"emptyLinePlaceholder":39},[304,2103,2104,2106,2108],{"class":306,"line":547},[304,2105,311],{"class":310},[304,2107,482],{"class":314},[304,2109,337],{"class":310},[304,2111,2112,2114,2117,2119,2122,2124,2126,2128,2130],{"class":306,"line":569},[304,2113,490],{"class":310},[304,2115,2116],{"class":314},"primitive",[304,2118,518],{"class":310},[304,2120,2121],{"class":318},"object",[304,2123,325],{"class":310},[304,2125,328],{"class":310},[304,2127,2081],{"class":350},[304,2129,328],{"class":310},[304,2131,544],{"class":310},[304,2133,2134,2136,2138],{"class":306,"line":579},[304,2135,465],{"class":310},[304,2137,482],{"class":314},[304,2139,337],{"class":310},[1147,2141,2142],{},[245,2143,2144,2147],{},[266,2145,2146],{},"Best Practice:"," Always clean up resources when they are no longer needed to prevent memory leaks and keep your application performant.",[2149,2150,2151],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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":307,"depth":340,"links":2153},[2154,2162,2164,2168],{"id":251,"depth":340,"text":252,"children":2155},[2156,2158,2160],{"id":289,"depth":368,"text":2157},"Mode on-demand",{"id":628,"depth":368,"text":2159},"Mode manual",{"id":1087,"depth":368,"text":2161},"Mode always",{"id":1162,"depth":340,"text":2163},"Limit FPS with fpsLimit",{"id":1235,"depth":340,"text":1236,"children":2165},[2166,2167],{"id":1255,"depth":368,"text":1256},{"id":1548,"depth":368,"text":1549},{"id":1871,"depth":340,"text":2169},"Dispose Resources with dispose()","Quick guide with tips to improve the performance of your TresJS application.","md",null,{},{"title":162,"description":2170},"aWV9OFjV0XLsf1Mv22PoM3Mcp-n8TxY2x18bLdXrKag",[2177,2179],{"title":152,"path":153,"stem":154,"description":2178,"children":-1},"TresJS provides custom made vue directives to help you creating your scenes.",{"title":166,"path":167,"stem":168,"description":2180,"children":-1},"Use the primitive component to directly integrate any Three.js object within your Vue application.",1774953660596]