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