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