[{"data":1,"prerenderedAt":2141},["ShallowReactive",2],{"navigation":3,"/api/advanced/performance":239,"/api/advanced/performance-surround":2136},[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":2130,"extension":2131,"links":2132,"meta":2133,"navigation":39,"path":163,"seo":2134,"stem":164,"__hash__":2135},"docs/3.api/5.advanced/performance.md",{"type":242,"value":243,"toc":2112},"minimark",[244,248,253,256,259,262,270,286,293,593,598,623,628,636,689,696,789,793,800,1082,1088,1091,1143,1157,1164,1174,1229,1233,1236,1242,1249,1253,1524,1528,1817,1831,1838,1841,1847,1856,2100,2108],[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,530,542,564,574,584],{"__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,521,523,526,528],{"class":306,"line":509},15,[304,511,512],{"class":310},"    \u003C",[304,514,515],{"class":314},"TresMesh",[304,517,518],{"class":318}," :position-x",[304,520,325],{"class":310},[304,522,328],{"class":310},[304,524,525],{"class":331},"positionX",[304,527,328],{"class":310},[304,529,337],{"class":310},[304,531,533,536,539],{"class":306,"line":532},16,[304,534,535],{"class":310},"      \u003C",[304,537,538],{"class":314},"TresBoxGeometry",[304,540,541],{"class":310}," />\n",[304,543,545,547,550,553,555,557,560,562],{"class":306,"line":544},17,[304,546,535],{"class":310},[304,548,549],{"class":314},"TresMeshBasicMaterial",[304,551,552],{"class":318}," color",[304,554,325],{"class":310},[304,556,328],{"class":310},[304,558,559],{"class":331},"teal",[304,561,328],{"class":310},[304,563,541],{"class":310},[304,565,567,570,572],{"class":306,"line":566},18,[304,568,569],{"class":310},"    \u003C/",[304,571,515],{"class":314},[304,573,337],{"class":310},[304,575,577,580,582],{"class":306,"line":576},19,[304,578,579],{"class":310},"  \u003C/",[304,581,493],{"class":314},[304,583,337],{"class":310},[304,585,587,589,591],{"class":306,"line":586},20,[304,588,465],{"class":310},[304,590,482],{"class":314},[304,592,337],{"class":310},[594,595,597],"h4",{"id":596},"automatic-invalidation","Automatic Invalidation",[245,599,600,601,604,605,608,609,612,613,616,617,281,620,439],{},"When using ",[274,602,603],{},"render-mode=\"on-demand\"",", TresJS will automatically invalidate the current frame by observing component props and lifecycle hooks like ",[274,606,607],{},"onMounted"," and ",[274,610,611],{},"onUnmounted",". It will also invalidate the frame when resizing the window or changing any prop from the ",[274,614,615],{},"\u003CTresCanvas>"," component like ",[274,618,619],{},"clearColor",[274,621,622],{},"antialias",[287,624,290,626],{"id":625},"mode-manual",[274,627,284],{},[245,629,630,631,277,634,285],{},"If you want to have full control of when the scene is rendered, you can set the ",[274,632,633],{},"render-mode",[274,635,284],{},[294,637,640],{"className":296,"code":638,"filename":639,"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,641,642,650,668,673,681],{"__ignoreMap":300},[304,643,644,646,648],{"class":306,"line":307},[304,645,311],{"class":310},[304,647,482],{"class":314},[304,649,337],{"class":310},[304,651,652,654,656,658,660,662,664,666],{"class":306,"line":340},[304,653,490],{"class":310},[304,655,493],{"class":314},[304,657,496],{"class":318},[304,659,325],{"class":310},[304,661,328],{"class":310},[304,663,284],{"class":331},[304,665,328],{"class":310},[304,667,337],{"class":310},[304,669,670],{"class":306,"line":368},[304,671,672],{"class":377},"    \u003C!-- Your scene goes here -->\n",[304,674,675,677,679],{"class":306,"line":374},[304,676,579],{"class":310},[304,678,493],{"class":314},[304,680,337],{"class":310},[304,682,683,685,687],{"class":306,"line":381},[304,684,465],{"class":310},[304,686,482],{"class":314},[304,688,337],{"class":310},[245,690,691,692,695],{},"In this mode, Tres will not render the scene automatically. You will need to call the ",[274,693,694],{},"advance()"," method from the useTres composable to render the scene:",[294,697,700],{"className":296,"code":698,"filename":699,"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,701,702,722,742,746,765,769,774,781],{"__ignoreMap":300},[304,703,704,706,708,710,712,714,716,718,720],{"class":306,"line":307},[304,705,311],{"class":310},[304,707,315],{"class":314},[304,709,319],{"class":318},[304,711,322],{"class":318},[304,713,325],{"class":310},[304,715,328],{"class":310},[304,717,332],{"class":331},[304,719,328],{"class":310},[304,721,337],{"class":310},[304,723,724,726,728,731,733,735,737,740],{"class":306,"line":340},[304,725,344],{"class":343},[304,727,347],{"class":310},[304,729,730],{"class":350}," useTres",[304,732,354],{"class":310},[304,734,357],{"class":343},[304,736,360],{"class":310},[304,738,739],{"class":331},"@tresjs/core",[304,741,365],{"class":310},[304,743,744],{"class":306,"line":368},[304,745,371],{"emptyLinePlaceholder":39},[304,747,748,750,752,755,758,760,762],{"class":306,"line":374},[304,749,384],{"class":318},[304,751,347],{"class":310},[304,753,754],{"class":350}," advance ",[304,756,757],{"class":310},"}",[304,759,445],{"class":310},[304,761,730],{"class":392},[304,763,764],{"class":350},"()\n",[304,766,767],{"class":306,"line":381},[304,768,371],{"emptyLinePlaceholder":39},[304,770,771],{"class":306,"line":405},[304,772,773],{"class":377},"// Call advance() whenever you want to render a frame\n",[304,775,776,779],{"class":306,"line":410},[304,777,778],{"class":392},"advance",[304,780,764],{"class":350},[304,782,783,785,787],{"class":306,"line":416},[304,784,465],{"class":310},[304,786,315],{"class":314},[304,788,337],{"class":310},[594,790,792],{"id":791},"manual-invalidation","Manual Invalidation",[245,794,795,796,799],{},"It’s often not possible to observe every change in your application. In such cases, you can manually invalidate the frame using the ",[274,797,798],{},"invalidate()"," method from the useTres composable.:",[294,801,803],{"className":296,"code":802,"filename":699,"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,804,805,825,843,868,872,890,907,911,928,955,977,982,987,994,1000,1008,1012,1020,1038,1046,1064,1073],{"__ignoreMap":300},[304,806,807,809,811,813,815,817,819,821,823],{"class":306,"line":307},[304,808,311],{"class":310},[304,810,315],{"class":314},[304,812,319],{"class":318},[304,814,322],{"class":318},[304,816,325],{"class":310},[304,818,328],{"class":310},[304,820,332],{"class":331},[304,822,328],{"class":310},[304,824,337],{"class":310},[304,826,827,829,831,833,835,837,839,841],{"class":306,"line":340},[304,828,344],{"class":343},[304,830,347],{"class":310},[304,832,730],{"class":350},[304,834,354],{"class":310},[304,836,357],{"class":343},[304,838,360],{"class":310},[304,840,739],{"class":331},[304,842,365],{"class":310},[304,844,845,847,849,852,855,858,860,862,864,866],{"class":306,"line":368},[304,846,344],{"class":343},[304,848,347],{"class":310},[304,850,851],{"class":350}," shallowRef",[304,853,854],{"class":310},",",[304,856,857],{"class":350}," watch",[304,859,354],{"class":310},[304,861,357],{"class":343},[304,863,360],{"class":310},[304,865,299],{"class":331},[304,867,365],{"class":310},[304,869,870],{"class":306,"line":374},[304,871,371],{"emptyLinePlaceholder":39},[304,873,874,876,879,881,883,885,888],{"class":306,"line":381},[304,875,384],{"class":318},[304,877,878],{"class":350}," boxRef ",[304,880,325],{"class":310},[304,882,851],{"class":392},[304,884,395],{"class":350},[304,886,887],{"class":310},"null",[304,889,402],{"class":350},[304,891,892,894,896,899,901,903,905],{"class":306,"line":405},[304,893,384],{"class":318},[304,895,347],{"class":310},[304,897,898],{"class":350}," invalidate ",[304,900,757],{"class":310},[304,902,445],{"class":310},[304,904,730],{"class":392},[304,906,764],{"class":350},[304,908,909],{"class":306,"line":410},[304,910,371],{"emptyLinePlaceholder":39},[304,912,913,916,919,921,924,926],{"class":306,"line":416},[304,914,915],{"class":392},"watch",[304,917,918],{"class":350},"(boxRef",[304,920,854],{"class":310},[304,922,923],{"class":310}," ()",[304,925,427],{"class":318},[304,927,430],{"class":310},[304,929,930,933,936,939,941,943,946,949,952],{"class":306,"line":433},[304,931,932],{"class":343},"  if",[304,934,935],{"class":314}," (",[304,937,938],{"class":350},"boxRef",[304,940,439],{"class":310},[304,942,442],{"class":350},[304,944,945],{"class":310},"?.",[304,947,948],{"class":350},"position",[304,950,951],{"class":314},") ",[304,953,954],{"class":310},"{\n",[304,956,957,960,962,964,966,968,970,973,975],{"class":306,"line":451},[304,958,959],{"class":350},"    boxRef",[304,961,439],{"class":310},[304,963,442],{"class":350},[304,965,439],{"class":310},[304,967,948],{"class":350},[304,969,439],{"class":310},[304,971,972],{"class":350},"x",[304,974,445],{"class":310},[304,976,448],{"class":398},[304,978,979],{"class":306,"line":462},[304,980,981],{"class":310},"  }\n",[304,983,984],{"class":306,"line":472},[304,985,986],{"class":377},"  // Invalidate the frame to trigger a render\n",[304,988,989,992],{"class":306,"line":477},[304,990,991],{"class":392},"  invalidate",[304,993,764],{"class":314},[304,995,996,998],{"class":306,"line":487},[304,997,757],{"class":310},[304,999,402],{"class":350},[304,1001,1002,1004,1006],{"class":306,"line":509},[304,1003,465],{"class":310},[304,1005,315],{"class":314},[304,1007,337],{"class":310},[304,1009,1010],{"class":306,"line":532},[304,1011,371],{"emptyLinePlaceholder":39},[304,1013,1014,1016,1018],{"class":306,"line":544},[304,1015,311],{"class":310},[304,1017,482],{"class":314},[304,1019,337],{"class":310},[304,1021,1022,1024,1026,1028,1030,1032,1034,1036],{"class":306,"line":566},[304,1023,490],{"class":310},[304,1025,515],{"class":314},[304,1027,351],{"class":318},[304,1029,325],{"class":310},[304,1031,328],{"class":310},[304,1033,938],{"class":331},[304,1035,328],{"class":310},[304,1037,337],{"class":310},[304,1039,1040,1042,1044],{"class":306,"line":576},[304,1041,512],{"class":310},[304,1043,538],{"class":314},[304,1045,541],{"class":310},[304,1047,1048,1050,1052,1054,1056,1058,1060,1062],{"class":306,"line":586},[304,1049,512],{"class":310},[304,1051,549],{"class":314},[304,1053,552],{"class":318},[304,1055,325],{"class":310},[304,1057,328],{"class":310},[304,1059,559],{"class":331},[304,1061,328],{"class":310},[304,1063,541],{"class":310},[304,1065,1067,1069,1071],{"class":306,"line":1066},21,[304,1068,579],{"class":310},[304,1070,515],{"class":314},[304,1072,337],{"class":310},[304,1074,1076,1078,1080],{"class":306,"line":1075},22,[304,1077,465],{"class":310},[304,1079,482],{"class":314},[304,1081,337],{"class":310},[287,1083,290,1085],{"id":1084},"mode-always",[274,1086,1087],{},"always",[245,1089,1090],{},"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,1092,1095],{"className":296,"code":1093,"filename":1094,"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,1096,1097,1105,1123,1127,1135],{"__ignoreMap":300},[304,1098,1099,1101,1103],{"class":306,"line":307},[304,1100,311],{"class":310},[304,1102,482],{"class":314},[304,1104,337],{"class":310},[304,1106,1107,1109,1111,1113,1115,1117,1119,1121],{"class":306,"line":340},[304,1108,490],{"class":310},[304,1110,493],{"class":314},[304,1112,496],{"class":318},[304,1114,325],{"class":310},[304,1116,328],{"class":310},[304,1118,1087],{"class":331},[304,1120,328],{"class":310},[304,1122,337],{"class":310},[304,1124,1125],{"class":306,"line":368},[304,1126,672],{"class":377},[304,1128,1129,1131,1133],{"class":306,"line":374},[304,1130,579],{"class":310},[304,1132,493],{"class":314},[304,1134,337],{"class":310},[304,1136,1137,1139,1141],{"class":306,"line":381},[304,1138,465],{"class":310},[304,1140,482],{"class":314},[304,1142,337],{"class":310},[1144,1145,1146],"note",{},[245,1147,1148,1151,1152,281,1154,1156],{},[266,1149,1150],{},"Tip:"," Use ",[274,1153,280],{},[274,1155,284],{}," rendering modes for static or mostly-static scenes to save resources and improve battery life.",[249,1158,1160,1161],{"id":1159},"limit-fps-with-fpslimit","Limit FPS with ",[274,1162,1163],{},"fpsLimit",[245,1165,1166,1167,1170,1171,1173],{},"If your scene does not need to update at full refresh rate, cap the loop with the ",[274,1168,1169],{},"fps-limit"," prop on ",[274,1172,493],{},". Lowering FPS reduces CPU/GPU work and can improve thermals and battery life.",[294,1175,1178],{"className":296,"code":1176,"filename":1177,"language":299,"meta":300,"style":300},"\u003Ctemplate>\n  \u003CTresCanvas :fps-limit=\"30\">\n    \u003C!-- Your scene -->\n  \u003C/TresCanvas>\n\u003C/template>\n","fps-limit.vue",[274,1179,1180,1188,1208,1213,1221],{"__ignoreMap":300},[304,1181,1182,1184,1186],{"class":306,"line":307},[304,1183,311],{"class":310},[304,1185,482],{"class":314},[304,1187,337],{"class":310},[304,1189,1190,1192,1194,1197,1199,1201,1204,1206],{"class":306,"line":340},[304,1191,490],{"class":310},[304,1193,493],{"class":314},[304,1195,1196],{"class":318}," :fps-limit",[304,1198,325],{"class":310},[304,1200,328],{"class":310},[304,1202,1203],{"class":331},"30",[304,1205,328],{"class":310},[304,1207,337],{"class":310},[304,1209,1210],{"class":306,"line":368},[304,1211,1212],{"class":377},"    \u003C!-- Your scene -->\n",[304,1214,1215,1217,1219],{"class":306,"line":374},[304,1216,579],{"class":310},[304,1218,493],{"class":314},[304,1220,337],{"class":310},[304,1222,1223,1225,1227],{"class":306,"line":381},[304,1224,465],{"class":310},[304,1226,482],{"class":314},[304,1228,337],{"class":310},[249,1230,1232],{"id":1231},"reactivity-and-performance","Reactivity and Performance",[245,1234,1235],{},"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.",[1237,1238,1239],"warning",{},[245,1240,1241],{},"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,1243,1244,1245,1248],{},"Instead, use ",[274,1246,1247],{},"shallowRef"," for Three.js objects. This keeps the reference reactive, but does not make the internal properties reactive, which is much more efficient.",[287,1250,1252],{"id":1251},"incorrect-deep-reactivity","❌ Incorrect: Deep Reactivity",[294,1254,1257],{"className":296,"code":1255,"filename":1256,"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,1258,1259,1279,1298,1302,1307,1353,1357,1383,1421,1427,1435,1439,1447,1469,1489,1508,1516],{"__ignoreMap":300},[304,1260,1261,1263,1265,1267,1269,1271,1273,1275,1277],{"class":306,"line":307},[304,1262,311],{"class":310},[304,1264,315],{"class":314},[304,1266,319],{"class":318},[304,1268,322],{"class":318},[304,1270,325],{"class":310},[304,1272,328],{"class":310},[304,1274,332],{"class":331},[304,1276,328],{"class":310},[304,1278,337],{"class":310},[304,1280,1281,1283,1285,1288,1290,1292,1294,1296],{"class":306,"line":340},[304,1282,344],{"class":343},[304,1284,347],{"class":310},[304,1286,1287],{"class":350}," reactive",[304,1289,354],{"class":310},[304,1291,357],{"class":343},[304,1293,360],{"class":310},[304,1295,299],{"class":331},[304,1297,365],{"class":310},[304,1299,1300],{"class":306,"line":368},[304,1301,371],{"emptyLinePlaceholder":39},[304,1303,1304],{"class":306,"line":374},[304,1305,1306],{"class":377},"// This will make all properties reactive (not recommended for Three.js objects)\n",[304,1308,1309,1311,1314,1316,1318,1320,1323,1326,1328,1331,1333,1336,1338,1340,1342,1345,1347,1349,1351],{"class":306,"line":381},[304,1310,384],{"class":318},[304,1312,1313],{"class":350}," position ",[304,1315,325],{"class":310},[304,1317,1287],{"class":392},[304,1319,395],{"class":350},[304,1321,1322],{"class":310},"{",[304,1324,1325],{"class":314}," x",[304,1327,285],{"class":310},[304,1329,1330],{"class":398}," 0",[304,1332,854],{"class":310},[304,1334,1335],{"class":314}," y",[304,1337,285],{"class":310},[304,1339,1330],{"class":398},[304,1341,854],{"class":310},[304,1343,1344],{"class":314}," z",[304,1346,285],{"class":310},[304,1348,1330],{"class":398},[304,1350,354],{"class":310},[304,1352,402],{"class":350},[304,1354,1355],{"class":306,"line":405},[304,1356,371],{"emptyLinePlaceholder":39},[304,1358,1359,1362,1364,1367,1371,1373,1376,1379,1381],{"class":306,"line":410},[304,1360,1361],{"class":392},"onLoop",[304,1363,395],{"class":350},[304,1365,1366],{"class":310},"({",[304,1368,1370],{"class":1369},"sHdIc"," _delta",[304,1372,854],{"class":310},[304,1374,1375],{"class":1369}," elapsed",[304,1377,1378],{"class":310}," })",[304,1380,427],{"class":318},[304,1382,430],{"class":310},[304,1384,1385,1388,1390,1392,1394,1397,1399,1402,1404,1407,1410,1413,1415,1418],{"class":306,"line":416},[304,1386,1387],{"class":350},"  position",[304,1389,439],{"class":310},[304,1391,972],{"class":350},[304,1393,445],{"class":310},[304,1395,1396],{"class":350}," Math",[304,1398,439],{"class":310},[304,1400,1401],{"class":392},"sin",[304,1403,395],{"class":314},[304,1405,1406],{"class":350},"elapsed",[304,1408,1409],{"class":310}," *",[304,1411,1412],{"class":398}," 0.1",[304,1414,951],{"class":314},[304,1416,1417],{"class":310},"*",[304,1419,1420],{"class":398}," 3\n",[304,1422,1423,1425],{"class":306,"line":433},[304,1424,757],{"class":310},[304,1426,402],{"class":350},[304,1428,1429,1431,1433],{"class":306,"line":451},[304,1430,465],{"class":310},[304,1432,315],{"class":314},[304,1434,337],{"class":310},[304,1436,1437],{"class":306,"line":462},[304,1438,371],{"emptyLinePlaceholder":39},[304,1440,1441,1443,1445],{"class":306,"line":472},[304,1442,311],{"class":310},[304,1444,482],{"class":314},[304,1446,337],{"class":310},[304,1448,1449,1451,1453,1456,1458,1460,1462,1464,1467],{"class":306,"line":477},[304,1450,490],{"class":310},[304,1452,515],{"class":314},[304,1454,1455],{"class":318}," :position",[304,1457,325],{"class":310},[304,1459,328],{"class":310},[304,1461,948],{"class":331},[304,1463,328],{"class":310},[304,1465,1466],{"class":318}," cast-shadow",[304,1468,337],{"class":310},[304,1470,1471,1473,1475,1478,1480,1482,1485,1487],{"class":306,"line":487},[304,1472,512],{"class":310},[304,1474,538],{"class":314},[304,1476,1477],{"class":318}," :args",[304,1479,325],{"class":310},[304,1481,328],{"class":310},[304,1483,1484],{"class":331},"[1, 1, 1]",[304,1486,328],{"class":310},[304,1488,541],{"class":310},[304,1490,1491,1493,1496,1498,1500,1502,1504,1506],{"class":306,"line":509},[304,1492,512],{"class":310},[304,1494,1495],{"class":314},"TresMeshStandardMaterial",[304,1497,552],{"class":318},[304,1499,325],{"class":310},[304,1501,328],{"class":310},[304,1503,559],{"class":331},[304,1505,328],{"class":310},[304,1507,541],{"class":310},[304,1509,1510,1512,1514],{"class":306,"line":532},[304,1511,579],{"class":310},[304,1513,515],{"class":314},[304,1515,337],{"class":310},[304,1517,1518,1520,1522],{"class":306,"line":544},[304,1519,465],{"class":310},[304,1521,482],{"class":314},[304,1523,337],{"class":310},[287,1525,1527],{"id":1526},"correct-use-shallowref-and-direct-assignment","✅ Correct: Use shallowRef and Direct Assignment",[294,1529,1532],{"className":296,"code":1530,"filename":1531,"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,1533,1534,1554,1572,1576,1611,1627,1631,1651,1667,1705,1709,1715,1723,1727,1735,1765,1783,1801,1809],{"__ignoreMap":300},[304,1535,1536,1538,1540,1542,1544,1546,1548,1550,1552],{"class":306,"line":307},[304,1537,311],{"class":310},[304,1539,315],{"class":314},[304,1541,319],{"class":318},[304,1543,322],{"class":318},[304,1545,325],{"class":310},[304,1547,328],{"class":310},[304,1549,332],{"class":331},[304,1551,328],{"class":310},[304,1553,337],{"class":310},[304,1555,1556,1558,1560,1562,1564,1566,1568,1570],{"class":306,"line":340},[304,1557,344],{"class":343},[304,1559,347],{"class":310},[304,1561,851],{"class":350},[304,1563,354],{"class":310},[304,1565,357],{"class":343},[304,1567,360],{"class":310},[304,1569,299],{"class":331},[304,1571,365],{"class":310},[304,1573,1574],{"class":306,"line":368},[304,1575,371],{"emptyLinePlaceholder":39},[304,1577,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1608],{"class":306,"line":374},[304,1579,384],{"class":318},[304,1581,1313],{"class":350},[304,1583,325],{"class":310},[304,1585,347],{"class":310},[304,1587,1325],{"class":314},[304,1589,285],{"class":310},[304,1591,1330],{"class":398},[304,1593,854],{"class":310},[304,1595,1335],{"class":314},[304,1597,285],{"class":310},[304,1599,1330],{"class":398},[304,1601,854],{"class":310},[304,1603,1344],{"class":314},[304,1605,285],{"class":310},[304,1607,1330],{"class":398},[304,1609,1610],{"class":310}," }\n",[304,1612,1613,1615,1617,1619,1621,1623,1625],{"class":306,"line":381},[304,1614,384],{"class":318},[304,1616,878],{"class":350},[304,1618,325],{"class":310},[304,1620,851],{"class":392},[304,1622,395],{"class":350},[304,1624,887],{"class":310},[304,1626,402],{"class":350},[304,1628,1629],{"class":306,"line":405},[304,1630,371],{"emptyLinePlaceholder":39},[304,1632,1633,1635,1637,1639,1641,1643,1645,1647,1649],{"class":306,"line":410},[304,1634,1361],{"class":392},[304,1636,395],{"class":350},[304,1638,1366],{"class":310},[304,1640,1370],{"class":1369},[304,1642,854],{"class":310},[304,1644,1375],{"class":1369},[304,1646,1378],{"class":310},[304,1648,427],{"class":318},[304,1650,430],{"class":310},[304,1652,1653,1655,1657,1659,1661,1663,1665],{"class":306,"line":416},[304,1654,932],{"class":343},[304,1656,935],{"class":314},[304,1658,938],{"class":350},[304,1660,439],{"class":310},[304,1662,442],{"class":350},[304,1664,951],{"class":314},[304,1666,954],{"class":310},[304,1668,1669,1671,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703],{"class":306,"line":433},[304,1670,959],{"class":350},[304,1672,439],{"class":310},[304,1674,442],{"class":350},[304,1676,439],{"class":310},[304,1678,948],{"class":350},[304,1680,439],{"class":310},[304,1682,972],{"class":350},[304,1684,445],{"class":310},[304,1686,1396],{"class":350},[304,1688,439],{"class":310},[304,1690,1401],{"class":392},[304,1692,395],{"class":314},[304,1694,1406],{"class":350},[304,1696,1409],{"class":310},[304,1698,1412],{"class":398},[304,1700,951],{"class":314},[304,1702,1417],{"class":310},[304,1704,1420],{"class":398},[304,1706,1707],{"class":306,"line":451},[304,1708,981],{"class":310},[304,1710,1711,1713],{"class":306,"line":462},[304,1712,757],{"class":310},[304,1714,402],{"class":350},[304,1716,1717,1719,1721],{"class":306,"line":472},[304,1718,465],{"class":310},[304,1720,315],{"class":314},[304,1722,337],{"class":310},[304,1724,1725],{"class":306,"line":477},[304,1726,371],{"emptyLinePlaceholder":39},[304,1728,1729,1731,1733],{"class":306,"line":487},[304,1730,311],{"class":310},[304,1732,482],{"class":314},[304,1734,337],{"class":310},[304,1736,1737,1739,1741,1743,1745,1747,1749,1751,1753,1755,1757,1759,1761,1763],{"class":306,"line":509},[304,1738,490],{"class":310},[304,1740,515],{"class":314},[304,1742,351],{"class":318},[304,1744,325],{"class":310},[304,1746,328],{"class":310},[304,1748,938],{"class":331},[304,1750,328],{"class":310},[304,1752,1455],{"class":318},[304,1754,325],{"class":310},[304,1756,328],{"class":310},[304,1758,948],{"class":331},[304,1760,328],{"class":310},[304,1762,1466],{"class":318},[304,1764,337],{"class":310},[304,1766,1767,1769,1771,1773,1775,1777,1779,1781],{"class":306,"line":532},[304,1768,512],{"class":310},[304,1770,538],{"class":314},[304,1772,1477],{"class":318},[304,1774,325],{"class":310},[304,1776,328],{"class":310},[304,1778,1484],{"class":331},[304,1780,328],{"class":310},[304,1782,541],{"class":310},[304,1784,1785,1787,1789,1791,1793,1795,1797,1799],{"class":306,"line":544},[304,1786,512],{"class":310},[304,1788,1495],{"class":314},[304,1790,552],{"class":318},[304,1792,325],{"class":310},[304,1794,328],{"class":310},[304,1796,559],{"class":331},[304,1798,328],{"class":310},[304,1800,541],{"class":310},[304,1802,1803,1805,1807],{"class":306,"line":566},[304,1804,579],{"class":310},[304,1806,515],{"class":314},[304,1808,337],{"class":310},[304,1810,1811,1813,1815],{"class":306,"line":576},[304,1812,465],{"class":310},[304,1814,482],{"class":314},[304,1816,337],{"class":310},[1144,1818,1819],{},[245,1820,1821,1823,1824,1827,1828,1830],{},[266,1822,1150],{}," Only the ",[274,1825,1826],{},".value"," of a ",[274,1829,1247],{}," is reactive. The internal properties are not, which is ideal for Three.js objects that are updated frequently.",[249,1832,1834,1835],{"id":1833},"dispose-resources-with-dispose","Dispose Resources with ",[274,1836,1837],{},"dispose()",[245,1839,1840],{},"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,1842,1843,1844,1846],{},"TresJS will automatically dispose of resources recursively when the component is unmounted, but you can also perform this manually by calling the ",[274,1845,1837],{}," directly from the package:",[1237,1848,1849],{},[245,1850,1851,1852,1855],{},"To avoid errors and unwanted side effects, resources created programmatically with the use of ",[274,1853,1854],{},"primitives"," need to be manually disposed.",[294,1857,1860],{"className":296,"code":1858,"filename":1859,"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,1861,1862,1882,1901,1921,1940,1944,1976,1990,1996,2013,2017,2029,2034,2046,2052,2060,2064,2072,2092],{"__ignoreMap":300},[304,1863,1864,1866,1868,1870,1872,1874,1876,1878,1880],{"class":306,"line":307},[304,1865,311],{"class":310},[304,1867,315],{"class":314},[304,1869,319],{"class":318},[304,1871,322],{"class":318},[304,1873,325],{"class":310},[304,1875,328],{"class":310},[304,1877,332],{"class":331},[304,1879,328],{"class":310},[304,1881,337],{"class":310},[304,1883,1884,1886,1888,1891,1893,1895,1897,1899],{"class":306,"line":340},[304,1885,344],{"class":343},[304,1887,347],{"class":310},[304,1889,1890],{"class":350}," dispose",[304,1892,354],{"class":310},[304,1894,357],{"class":343},[304,1896,360],{"class":310},[304,1898,739],{"class":331},[304,1900,365],{"class":310},[304,1902,1903,1905,1907,1910,1912,1914,1916,1919],{"class":306,"line":368},[304,1904,344],{"class":343},[304,1906,347],{"class":310},[304,1908,1909],{"class":350}," useGLTF",[304,1911,354],{"class":310},[304,1913,357],{"class":343},[304,1915,360],{"class":310},[304,1917,1918],{"class":331},"@tresjs/cientos",[304,1920,365],{"class":310},[304,1922,1923,1925,1927,1930,1932,1934,1936,1938],{"class":306,"line":374},[304,1924,344],{"class":343},[304,1926,347],{"class":310},[304,1928,1929],{"class":350}," onUnmounted",[304,1931,354],{"class":310},[304,1933,357],{"class":343},[304,1935,360],{"class":310},[304,1937,299],{"class":331},[304,1939,365],{"class":310},[304,1941,1942],{"class":306,"line":381},[304,1943,371],{"emptyLinePlaceholder":39},[304,1945,1946,1948,1950,1953,1955,1957,1960,1962,1964,1967,1970,1972,1974],{"class":306,"line":405},[304,1947,384],{"class":318},[304,1949,347],{"class":310},[304,1951,1952],{"class":350}," nodes ",[304,1954,757],{"class":310},[304,1956,445],{"class":310},[304,1958,1959],{"class":343}," await",[304,1961,1909],{"class":392},[304,1963,395],{"class":350},[304,1965,1966],{"class":310},"'",[304,1968,1969],{"class":331},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[304,1971,1966],{"class":310},[304,1973,854],{"class":310},[304,1975,430],{"class":310},[304,1977,1978,1981,1983,1987],{"class":306,"line":410},[304,1979,1980],{"class":314},"  draco",[304,1982,285],{"class":310},[304,1984,1986],{"class":1985},"sfNiH"," true",[304,1988,1989],{"class":310},",\n",[304,1991,1992,1994],{"class":306,"line":416},[304,1993,757],{"class":310},[304,1995,402],{"class":350},[304,1997,1998,2000,2003,2005,2008,2010],{"class":306,"line":433},[304,1999,384],{"class":318},[304,2001,2002],{"class":350}," model ",[304,2004,325],{"class":310},[304,2006,2007],{"class":350}," nodes",[304,2009,439],{"class":310},[304,2011,2012],{"class":350},"Cube\n",[304,2014,2015],{"class":306,"line":451},[304,2016,371],{"emptyLinePlaceholder":39},[304,2018,2019,2021,2023,2025,2027],{"class":306,"line":462},[304,2020,611],{"class":392},[304,2022,395],{"class":350},[304,2024,424],{"class":310},[304,2026,427],{"class":318},[304,2028,430],{"class":310},[304,2030,2031],{"class":306,"line":472},[304,2032,2033],{"class":377},"  // Dispose of the model when the component is destroyed\n",[304,2035,2036,2039,2041,2044],{"class":306,"line":477},[304,2037,2038],{"class":392},"  dispose",[304,2040,395],{"class":314},[304,2042,2043],{"class":350},"model",[304,2045,402],{"class":314},[304,2047,2048,2050],{"class":306,"line":487},[304,2049,757],{"class":310},[304,2051,402],{"class":350},[304,2053,2054,2056,2058],{"class":306,"line":509},[304,2055,465],{"class":310},[304,2057,315],{"class":314},[304,2059,337],{"class":310},[304,2061,2062],{"class":306,"line":532},[304,2063,371],{"emptyLinePlaceholder":39},[304,2065,2066,2068,2070],{"class":306,"line":544},[304,2067,311],{"class":310},[304,2069,482],{"class":314},[304,2071,337],{"class":310},[304,2073,2074,2076,2079,2082,2084,2086,2088,2090],{"class":306,"line":566},[304,2075,490],{"class":310},[304,2077,2078],{"class":314},"primitive",[304,2080,2081],{"class":318}," :object",[304,2083,325],{"class":310},[304,2085,328],{"class":310},[304,2087,2043],{"class":331},[304,2089,328],{"class":310},[304,2091,541],{"class":310},[304,2093,2094,2096,2098],{"class":306,"line":576},[304,2095,465],{"class":310},[304,2097,482],{"class":314},[304,2099,337],{"class":310},[1144,2101,2102],{},[245,2103,2104,2107],{},[266,2105,2106],{},"Best Practice:"," Always clean up resources when they are no longer needed to prevent memory leaks and keep your application performant.",[2109,2110,2111],"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":2113},[2114,2122,2124,2128],{"id":251,"depth":340,"text":252,"children":2115},[2116,2118,2120],{"id":289,"depth":368,"text":2117},"Mode on-demand",{"id":625,"depth":368,"text":2119},"Mode manual",{"id":1084,"depth":368,"text":2121},"Mode always",{"id":1159,"depth":340,"text":2123},"Limit FPS with fpsLimit",{"id":1231,"depth":340,"text":1232,"children":2125},[2126,2127],{"id":1251,"depth":368,"text":1252},{"id":1526,"depth":368,"text":1527},{"id":1833,"depth":340,"text":2129},"Dispose Resources with dispose()","Quick guide with tips to improve the performance of your TresJS application.","md",null,{},{"title":162,"description":2130},"2SAiIx7Ak1FctsFXmDdqF1Ope-9c4NlL6qOvb8LFpbE",[2137,2139],{"title":152,"path":153,"stem":154,"description":2138,"children":-1},"TresJS provides custom made vue directives to help you creating your scenes.",{"title":166,"path":167,"stem":168,"description":2140,"children":-1},"Use the primitive component to directly integrate any Three.js object within your Vue application.",1782052333537]