[{"data":1,"prerenderedAt":2106},["ShallowReactive",2],{"navigation":3,"/api/advanced/performance":239,"/api/advanced/performance-surround":2101},[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":2095,"extension":2096,"links":2097,"meta":2098,"navigation":39,"path":163,"seo":2099,"stem":164,"__hash__":2100},"docs/3.api/5.advanced/performance.md",{"type":242,"value":243,"toc":2079},"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,1164,1167,1173,1180,1184,1473,1477,1782,1796,1803,1806,1812,1821,2067,2075],[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],{"id":1162},"reactivity-and-performance","Reactivity and Performance",[245,1165,1166],{},"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.",[1168,1169,1170],"warning",{},[245,1171,1172],{},"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,1174,1175,1176,1179],{},"Instead, use ",[274,1177,1178],{},"shallowRef"," for Three.js objects. This keeps the reference reactive, but does not make the internal properties reactive, which is much more efficient.",[287,1181,1183],{"id":1182},"incorrect-deep-reactivity","❌ Incorrect: Deep Reactivity",[294,1185,1188],{"className":296,"code":1186,"filename":1187,"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,1189,1190,1210,1229,1233,1238,1284,1288,1314,1352,1358,1366,1370,1378,1401,1438,1457,1465],{"__ignoreMap":300},[304,1191,1192,1194,1196,1198,1200,1202,1204,1206,1208],{"class":306,"line":307},[304,1193,311],{"class":310},[304,1195,315],{"class":314},[304,1197,319],{"class":318},[304,1199,322],{"class":318},[304,1201,325],{"class":310},[304,1203,328],{"class":310},[304,1205,332],{"class":331},[304,1207,328],{"class":310},[304,1209,337],{"class":310},[304,1211,1212,1214,1216,1219,1221,1223,1225,1227],{"class":306,"line":340},[304,1213,344],{"class":343},[304,1215,347],{"class":310},[304,1217,1218],{"class":350}," reactive",[304,1220,354],{"class":310},[304,1222,357],{"class":343},[304,1224,360],{"class":310},[304,1226,299],{"class":331},[304,1228,365],{"class":310},[304,1230,1231],{"class":306,"line":368},[304,1232,371],{"emptyLinePlaceholder":39},[304,1234,1235],{"class":306,"line":374},[304,1236,1237],{"class":377},"// This will make all properties reactive (not recommended for Three.js objects)\n",[304,1239,1240,1242,1245,1247,1249,1251,1254,1257,1259,1262,1264,1267,1269,1271,1273,1276,1278,1280,1282],{"class":306,"line":381},[304,1241,384],{"class":318},[304,1243,1244],{"class":350}," position ",[304,1246,325],{"class":310},[304,1248,1218],{"class":392},[304,1250,395],{"class":350},[304,1252,1253],{"class":310},"{",[304,1255,1256],{"class":314}," x",[304,1258,285],{"class":310},[304,1260,1261],{"class":398}," 0",[304,1263,857],{"class":310},[304,1265,1266],{"class":314}," y",[304,1268,285],{"class":310},[304,1270,1261],{"class":398},[304,1272,857],{"class":310},[304,1274,1275],{"class":314}," z",[304,1277,285],{"class":310},[304,1279,1261],{"class":398},[304,1281,354],{"class":310},[304,1283,402],{"class":350},[304,1285,1286],{"class":306,"line":405},[304,1287,371],{"emptyLinePlaceholder":39},[304,1289,1290,1293,1295,1298,1302,1304,1307,1310,1312],{"class":306,"line":410},[304,1291,1292],{"class":392},"onLoop",[304,1294,395],{"class":350},[304,1296,1297],{"class":310},"({",[304,1299,1301],{"class":1300},"sHdIc"," _delta",[304,1303,857],{"class":310},[304,1305,1306],{"class":1300}," elapsed",[304,1308,1309],{"class":310}," })",[304,1311,427],{"class":318},[304,1313,430],{"class":310},[304,1315,1316,1319,1321,1323,1325,1328,1330,1333,1335,1338,1341,1344,1346,1349],{"class":306,"line":416},[304,1317,1318],{"class":350},"  position",[304,1320,439],{"class":310},[304,1322,975],{"class":350},[304,1324,445],{"class":310},[304,1326,1327],{"class":350}," Math",[304,1329,439],{"class":310},[304,1331,1332],{"class":392},"sin",[304,1334,395],{"class":314},[304,1336,1337],{"class":350},"elapsed",[304,1339,1340],{"class":310}," *",[304,1342,1343],{"class":398}," 0.1",[304,1345,954],{"class":314},[304,1347,1348],{"class":310},"*",[304,1350,1351],{"class":398}," 3\n",[304,1353,1354,1356],{"class":306,"line":433},[304,1355,760],{"class":310},[304,1357,402],{"class":350},[304,1359,1360,1362,1364],{"class":306,"line":451},[304,1361,465],{"class":310},[304,1363,315],{"class":314},[304,1365,337],{"class":310},[304,1367,1368],{"class":306,"line":462},[304,1369,371],{"emptyLinePlaceholder":39},[304,1371,1372,1374,1376],{"class":306,"line":472},[304,1373,311],{"class":310},[304,1375,482],{"class":314},[304,1377,337],{"class":310},[304,1379,1380,1382,1384,1386,1388,1390,1392,1394,1396,1399],{"class":306,"line":477},[304,1381,490],{"class":310},[304,1383,515],{"class":314},[304,1385,518],{"class":310},[304,1387,951],{"class":318},[304,1389,325],{"class":310},[304,1391,328],{"class":310},[304,1393,951],{"class":350},[304,1395,328],{"class":310},[304,1397,1398],{"class":318}," cast-shadow",[304,1400,337],{"class":310},[304,1402,1403,1405,1407,1409,1412,1414,1416,1419,1422,1425,1427,1429,1431,1434,1436],{"class":306,"line":487},[304,1404,512],{"class":310},[304,1406,541],{"class":314},[304,1408,518],{"class":310},[304,1410,1411],{"class":318},"args",[304,1413,325],{"class":310},[304,1415,328],{"class":310},[304,1417,1418],{"class":310},"[",[304,1420,1421],{"class":398},"1",[304,1423,1424],{"class":310},", ",[304,1426,1421],{"class":398},[304,1428,1424],{"class":310},[304,1430,1421],{"class":398},[304,1432,1433],{"class":310},"]",[304,1435,328],{"class":310},[304,1437,544],{"class":310},[304,1439,1440,1442,1445,1447,1449,1451,1453,1455],{"class":306,"line":509},[304,1441,512],{"class":310},[304,1443,1444],{"class":314},"TresMeshStandardMaterial",[304,1446,555],{"class":318},[304,1448,325],{"class":310},[304,1450,328],{"class":310},[304,1452,562],{"class":331},[304,1454,328],{"class":310},[304,1456,544],{"class":310},[304,1458,1459,1461,1463],{"class":306,"line":535},[304,1460,582],{"class":310},[304,1462,515],{"class":314},[304,1464,337],{"class":310},[304,1466,1467,1469,1471],{"class":306,"line":547},[304,1468,465],{"class":310},[304,1470,482],{"class":314},[304,1472,337],{"class":310},[287,1474,1476],{"id":1475},"correct-use-shallowref-and-direct-assignment","✅ Correct: Use shallowRef and Direct Assignment",[294,1478,1481],{"className":296,"code":1479,"filename":1480,"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,1482,1483,1503,1521,1525,1560,1576,1580,1600,1616,1654,1658,1664,1672,1676,1684,1716,1748,1766,1774],{"__ignoreMap":300},[304,1484,1485,1487,1489,1491,1493,1495,1497,1499,1501],{"class":306,"line":307},[304,1486,311],{"class":310},[304,1488,315],{"class":314},[304,1490,319],{"class":318},[304,1492,322],{"class":318},[304,1494,325],{"class":310},[304,1496,328],{"class":310},[304,1498,332],{"class":331},[304,1500,328],{"class":310},[304,1502,337],{"class":310},[304,1504,1505,1507,1509,1511,1513,1515,1517,1519],{"class":306,"line":340},[304,1506,344],{"class":343},[304,1508,347],{"class":310},[304,1510,854],{"class":350},[304,1512,354],{"class":310},[304,1514,357],{"class":343},[304,1516,360],{"class":310},[304,1518,299],{"class":331},[304,1520,365],{"class":310},[304,1522,1523],{"class":306,"line":368},[304,1524,371],{"emptyLinePlaceholder":39},[304,1526,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557],{"class":306,"line":374},[304,1528,384],{"class":318},[304,1530,1244],{"class":350},[304,1532,325],{"class":310},[304,1534,347],{"class":310},[304,1536,1256],{"class":314},[304,1538,285],{"class":310},[304,1540,1261],{"class":398},[304,1542,857],{"class":310},[304,1544,1266],{"class":314},[304,1546,285],{"class":310},[304,1548,1261],{"class":398},[304,1550,857],{"class":310},[304,1552,1275],{"class":314},[304,1554,285],{"class":310},[304,1556,1261],{"class":398},[304,1558,1559],{"class":310}," }\n",[304,1561,1562,1564,1566,1568,1570,1572,1574],{"class":306,"line":381},[304,1563,384],{"class":318},[304,1565,881],{"class":350},[304,1567,325],{"class":310},[304,1569,854],{"class":392},[304,1571,395],{"class":350},[304,1573,890],{"class":310},[304,1575,402],{"class":350},[304,1577,1578],{"class":306,"line":405},[304,1579,371],{"emptyLinePlaceholder":39},[304,1581,1582,1584,1586,1588,1590,1592,1594,1596,1598],{"class":306,"line":410},[304,1583,1292],{"class":392},[304,1585,395],{"class":350},[304,1587,1297],{"class":310},[304,1589,1301],{"class":1300},[304,1591,857],{"class":310},[304,1593,1306],{"class":1300},[304,1595,1309],{"class":310},[304,1597,427],{"class":318},[304,1599,430],{"class":310},[304,1601,1602,1604,1606,1608,1610,1612,1614],{"class":306,"line":416},[304,1603,935],{"class":343},[304,1605,938],{"class":314},[304,1607,941],{"class":350},[304,1609,439],{"class":310},[304,1611,442],{"class":350},[304,1613,954],{"class":314},[304,1615,957],{"class":310},[304,1617,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652],{"class":306,"line":433},[304,1619,962],{"class":350},[304,1621,439],{"class":310},[304,1623,442],{"class":350},[304,1625,439],{"class":310},[304,1627,951],{"class":350},[304,1629,439],{"class":310},[304,1631,975],{"class":350},[304,1633,445],{"class":310},[304,1635,1327],{"class":350},[304,1637,439],{"class":310},[304,1639,1332],{"class":392},[304,1641,395],{"class":314},[304,1643,1337],{"class":350},[304,1645,1340],{"class":310},[304,1647,1343],{"class":398},[304,1649,954],{"class":314},[304,1651,1348],{"class":310},[304,1653,1351],{"class":398},[304,1655,1656],{"class":306,"line":451},[304,1657,984],{"class":310},[304,1659,1660,1662],{"class":306,"line":462},[304,1661,760],{"class":310},[304,1663,402],{"class":350},[304,1665,1666,1668,1670],{"class":306,"line":472},[304,1667,465],{"class":310},[304,1669,315],{"class":314},[304,1671,337],{"class":310},[304,1673,1674],{"class":306,"line":477},[304,1675,371],{"emptyLinePlaceholder":39},[304,1677,1678,1680,1682],{"class":306,"line":487},[304,1679,311],{"class":310},[304,1681,482],{"class":314},[304,1683,337],{"class":310},[304,1685,1686,1688,1690,1692,1694,1696,1698,1700,1702,1704,1706,1708,1710,1712,1714],{"class":306,"line":509},[304,1687,490],{"class":310},[304,1689,515],{"class":314},[304,1691,351],{"class":318},[304,1693,325],{"class":310},[304,1695,328],{"class":310},[304,1697,941],{"class":331},[304,1699,328],{"class":310},[304,1701,518],{"class":310},[304,1703,951],{"class":318},[304,1705,325],{"class":310},[304,1707,328],{"class":310},[304,1709,951],{"class":350},[304,1711,328],{"class":310},[304,1713,1398],{"class":318},[304,1715,337],{"class":310},[304,1717,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1746],{"class":306,"line":535},[304,1719,512],{"class":310},[304,1721,541],{"class":314},[304,1723,518],{"class":310},[304,1725,1411],{"class":318},[304,1727,325],{"class":310},[304,1729,328],{"class":310},[304,1731,1418],{"class":310},[304,1733,1421],{"class":398},[304,1735,1424],{"class":310},[304,1737,1421],{"class":398},[304,1739,1424],{"class":310},[304,1741,1421],{"class":398},[304,1743,1433],{"class":310},[304,1745,328],{"class":310},[304,1747,544],{"class":310},[304,1749,1750,1752,1754,1756,1758,1760,1762,1764],{"class":306,"line":547},[304,1751,512],{"class":310},[304,1753,1444],{"class":314},[304,1755,555],{"class":318},[304,1757,325],{"class":310},[304,1759,328],{"class":310},[304,1761,562],{"class":331},[304,1763,328],{"class":310},[304,1765,544],{"class":310},[304,1767,1768,1770,1772],{"class":306,"line":569},[304,1769,582],{"class":310},[304,1771,515],{"class":314},[304,1773,337],{"class":310},[304,1775,1776,1778,1780],{"class":306,"line":579},[304,1777,465],{"class":310},[304,1779,482],{"class":314},[304,1781,337],{"class":310},[1147,1783,1784],{},[245,1785,1786,1788,1789,1792,1793,1795],{},[266,1787,1153],{}," Only the ",[274,1790,1791],{},".value"," of a ",[274,1794,1178],{}," is reactive. The internal properties are not, which is ideal for Three.js objects that are updated frequently.",[249,1797,1799,1800],{"id":1798},"dispose-resources-with-dispose","Dispose Resources with ",[274,1801,1802],{},"dispose()",[245,1804,1805],{},"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,1807,1808,1809,1811],{},"TresJS will automatically dispose of resources recursively when the component is unmounted, but you can also perform this manually by calling the ",[274,1810,1802],{}," directly from the package:",[1168,1813,1814],{},[245,1815,1816,1817,1820],{},"To avoid errors and unwanted side effects, resources created programmatically with the use of ",[274,1818,1819],{},"primitives"," need to be manually disposed.",[294,1822,1825],{"className":296,"code":1823,"filename":1824,"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,1826,1827,1847,1866,1886,1905,1909,1941,1955,1961,1978,1982,1994,1999,2011,2017,2025,2029,2037,2059],{"__ignoreMap":300},[304,1828,1829,1831,1833,1835,1837,1839,1841,1843,1845],{"class":306,"line":307},[304,1830,311],{"class":310},[304,1832,315],{"class":314},[304,1834,319],{"class":318},[304,1836,322],{"class":318},[304,1838,325],{"class":310},[304,1840,328],{"class":310},[304,1842,332],{"class":331},[304,1844,328],{"class":310},[304,1846,337],{"class":310},[304,1848,1849,1851,1853,1856,1858,1860,1862,1864],{"class":306,"line":340},[304,1850,344],{"class":343},[304,1852,347],{"class":310},[304,1854,1855],{"class":350}," dispose",[304,1857,354],{"class":310},[304,1859,357],{"class":343},[304,1861,360],{"class":310},[304,1863,742],{"class":331},[304,1865,365],{"class":310},[304,1867,1868,1870,1872,1875,1877,1879,1881,1884],{"class":306,"line":368},[304,1869,344],{"class":343},[304,1871,347],{"class":310},[304,1873,1874],{"class":350}," useGLTF",[304,1876,354],{"class":310},[304,1878,357],{"class":343},[304,1880,360],{"class":310},[304,1882,1883],{"class":331},"@tresjs/cientos",[304,1885,365],{"class":310},[304,1887,1888,1890,1892,1895,1897,1899,1901,1903],{"class":306,"line":374},[304,1889,344],{"class":343},[304,1891,347],{"class":310},[304,1893,1894],{"class":350}," onUnmounted",[304,1896,354],{"class":310},[304,1898,357],{"class":343},[304,1900,360],{"class":310},[304,1902,299],{"class":331},[304,1904,365],{"class":310},[304,1906,1907],{"class":306,"line":381},[304,1908,371],{"emptyLinePlaceholder":39},[304,1910,1911,1913,1915,1918,1920,1922,1925,1927,1929,1932,1935,1937,1939],{"class":306,"line":405},[304,1912,384],{"class":318},[304,1914,347],{"class":310},[304,1916,1917],{"class":350}," nodes ",[304,1919,760],{"class":310},[304,1921,445],{"class":310},[304,1923,1924],{"class":343}," await",[304,1926,1874],{"class":392},[304,1928,395],{"class":350},[304,1930,1931],{"class":310},"'",[304,1933,1934],{"class":331},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[304,1936,1931],{"class":310},[304,1938,857],{"class":310},[304,1940,430],{"class":310},[304,1942,1943,1946,1948,1952],{"class":306,"line":410},[304,1944,1945],{"class":314},"  draco",[304,1947,285],{"class":310},[304,1949,1951],{"class":1950},"sfNiH"," true",[304,1953,1954],{"class":310},",\n",[304,1956,1957,1959],{"class":306,"line":416},[304,1958,760],{"class":310},[304,1960,402],{"class":350},[304,1962,1963,1965,1968,1970,1973,1975],{"class":306,"line":433},[304,1964,384],{"class":318},[304,1966,1967],{"class":350}," model ",[304,1969,325],{"class":310},[304,1971,1972],{"class":350}," nodes",[304,1974,439],{"class":310},[304,1976,1977],{"class":350},"Cube\n",[304,1979,1980],{"class":306,"line":451},[304,1981,371],{"emptyLinePlaceholder":39},[304,1983,1984,1986,1988,1990,1992],{"class":306,"line":462},[304,1985,614],{"class":392},[304,1987,395],{"class":350},[304,1989,424],{"class":310},[304,1991,427],{"class":318},[304,1993,430],{"class":310},[304,1995,1996],{"class":306,"line":472},[304,1997,1998],{"class":377},"  // Dispose of the model when the component is destroyed\n",[304,2000,2001,2004,2006,2009],{"class":306,"line":477},[304,2002,2003],{"class":392},"  dispose",[304,2005,395],{"class":314},[304,2007,2008],{"class":350},"model",[304,2010,402],{"class":314},[304,2012,2013,2015],{"class":306,"line":487},[304,2014,760],{"class":310},[304,2016,402],{"class":350},[304,2018,2019,2021,2023],{"class":306,"line":509},[304,2020,465],{"class":310},[304,2022,315],{"class":314},[304,2024,337],{"class":310},[304,2026,2027],{"class":306,"line":535},[304,2028,371],{"emptyLinePlaceholder":39},[304,2030,2031,2033,2035],{"class":306,"line":547},[304,2032,311],{"class":310},[304,2034,482],{"class":314},[304,2036,337],{"class":310},[304,2038,2039,2041,2044,2046,2049,2051,2053,2055,2057],{"class":306,"line":569},[304,2040,490],{"class":310},[304,2042,2043],{"class":314},"primitive",[304,2045,518],{"class":310},[304,2047,2048],{"class":318},"object",[304,2050,325],{"class":310},[304,2052,328],{"class":310},[304,2054,2008],{"class":350},[304,2056,328],{"class":310},[304,2058,544],{"class":310},[304,2060,2061,2063,2065],{"class":306,"line":579},[304,2062,465],{"class":310},[304,2064,482],{"class":314},[304,2066,337],{"class":310},[1147,2068,2069],{},[245,2070,2071,2074],{},[266,2072,2073],{},"Best Practice:"," Always clean up resources when they are no longer needed to prevent memory leaks and keep your application performant.",[2076,2077,2078],"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":2080},[2081,2089,2093],{"id":251,"depth":340,"text":252,"children":2082},[2083,2085,2087],{"id":289,"depth":368,"text":2084},"Mode on-demand",{"id":628,"depth":368,"text":2086},"Mode manual",{"id":1087,"depth":368,"text":2088},"Mode always",{"id":1162,"depth":340,"text":1163,"children":2090},[2091,2092],{"id":1182,"depth":368,"text":1183},{"id":1475,"depth":368,"text":1476},{"id":1798,"depth":340,"text":2094},"Dispose Resources with dispose()","Quick guide with tips to improve the performance of your TresJS application.","md",null,{},{"title":162,"description":2095},"Oene6QCOybegYs9p-oiA96vPZkhFA3NcKdxgZ5q799U",[2102,2104],{"title":152,"path":153,"stem":154,"description":2103,"children":-1},"TresJS provides custom made vue directives to help you creating your scenes.",{"title":166,"path":167,"stem":168,"description":2105,"children":-1},"Use the primitive component to directly integrate any Three.js object within your Vue application.",1773121557290]