[{"data":1,"prerenderedAt":4322},["ShallowReactive",2],{"navigation":3,"/getting-started/upgrade-guide":239,"/getting-started/upgrade-guide-surround":4317},[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":23,"body":241,"description":4310,"extension":4311,"links":4312,"meta":4313,"navigation":4314,"path":24,"seo":4315,"stem":25,"__hash__":4316},"docs/1.getting-started/4.upgrade-guide.md",{"type":242,"value":243,"toc":4292},"minimark",[244,249,254,261,272,330,334,337,341,345,348,353,356,360,376,380,390,480,488,533,541,603,609,611,614,624,648,651,658,750,757,1091,1098,1231,1238,1356,1363,1419,1423,1426,1429,1438,1441,1452,1455,1462,1476,1483,1539,1546,1589,1593,1595,1598,1629,1632,1652,1655,1662,1779,1786,1875,1882,1915,1919,1922,1925,1928,1931,1942,1945,1956,2016,2024,2077,2086,2090,2092,2095,2116,2119,2130,2133,2141,2214,2220,2270,2275,2343,2349,2353,2355,2359,2395,2398,2409,2412,2419,2446,2603,2688,2696,3196,3203,3270,3337,3353,3361,3371,3476,3483,3509,3534,3538,3541,3544,3551,3556,3615,3620,3682,3685,3688,3691,3698,3886,3893,4077,4084,4261,4265,4268,4285,4288],[245,246,248],"h2",{"id":247},"upgrading-tresjs","Upgrading TresJS",[250,251,253],"h3",{"id":252},"latest-release","Latest Release",[255,256,257],"warning",{},[258,259,260],"p",{},"This document covers the upgrade process from version 4.x to version 5.x. It's currently on nightly builds so you expect possible breaking changes.",[258,262,263,264,271],{},"To upgrade TresJS to the ",[265,266,270],"a",{"href":267,"rel":268},"https://github.com/tresjs/tres/releases",[269],"nofollow","latest next release",", run the following command:",[273,274,275,301,316],"code-group",{},[276,277,283],"pre",{"className":278,"code":279,"filename":280,"language":281,"meta":282,"style":282},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add tresjs@next\n","pnpm","bash","",[284,285,286],"code",{"__ignoreMap":282},[287,288,291,294,298],"span",{"class":289,"line":290},"line",1,[287,292,280],{"class":293},"sBMFI",[287,295,297],{"class":296},"sfazB"," add",[287,299,300],{"class":296}," tresjs@next\n",[276,302,305],{"className":278,"code":303,"filename":304,"language":281,"meta":282,"style":282},"npm install tresjs@next\n","npm",[284,306,307],{"__ignoreMap":282},[287,308,309,311,314],{"class":289,"line":290},[287,310,304],{"class":293},[287,312,313],{"class":296}," install",[287,315,300],{"class":296},[276,317,320],{"className":278,"code":318,"filename":319,"language":281,"meta":282,"style":282},"yarn add tresjs@next\n","yarn",[284,321,322],{"__ignoreMap":282},[287,323,324,326,328],{"class":289,"line":290},[287,325,319],{"class":293},[287,327,297],{"class":296},[287,329,300],{"class":296},[250,331,333],{"id":332},"major-version-upgrades","Major Version Upgrades",[258,335,336],{},"When upgrading to a new major version of TresJS, you may need to make changes to your code. Below are the breaking changes introduced in v5 and how to migrate your code.",[245,338,340],{"id":339},"breaking-changes-in-v5","Breaking Changes in v5",[250,342,344],{"id":343},"esm-only-build","ESM-only Build",[258,346,347],{},"🚦 Impact Level: High",[349,350,352],"h4",{"id":351},"what-changed","What Changed",[258,354,355],{},"TresJS v5 is now ESM (ES Module) only. The UMD build configuration has been removed.",[349,357,359],{"id":358},"why-we-changed-it","Why We Changed It",[361,362,363,367,370,373],"ul",{},[364,365,366],"li",{},"Modern JavaScript ecosystem has moved towards ESM",[364,368,369],{},"Better tree-shaking and smaller bundle sizes",[364,371,372],{},"Improved TypeScript support",[364,374,375],{},"Aligns with Vue 3 and modern tooling",[349,377,379],{"id":378},"migration-steps","Migration Steps",[381,382,383],"ol",{},[364,384,385,389],{},[386,387,388],"strong",{},"Update your import statements"," to use ESM syntax:",[276,391,395],{"className":392,"code":393,"language":394,"meta":282,"style":282},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// ❌ Old CommonJS (no longer supported)\nconst { TresCanvas } = require('@tresjs/core')\n\n// ✅ New ESM syntax\nimport { TresCanvas } from '@tresjs/core'\n","js",[284,396,397,403,442,448,454],{"__ignoreMap":282},[287,398,399],{"class":289,"line":290},[287,400,402],{"class":401},"sHwdD","// ❌ Old CommonJS (no longer supported)\n",[287,404,406,410,414,418,421,424,428,431,434,437,439],{"class":289,"line":405},2,[287,407,409],{"class":408},"spNyl","const",[287,411,413],{"class":412},"sMK4o"," {",[287,415,417],{"class":416},"sTEyZ"," TresCanvas ",[287,419,420],{"class":412},"}",[287,422,423],{"class":412}," =",[287,425,427],{"class":426},"s2Zo4"," require",[287,429,430],{"class":416},"(",[287,432,433],{"class":412},"'",[287,435,436],{"class":296},"@tresjs/core",[287,438,433],{"class":412},[287,440,441],{"class":416},")\n",[287,443,445],{"class":289,"line":444},3,[287,446,447],{"emptyLinePlaceholder":39},"\n",[287,449,451],{"class":289,"line":450},4,[287,452,453],{"class":401},"// ✅ New ESM syntax\n",[287,455,457,461,463,466,469,472,475,477],{"class":289,"line":456},5,[287,458,460],{"class":459},"s7zQu","import",[287,462,413],{"class":412},[287,464,465],{"class":416}," TresCanvas",[287,467,468],{"class":412}," }",[287,470,471],{"class":459}," from",[287,473,474],{"class":412}," '",[287,476,436],{"class":296},[287,478,479],{"class":412},"'\n",[381,481,482],{"start":405},[364,483,484,487],{},[386,485,486],{},"Update your build configuration"," to support ESM:",[276,489,493],{"className":490,"code":491,"language":492,"meta":282,"style":282},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// package.json\n{\n  \"type\": \"module\"\n}\n","json",[284,494,495,500,505,528],{"__ignoreMap":282},[287,496,497],{"class":289,"line":290},[287,498,499],{"class":401},"// package.json\n",[287,501,502],{"class":289,"line":405},[287,503,504],{"class":412},"{\n",[287,506,507,510,513,516,519,522,525],{"class":289,"line":444},[287,508,509],{"class":412},"  \"",[287,511,512],{"class":408},"type",[287,514,515],{"class":412},"\"",[287,517,518],{"class":412},":",[287,520,521],{"class":412}," \"",[287,523,524],{"class":296},"module",[287,526,527],{"class":412},"\"\n",[287,529,530],{"class":289,"line":450},[287,531,532],{"class":412},"}\n",[381,534,535],{"start":444},[364,536,537,540],{},[386,538,539],{},"If using Node.js",", ensure you're using Node.js 14+ and update your imports:",[276,542,544],{"className":392,"code":543,"language":394,"meta":282,"style":282},"// ❌ Old\nconst Tres = require('@tresjs/core')\n\n// ✅ New\nimport * as Tres from '@tresjs/core'\n",[284,545,546,551,573,577,582],{"__ignoreMap":282},[287,547,548],{"class":289,"line":290},[287,549,550],{"class":401},"// ❌ Old\n",[287,552,553,555,558,561,563,565,567,569,571],{"class":289,"line":405},[287,554,409],{"class":408},[287,556,557],{"class":416}," Tres ",[287,559,560],{"class":412},"=",[287,562,427],{"class":426},[287,564,430],{"class":416},[287,566,433],{"class":412},[287,568,436],{"class":296},[287,570,433],{"class":412},[287,572,441],{"class":416},[287,574,575],{"class":289,"line":444},[287,576,447],{"emptyLinePlaceholder":39},[287,578,579],{"class":289,"line":450},[287,580,581],{"class":401},"// ✅ New\n",[287,583,584,586,589,592,594,597,599,601],{"class":289,"line":456},[287,585,460],{"class":459},[287,587,588],{"class":412}," *",[287,590,591],{"class":459}," as",[287,593,557],{"class":416},[287,595,596],{"class":459},"from",[287,598,474],{"class":412},[287,600,436],{"class":296},[287,602,479],{"class":412},[250,604,606,608],{"id":605},"useloader-composable-refactor",[284,607,128],{}," Composable refactor",[258,610,347],{},[349,612,352],{"id":613},"what-changed-1",[258,615,616,617,619,620,623],{},"The ",[284,618,128],{}," composable has been completely refactored from a simple utility function wrapping Three.js loaders into a true Vue composable based on ",[284,621,622],{},"useAsyncData",". It now returns a reactive state with loading, error handling, and progress tracking. It previously wasn't a true composable but a utility wrapping Three.js loaders. 😬",[361,625,626,636,639,642,645],{},[364,627,628,629,635],{},"Is now based on ",[265,630,633],{"href":631,"rel":632},"https://nuxt.com/docs/4.x/api/composables/use-async-data",[269],[284,634,622],{}," for better Vue integration",[364,637,638],{},"Provides reactive state management with loading states",[364,640,641],{},"Includes progress tracking and error handling",[364,643,644],{},"Better TypeScript support and developer experience",[364,646,647],{},"Automatic cleanup and disposal of 3D objects",[349,649,379],{"id":650},"migration-steps-1",[381,652,653],{},[364,654,655,518],{},[386,656,657],{},"Update from promise-based to reactive state",[276,659,661],{"className":392,"code":660,"language":394,"meta":282,"style":282},"// ❌ Old v4 syntax - returned a promise\nconst gltf = await useLoader(GLTFLoader, '/models/duck.gltf')\n\n// ✅ New v5 syntax - returns reactive state\nconst { state: gltf, isLoading, error } = useLoader(GLTFLoader, '/models/duck.gltf')\n",[284,662,663,668,698,702,707],{"__ignoreMap":282},[287,664,665],{"class":289,"line":290},[287,666,667],{"class":401},"// ❌ Old v4 syntax - returned a promise\n",[287,669,670,672,675,677,680,683,686,689,691,694,696],{"class":289,"line":405},[287,671,409],{"class":408},[287,673,674],{"class":416}," gltf ",[287,676,560],{"class":412},[287,678,679],{"class":459}," await",[287,681,682],{"class":426}," useLoader",[287,684,685],{"class":416},"(GLTFLoader",[287,687,688],{"class":412},",",[287,690,474],{"class":412},[287,692,693],{"class":296},"/models/duck.gltf",[287,695,433],{"class":412},[287,697,441],{"class":416},[287,699,700],{"class":289,"line":444},[287,701,447],{"emptyLinePlaceholder":39},[287,703,704],{"class":289,"line":450},[287,705,706],{"class":401},"// ✅ New v5 syntax - returns reactive state\n",[287,708,709,711,713,717,719,722,724,727,729,732,734,736,738,740,742,744,746,748],{"class":289,"line":456},[287,710,409],{"class":408},[287,712,413],{"class":412},[287,714,716],{"class":715},"swJcz"," state",[287,718,518],{"class":412},[287,720,721],{"class":416}," gltf",[287,723,688],{"class":412},[287,725,726],{"class":416}," isLoading",[287,728,688],{"class":412},[287,730,731],{"class":416}," error ",[287,733,420],{"class":412},[287,735,423],{"class":412},[287,737,682],{"class":426},[287,739,685],{"class":416},[287,741,688],{"class":412},[287,743,474],{"class":412},[287,745,693],{"class":296},[287,747,433],{"class":412},[287,749,441],{"class":416},[381,751,752],{"start":405},[364,753,754,518],{},[386,755,756],{},"Handle loading states reactively",[276,758,762],{"className":759,"code":760,"language":761,"meta":282,"style":282},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\n// ✅ New v5 with reactive loading states and progress\nconst { state: model, isLoading, error, progress } = useLoader(\n  GLTFLoader,\n  '/models/duck.gltf'\n)\n\n// Watch for loading state changes\nwatch(isLoading, (loading) => {\n  if (loading) { console.log('Loading model...') }\n})\n\n// Watch for progress updates\nwatch(progress, (prog) => {\n  console.log(`Loading: ${prog.percentage}%`)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"!isLoading && model?.scene\" :object=\"model.scene\" />\n\u003C/template>\n","vue",[284,763,764,778,783,819,827,836,841,846,852,879,917,924,929,935,956,993,1000,1010,1015,1025,1082],{"__ignoreMap":282},[287,765,766,769,772,775],{"class":289,"line":290},[287,767,768],{"class":412},"\u003C",[287,770,771],{"class":715},"script",[287,773,774],{"class":408}," setup",[287,776,777],{"class":412},">\n",[287,779,780],{"class":289,"line":405},[287,781,782],{"class":401},"// ✅ New v5 with reactive loading states and progress\n",[287,784,785,787,789,791,793,796,798,800,802,805,807,810,812,814,816],{"class":289,"line":444},[287,786,409],{"class":408},[287,788,413],{"class":412},[287,790,716],{"class":715},[287,792,518],{"class":412},[287,794,795],{"class":416}," model",[287,797,688],{"class":412},[287,799,726],{"class":416},[287,801,688],{"class":412},[287,803,804],{"class":416}," error",[287,806,688],{"class":412},[287,808,809],{"class":416}," progress ",[287,811,420],{"class":412},[287,813,423],{"class":412},[287,815,682],{"class":426},[287,817,818],{"class":416},"(\n",[287,820,821,824],{"class":289,"line":450},[287,822,823],{"class":416},"  GLTFLoader",[287,825,826],{"class":412},",\n",[287,828,829,832,834],{"class":289,"line":456},[287,830,831],{"class":412},"  '",[287,833,693],{"class":296},[287,835,479],{"class":412},[287,837,839],{"class":289,"line":838},6,[287,840,441],{"class":416},[287,842,844],{"class":289,"line":843},7,[287,845,447],{"emptyLinePlaceholder":39},[287,847,849],{"class":289,"line":848},8,[287,850,851],{"class":401},"// Watch for loading state changes\n",[287,853,855,858,861,863,866,870,873,876],{"class":289,"line":854},9,[287,856,857],{"class":426},"watch",[287,859,860],{"class":416},"(isLoading",[287,862,688],{"class":412},[287,864,865],{"class":412}," (",[287,867,869],{"class":868},"sHdIc","loading",[287,871,872],{"class":412},")",[287,874,875],{"class":408}," =>",[287,877,878],{"class":412}," {\n",[287,880,882,885,887,889,892,895,898,901,904,906,908,911,913,915],{"class":289,"line":881},10,[287,883,884],{"class":459},"  if",[287,886,865],{"class":715},[287,888,869],{"class":416},[287,890,891],{"class":715},") ",[287,893,894],{"class":412},"{",[287,896,897],{"class":416}," console",[287,899,900],{"class":412},".",[287,902,903],{"class":426},"log",[287,905,430],{"class":715},[287,907,433],{"class":412},[287,909,910],{"class":296},"Loading model...",[287,912,433],{"class":412},[287,914,891],{"class":715},[287,916,532],{"class":412},[287,918,920,922],{"class":289,"line":919},11,[287,921,420],{"class":412},[287,923,441],{"class":416},[287,925,927],{"class":289,"line":926},12,[287,928,447],{"emptyLinePlaceholder":39},[287,930,932],{"class":289,"line":931},13,[287,933,934],{"class":401},"// Watch for progress updates\n",[287,936,938,940,943,945,947,950,952,954],{"class":289,"line":937},14,[287,939,857],{"class":426},[287,941,942],{"class":416},"(progress",[287,944,688],{"class":412},[287,946,865],{"class":412},[287,948,949],{"class":868},"prog",[287,951,872],{"class":412},[287,953,875],{"class":408},[287,955,878],{"class":412},[287,957,959,962,964,966,968,971,974,977,979,981,984,986,989,991],{"class":289,"line":958},15,[287,960,961],{"class":416},"  console",[287,963,900],{"class":412},[287,965,903],{"class":426},[287,967,430],{"class":715},[287,969,970],{"class":412},"`",[287,972,973],{"class":296},"Loading: ",[287,975,976],{"class":412},"${",[287,978,949],{"class":416},[287,980,900],{"class":412},[287,982,983],{"class":416},"percentage",[287,985,420],{"class":412},[287,987,988],{"class":296},"%",[287,990,970],{"class":412},[287,992,441],{"class":715},[287,994,996,998],{"class":289,"line":995},16,[287,997,420],{"class":412},[287,999,441],{"class":416},[287,1001,1003,1006,1008],{"class":289,"line":1002},17,[287,1004,1005],{"class":412},"\u003C/",[287,1007,771],{"class":715},[287,1009,777],{"class":412},[287,1011,1013],{"class":289,"line":1012},18,[287,1014,447],{"emptyLinePlaceholder":39},[287,1016,1018,1020,1023],{"class":289,"line":1017},19,[287,1019,768],{"class":412},[287,1021,1022],{"class":715},"template",[287,1024,777],{"class":412},[287,1026,1028,1031,1034,1037,1039,1041,1044,1047,1050,1053,1056,1059,1061,1064,1067,1069,1071,1073,1075,1077,1079],{"class":289,"line":1027},20,[287,1029,1030],{"class":412},"  \u003C",[287,1032,1033],{"class":715},"primitive",[287,1035,1036],{"class":459}," v-if",[287,1038,560],{"class":412},[287,1040,515],{"class":412},[287,1042,1043],{"class":412},"!",[287,1045,1046],{"class":416},"isLoading",[287,1048,1049],{"class":412}," && ",[287,1051,1052],{"class":416},"model",[287,1054,1055],{"class":412},"?.",[287,1057,1058],{"class":416},"scene",[287,1060,515],{"class":412},[287,1062,1063],{"class":412}," :",[287,1065,1066],{"class":408},"object",[287,1068,560],{"class":412},[287,1070,515],{"class":412},[287,1072,1052],{"class":416},[287,1074,900],{"class":412},[287,1076,1058],{"class":416},[287,1078,515],{"class":412},[287,1080,1081],{"class":412}," />\n",[287,1083,1085,1087,1089],{"class":289,"line":1084},21,[287,1086,1005],{"class":412},[287,1088,1022],{"class":715},[287,1090,777],{"class":412},[381,1092,1093],{"start":444},[364,1094,1095,518],{},[386,1096,1097],{},"Add loader extensions (like DRACO)",[276,1099,1101],{"className":392,"code":1100,"language":394,"meta":282,"style":282},"// ✅ New v5 syntax with extensions\nconst { state: model, isLoading, progress } = useLoader(\n  GLTFLoader,\n  '/models/compressed.glb',\n  {\n    extensions: (loader) => {\n      if (loader instanceof GLTFLoader) {\n        loader.setDRACOLoader(dracoLoader)\n      }\n    }\n  }\n)\n",[284,1102,1103,1108,1136,1142,1153,1158,1176,1195,1212,1217,1222,1227],{"__ignoreMap":282},[287,1104,1105],{"class":289,"line":290},[287,1106,1107],{"class":401},"// ✅ New v5 syntax with extensions\n",[287,1109,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134],{"class":289,"line":405},[287,1111,409],{"class":408},[287,1113,413],{"class":412},[287,1115,716],{"class":715},[287,1117,518],{"class":412},[287,1119,795],{"class":416},[287,1121,688],{"class":412},[287,1123,726],{"class":416},[287,1125,688],{"class":412},[287,1127,809],{"class":416},[287,1129,420],{"class":412},[287,1131,423],{"class":412},[287,1133,682],{"class":426},[287,1135,818],{"class":416},[287,1137,1138,1140],{"class":289,"line":444},[287,1139,823],{"class":416},[287,1141,826],{"class":412},[287,1143,1144,1146,1149,1151],{"class":289,"line":450},[287,1145,831],{"class":412},[287,1147,1148],{"class":296},"/models/compressed.glb",[287,1150,433],{"class":412},[287,1152,826],{"class":412},[287,1154,1155],{"class":289,"line":456},[287,1156,1157],{"class":412},"  {\n",[287,1159,1160,1163,1165,1167,1170,1172,1174],{"class":289,"line":838},[287,1161,1162],{"class":426},"    extensions",[287,1164,518],{"class":412},[287,1166,865],{"class":412},[287,1168,1169],{"class":868},"loader",[287,1171,872],{"class":412},[287,1173,875],{"class":408},[287,1175,878],{"class":412},[287,1177,1178,1181,1183,1185,1188,1191,1193],{"class":289,"line":843},[287,1179,1180],{"class":459},"      if",[287,1182,865],{"class":715},[287,1184,1169],{"class":416},[287,1186,1187],{"class":412}," instanceof",[287,1189,1190],{"class":293}," GLTFLoader",[287,1192,891],{"class":715},[287,1194,504],{"class":412},[287,1196,1197,1200,1202,1205,1207,1210],{"class":289,"line":848},[287,1198,1199],{"class":416},"        loader",[287,1201,900],{"class":412},[287,1203,1204],{"class":426},"setDRACOLoader",[287,1206,430],{"class":715},[287,1208,1209],{"class":416},"dracoLoader",[287,1211,441],{"class":715},[287,1213,1214],{"class":289,"line":854},[287,1215,1216],{"class":412},"      }\n",[287,1218,1219],{"class":289,"line":881},[287,1220,1221],{"class":412},"    }\n",[287,1223,1224],{"class":289,"line":919},[287,1225,1226],{"class":412},"  }\n",[287,1228,1229],{"class":289,"line":926},[287,1230,441],{"class":416},[381,1232,1233],{"start":450},[364,1234,1235,518],{},[386,1236,1237],{},"Dynamic path loading",[276,1239,1241],{"className":392,"code":1240,"language":394,"meta":282,"style":282},"// ✅ New v5 supports reactive paths\nconst modelPath = ref('/models/duck.gltf')\nconst { state: model, load } = useLoader(GLTFLoader, modelPath)\n\n// Change path reactively\nmodelPath.value = '/models/fox.gltf' // Automatically reloads\n\n// Or load programmatically\nload('/models/another-model.gltf')\n",[284,1242,1243,1248,1270,1300,1304,1309,1331,1335,1340],{"__ignoreMap":282},[287,1244,1245],{"class":289,"line":290},[287,1246,1247],{"class":401},"// ✅ New v5 supports reactive paths\n",[287,1249,1250,1252,1255,1257,1260,1262,1264,1266,1268],{"class":289,"line":405},[287,1251,409],{"class":408},[287,1253,1254],{"class":416}," modelPath ",[287,1256,560],{"class":412},[287,1258,1259],{"class":426}," ref",[287,1261,430],{"class":416},[287,1263,433],{"class":412},[287,1265,693],{"class":296},[287,1267,433],{"class":412},[287,1269,441],{"class":416},[287,1271,1272,1274,1276,1278,1280,1282,1284,1287,1289,1291,1293,1295,1297],{"class":289,"line":444},[287,1273,409],{"class":408},[287,1275,413],{"class":412},[287,1277,716],{"class":715},[287,1279,518],{"class":412},[287,1281,795],{"class":416},[287,1283,688],{"class":412},[287,1285,1286],{"class":416}," load ",[287,1288,420],{"class":412},[287,1290,423],{"class":412},[287,1292,682],{"class":426},[287,1294,685],{"class":416},[287,1296,688],{"class":412},[287,1298,1299],{"class":416}," modelPath)\n",[287,1301,1302],{"class":289,"line":450},[287,1303,447],{"emptyLinePlaceholder":39},[287,1305,1306],{"class":289,"line":456},[287,1307,1308],{"class":401},"// Change path reactively\n",[287,1310,1311,1314,1316,1319,1321,1323,1326,1328],{"class":289,"line":838},[287,1312,1313],{"class":416},"modelPath",[287,1315,900],{"class":412},[287,1317,1318],{"class":416},"value ",[287,1320,560],{"class":412},[287,1322,474],{"class":412},[287,1324,1325],{"class":296},"/models/fox.gltf",[287,1327,433],{"class":412},[287,1329,1330],{"class":401}," // Automatically reloads\n",[287,1332,1333],{"class":289,"line":843},[287,1334,447],{"emptyLinePlaceholder":39},[287,1336,1337],{"class":289,"line":848},[287,1338,1339],{"class":401},"// Or load programmatically\n",[287,1341,1342,1345,1347,1349,1352,1354],{"class":289,"line":854},[287,1343,1344],{"class":426},"load",[287,1346,430],{"class":416},[287,1348,433],{"class":412},[287,1350,1351],{"class":296},"/models/another-model.gltf",[287,1353,433],{"class":412},[287,1355,441],{"class":416},[381,1357,1358],{"start":456},[364,1359,1360,518],{},[386,1361,1362],{},"Texture loading example",[276,1364,1366],{"className":392,"code":1365,"language":394,"meta":282,"style":282},"// ✅ New v5 texture loading\nconst { state: texture, isLoading } = useLoader(\n  TextureLoader,\n  'https://example.com/texture.jpg'\n)\n",[284,1367,1368,1373,1399,1406,1415],{"__ignoreMap":282},[287,1369,1370],{"class":289,"line":290},[287,1371,1372],{"class":401},"// ✅ New v5 texture loading\n",[287,1374,1375,1377,1379,1381,1383,1386,1388,1391,1393,1395,1397],{"class":289,"line":405},[287,1376,409],{"class":408},[287,1378,413],{"class":412},[287,1380,716],{"class":715},[287,1382,518],{"class":412},[287,1384,1385],{"class":416}," texture",[287,1387,688],{"class":412},[287,1389,1390],{"class":416}," isLoading ",[287,1392,420],{"class":412},[287,1394,423],{"class":412},[287,1396,682],{"class":426},[287,1398,818],{"class":416},[287,1400,1401,1404],{"class":289,"line":444},[287,1402,1403],{"class":416},"  TextureLoader",[287,1405,826],{"class":412},[287,1407,1408,1410,1413],{"class":289,"line":450},[287,1409,831],{"class":412},[287,1411,1412],{"class":296},"https://example.com/texture.jpg",[287,1414,479],{"class":412},[287,1416,1417],{"class":289,"line":456},[287,1418,441],{"class":416},[250,1420,1422],{"id":1421},"usetexture-removal","useTexture removal",[258,1424,1425],{},"🚦 Impact Level: Moderate",[349,1427,352],{"id":1428},"what-changed-2",[258,1430,616,1431,1434,1435,900],{},[284,1432,1433],{},"useTexture"," composable has been completely removed from the core package and moved to ",[284,1436,1437],{},"@tresjs/cientos",[349,1439,359],{"id":1440},"why-we-changed-it-1",[361,1442,1443,1446,1449],{},[364,1444,1445],{},"Better separation of concerns",[364,1447,1448],{},"Reduced core bundle size",[364,1450,1451],{},"More specialized texture handling in cientos package",[349,1453,379],{"id":1454},"migration-steps-2",[381,1456,1457],{},[364,1458,1459,518],{},[386,1460,1461],{},"Install @tresjs/cientos",[276,1463,1465],{"className":278,"code":1464,"language":281,"meta":282,"style":282},"pnpm add @tresjs/cientos\n",[284,1466,1467],{"__ignoreMap":282},[287,1468,1469,1471,1473],{"class":289,"line":290},[287,1470,280],{"class":293},[287,1472,297],{"class":296},[287,1474,1475],{"class":296}," @tresjs/cientos\n",[381,1477,1478],{"start":405},[364,1479,1480,518],{},[386,1481,1482],{},"Update your imports",[276,1484,1486],{"className":392,"code":1485,"language":394,"meta":282,"style":282},"// ❌ Old v4 import\nimport { useTexture } from '@tresjs/core'\n\n// ✅ New v5 import\nimport { useTexture } from '@tresjs/cientos'\n",[284,1487,1488,1493,1512,1516,1521],{"__ignoreMap":282},[287,1489,1490],{"class":289,"line":290},[287,1491,1492],{"class":401},"// ❌ Old v4 import\n",[287,1494,1495,1497,1499,1502,1504,1506,1508,1510],{"class":289,"line":405},[287,1496,460],{"class":459},[287,1498,413],{"class":412},[287,1500,1501],{"class":416}," useTexture",[287,1503,468],{"class":412},[287,1505,471],{"class":459},[287,1507,474],{"class":412},[287,1509,436],{"class":296},[287,1511,479],{"class":412},[287,1513,1514],{"class":289,"line":444},[287,1515,447],{"emptyLinePlaceholder":39},[287,1517,1518],{"class":289,"line":450},[287,1519,1520],{"class":401},"// ✅ New v5 import\n",[287,1522,1523,1525,1527,1529,1531,1533,1535,1537],{"class":289,"line":456},[287,1524,460],{"class":459},[287,1526,413],{"class":412},[287,1528,1501],{"class":416},[287,1530,468],{"class":412},[287,1532,471],{"class":459},[287,1534,474],{"class":412},[287,1536,1437],{"class":296},[287,1538,479],{"class":412},[381,1540,1541],{"start":444},[364,1542,1543,518],{},[386,1544,1545],{},"Usage updated",[276,1547,1549],{"className":392,"code":1548,"language":394,"meta":282,"style":282},"// ✅ Composable now returns reactive state with loading state\nconst { state: texture, isLoading } = useTexture('/textures/brick.jpg')\n",[284,1550,1551,1556],{"__ignoreMap":282},[287,1552,1553],{"class":289,"line":290},[287,1554,1555],{"class":401},"// ✅ Composable now returns reactive state with loading state\n",[287,1557,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1585,1587],{"class":289,"line":405},[287,1559,409],{"class":408},[287,1561,413],{"class":412},[287,1563,716],{"class":715},[287,1565,518],{"class":412},[287,1567,1385],{"class":416},[287,1569,688],{"class":412},[287,1571,1390],{"class":416},[287,1573,420],{"class":412},[287,1575,423],{"class":412},[287,1577,1501],{"class":426},[287,1579,430],{"class":416},[287,1581,433],{"class":412},[287,1583,1584],{"class":296},"/textures/brick.jpg",[287,1586,433],{"class":412},[287,1588,441],{"class":416},[250,1590,1592],{"id":1591},"event-system-changes","Event System Changes",[258,1594,1425],{},[349,1596,352],{"id":1597},"what-changed-3",[361,1599,1600,1611,1614,1620],{},[364,1601,1602,1603,1610],{},"New event system based on the ",[265,1604,1607],{"href":1605,"rel":1606},"https://github.com/pmndrs/pointer-events",[269],[284,1608,1609],{},"@pmndrs/pointer-events"," package.",[364,1612,1613],{},"Only the first intersected element will trigger pointer events.",[364,1615,1616,1619],{},[284,1617,1618],{},"useTresEventManager"," composable has been removed.",[364,1621,1622,1623,1628],{},"Pointer events now follow native DOM event names exactly as they are defined, '@pointer-down' --> '@pointerdown'. See ",[265,1624,1627],{"href":1625,"rel":1626},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#event_types_and_global_event_handlers",[269],"MDN Web docs"," for more details.",[349,1630,359],{"id":1631},"why-we-changed-it-2",[361,1633,1634,1637,1640,1643,1646,1649],{},[364,1635,1636],{},"Better performance with complex scenes",[364,1638,1639],{},"More predictable event handling",[364,1641,1642],{},"Consistent with web standards and pmndrs ecosystem",[364,1644,1645],{},"Prevents event bubbling issues",[364,1647,1648],{},"Leverages battle-tested pointer event handling from the pmndrs community",[364,1650,1651],{},"Keeps the API consistent with the web standard.",[349,1653,379],{"id":1654},"migration-steps-3",[381,1656,1657],{},[364,1658,1659,518],{},[386,1660,1661],{},"Update event handling expectations",[276,1663,1665],{"className":392,"code":1664,"language":394,"meta":282,"style":282},"// ❌ Old behavior: multiple overlapping objects could trigger events\n\u003CTresMesh @click=\"handleClick\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshBasicMaterial />\n\u003C/TresMesh>\n\u003CTresMesh @click=\"handleClick\"> \u003C!-- This might not trigger if behind first mesh -->\n  \u003CTresBoxGeometry />\n  \u003CTresMeshBasicMaterial />\n\u003C/TresMesh>\n\n// ✅ New behavior: only first intersected object triggers event\n// If you need multiple objects to handle events, ensure they don't overlap\n// or handle the event at a parent level\n",[284,1666,1667,1672,1682,1687,1696,1704,1740,1744,1752,1760,1764,1769,1774],{"__ignoreMap":282},[287,1668,1669],{"class":289,"line":290},[287,1670,1671],{"class":401},"// ❌ Old behavior: multiple overlapping objects could trigger events\n",[287,1673,1674,1676,1679],{"class":289,"line":405},[287,1675,768],{"class":412},[287,1677,1678],{"class":293},"TresMesh",[287,1680,1681],{"class":412}," @click=\"handleClick\">\n",[287,1683,1684],{"class":289,"line":444},[287,1685,1686],{"class":412},"  \u003CTresBoxGeometry />\n",[287,1688,1689,1691,1694],{"class":289,"line":450},[287,1690,1030],{"class":412},[287,1692,1693],{"class":293},"TresMeshBasicMaterial",[287,1695,1081],{"class":412},[287,1697,1698,1700,1702],{"class":289,"line":456},[287,1699,1005],{"class":412},[287,1701,1678],{"class":416},[287,1703,777],{"class":412},[287,1705,1706,1708,1710,1713,1716,1719,1722,1725,1728,1731,1734,1737],{"class":289,"line":838},[287,1707,768],{"class":412},[287,1709,1678],{"class":293},[287,1711,1712],{"class":412}," @click=\"handleClick\"> \u003C!-- ",[287,1714,1715],{"class":408},"This",[287,1717,1718],{"class":408}," might",[287,1720,1721],{"class":408}," not",[287,1723,1724],{"class":408}," trigger",[287,1726,1727],{"class":408}," if",[287,1729,1730],{"class":408}," behind",[287,1732,1733],{"class":408}," first",[287,1735,1736],{"class":408}," mesh",[287,1738,1739],{"class":412}," -->\n",[287,1741,1742],{"class":289,"line":843},[287,1743,1686],{"class":412},[287,1745,1746,1748,1750],{"class":289,"line":848},[287,1747,1030],{"class":412},[287,1749,1693],{"class":293},[287,1751,1081],{"class":412},[287,1753,1754,1756,1758],{"class":289,"line":854},[287,1755,1005],{"class":412},[287,1757,1678],{"class":416},[287,1759,777],{"class":412},[287,1761,1762],{"class":289,"line":881},[287,1763,447],{"emptyLinePlaceholder":39},[287,1765,1766],{"class":289,"line":919},[287,1767,1768],{"class":401},"// ✅ New behavior: only first intersected object triggers event\n",[287,1770,1771],{"class":289,"line":926},[287,1772,1773],{"class":401},"// If you need multiple objects to handle events, ensure they don't overlap\n",[287,1775,1776],{"class":289,"line":931},[287,1777,1778],{"class":401},"// or handle the event at a parent level\n",[381,1780,1781],{"start":405},[364,1782,1783,518],{},[386,1784,1785],{},"Restructure overlapping interactive elements",[276,1787,1789],{"className":392,"code":1788,"language":394,"meta":282,"style":282},"// ✅ Use a single parent handler for overlapping elements\n\u003CTresGroup @click=\"handleGroupClick\">\n  \u003CTresMesh>\n    \u003CTresBoxGeometry />\n    \u003CTresMeshBasicMaterial />\n  \u003C/TresMesh>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry />\n    \u003CTresMeshBasicMaterial />\n  \u003C/TresMesh>\n\u003C/TresGroup>\n",[284,1790,1791,1796,1806,1811,1816,1825,1834,1842,1851,1859,1867],{"__ignoreMap":282},[287,1792,1793],{"class":289,"line":290},[287,1794,1795],{"class":401},"// ✅ Use a single parent handler for overlapping elements\n",[287,1797,1798,1800,1803],{"class":289,"line":405},[287,1799,768],{"class":412},[287,1801,1802],{"class":293},"TresGroup",[287,1804,1805],{"class":412}," @click=\"handleGroupClick\">\n",[287,1807,1808],{"class":289,"line":444},[287,1809,1810],{"class":412},"  \u003CTresMesh>\n",[287,1812,1813],{"class":289,"line":450},[287,1814,1815],{"class":412},"    \u003CTresBoxGeometry />\n",[287,1817,1818,1821,1823],{"class":289,"line":456},[287,1819,1820],{"class":412},"    \u003C",[287,1822,1693],{"class":293},[287,1824,1081],{"class":412},[287,1826,1827,1830,1832],{"class":289,"line":838},[287,1828,1829],{"class":412},"  \u003C/",[287,1831,1678],{"class":416},[287,1833,777],{"class":412},[287,1835,1836,1838,1840],{"class":289,"line":843},[287,1837,1030],{"class":412},[287,1839,1678],{"class":293},[287,1841,777],{"class":412},[287,1843,1844,1846,1849],{"class":289,"line":848},[287,1845,1820],{"class":412},[287,1847,1848],{"class":293},"TresBoxGeometry",[287,1850,1081],{"class":412},[287,1852,1853,1855,1857],{"class":289,"line":854},[287,1854,1820],{"class":412},[287,1856,1693],{"class":293},[287,1858,1081],{"class":412},[287,1860,1861,1863,1865],{"class":289,"line":881},[287,1862,1829],{"class":412},[287,1864,1678],{"class":293},[287,1866,777],{"class":412},[287,1868,1869,1871,1873],{"class":289,"line":919},[287,1870,1005],{"class":412},[287,1872,1802],{"class":416},[287,1874,777],{"class":412},[381,1876,1877],{"start":444},[364,1878,1879,518],{},[386,1880,1881],{},"Replace dash-case pointer events",[276,1883,1885],{"className":392,"code":1884,"language":394,"meta":282,"style":282},"// ❌ Old behavior: dash-case events\n\u003CTresMesh @pointer-down=\"handlePointerDown\">\n\n// ✅ New behavior: native DOM event names\n\u003CTresMesh @pointerdown=\"handlePointerDown\">\n",[284,1886,1887,1892,1901,1905,1910],{"__ignoreMap":282},[287,1888,1889],{"class":289,"line":290},[287,1890,1891],{"class":401},"// ❌ Old behavior: dash-case events\n",[287,1893,1894,1896,1898],{"class":289,"line":405},[287,1895,768],{"class":412},[287,1897,1678],{"class":293},[287,1899,1900],{"class":412}," @pointer-down=\"handlePointerDown\">\n",[287,1902,1903],{"class":289,"line":444},[287,1904,447],{"emptyLinePlaceholder":39},[287,1906,1907],{"class":289,"line":450},[287,1908,1909],{"class":401},"// ✅ New behavior: native DOM event names\n",[287,1911,1912],{"class":289,"line":456},[287,1913,1914],{"class":412},"\u003CTresMesh @pointerdown=\"handlePointerDown\">\n",[250,1916,1918],{"id":1917},"camera-context-changes","Camera Context Changes",[258,1920,1921],{},"🚦 Impact Level: Low",[349,1923,352],{"id":1924},"what-changed-4",[258,1926,1927],{},"Camera context is now a state object instead of the active camera instance.",[349,1929,359],{"id":1930},"why-we-changed-it-3",[361,1932,1933,1936,1939],{},[364,1934,1935],{},"Better camera management",[364,1937,1938],{},"Support for multiple cameras",[364,1940,1941],{},"Improved camera switching",[349,1943,379],{"id":1944},"migration-steps-4",[258,1946,1947,1950,1951,1953,1954,518],{},[386,1948,1949],{},"Easy Migration Path:","\nFor most use cases it is probably sufficient to change ",[284,1952,116],{}," to ",[284,1955,112],{},[276,1957,1959],{"className":392,"code":1958,"language":394,"meta":282,"style":282},"// ❌ Old v4 syntax\nconst { camera } = useTresContext()\n\n// ✅ Easy v5 migration\nconst { camera } = useTres()\n// camera works the same as before\n",[284,1960,1961,1966,1985,1989,1994,2011],{"__ignoreMap":282},[287,1962,1963],{"class":289,"line":290},[287,1964,1965],{"class":401},"// ❌ Old v4 syntax\n",[287,1967,1968,1970,1972,1975,1977,1979,1982],{"class":289,"line":405},[287,1969,409],{"class":408},[287,1971,413],{"class":412},[287,1973,1974],{"class":416}," camera ",[287,1976,420],{"class":412},[287,1978,423],{"class":412},[287,1980,1981],{"class":426}," useTresContext",[287,1983,1984],{"class":416},"()\n",[287,1986,1987],{"class":289,"line":444},[287,1988,447],{"emptyLinePlaceholder":39},[287,1990,1991],{"class":289,"line":450},[287,1992,1993],{"class":401},"// ✅ Easy v5 migration\n",[287,1995,1996,1998,2000,2002,2004,2006,2009],{"class":289,"line":456},[287,1997,409],{"class":408},[287,1999,413],{"class":412},[287,2001,1974],{"class":416},[287,2003,420],{"class":412},[287,2005,423],{"class":412},[287,2007,2008],{"class":426}," useTres",[287,2010,1984],{"class":416},[287,2012,2013],{"class":289,"line":838},[287,2014,2015],{"class":401},"// camera works the same as before\n",[258,2017,2018,2021,2022,518],{},[386,2019,2020],{},"Advanced Usage:","\nIf you need the full context (mainly for module authors), use ",[284,2023,116],{},[276,2025,2027],{"className":392,"code":2026,"language":394,"meta":282,"style":282},"// ✅ For module authors - full context access\nconst { camera } = useTresContext()\n// camera is now an object with camera management methods\nconst activeCamera = camera.value.current\n",[284,2028,2029,2034,2050,2055],{"__ignoreMap":282},[287,2030,2031],{"class":289,"line":290},[287,2032,2033],{"class":401},"// ✅ For module authors - full context access\n",[287,2035,2036,2038,2040,2042,2044,2046,2048],{"class":289,"line":405},[287,2037,409],{"class":408},[287,2039,413],{"class":412},[287,2041,1974],{"class":416},[287,2043,420],{"class":412},[287,2045,423],{"class":412},[287,2047,1981],{"class":426},[287,2049,1984],{"class":416},[287,2051,2052],{"class":289,"line":444},[287,2053,2054],{"class":401},"// camera is now an object with camera management methods\n",[287,2056,2057,2059,2062,2064,2067,2069,2072,2074],{"class":289,"line":450},[287,2058,409],{"class":408},[287,2060,2061],{"class":416}," activeCamera ",[287,2063,560],{"class":412},[287,2065,2066],{"class":416}," camera",[287,2068,900],{"class":412},[287,2070,2071],{"class":416},"value",[287,2073,900],{"class":412},[287,2075,2076],{"class":416},"current\n",[2078,2079,2080],"read-more",{},[258,2081,2082,2083,900],{},"Learn more about the context system in our ",[265,2084,2085],{"href":117},"internal documentation",[250,2087,2089],{"id":2088},"renderer-and-context-changes","Renderer and Context Changes",[258,2091,1425],{},[349,2093,352],{"id":2094},"what-changed-5",[361,2096,2097,2100,2103],{},[364,2098,2099],{},"Performance state removed from context",[364,2101,2102],{},"Renderer instance is now readonly",[364,2104,2105,2108,2109,2108,2112,2115],{},[284,2106,2107],{},"invalidate",", ",[284,2110,2111],{},"advance",[284,2113,2114],{},"canBeInvalidated"," and renderer instance now accessed through context",[349,2117,359],{"id":2118},"why-we-changed-it-4",[361,2120,2121,2124,2127],{},[364,2122,2123],{},"Better encapsulation",[364,2125,2126],{},"Improved performance monitoring",[364,2128,2129],{},"More consistent API",[349,2131,379],{"id":2132},"migration-steps-5",[258,2134,2135,1950,2137,1953,2139,518],{},[386,2136,1949],{},[284,2138,116],{},[284,2140,112],{},[276,2142,2144],{"className":392,"code":2143,"language":394,"meta":282,"style":282},"// ❌ Old v4 syntax\nconst { renderer, invalidate, advance } = useTresContext()\n\n// ✅ Easy v5 migration\nconst { renderer, invalidate, advance } = useTres()\n// Works the same as before for common use cases\n",[284,2145,2146,2150,2177,2181,2185,2209],{"__ignoreMap":282},[287,2147,2148],{"class":289,"line":290},[287,2149,1965],{"class":401},[287,2151,2152,2154,2156,2159,2161,2164,2166,2169,2171,2173,2175],{"class":289,"line":405},[287,2153,409],{"class":408},[287,2155,413],{"class":412},[287,2157,2158],{"class":416}," renderer",[287,2160,688],{"class":412},[287,2162,2163],{"class":416}," invalidate",[287,2165,688],{"class":412},[287,2167,2168],{"class":416}," advance ",[287,2170,420],{"class":412},[287,2172,423],{"class":412},[287,2174,1981],{"class":426},[287,2176,1984],{"class":416},[287,2178,2179],{"class":289,"line":444},[287,2180,447],{"emptyLinePlaceholder":39},[287,2182,2183],{"class":289,"line":450},[287,2184,1993],{"class":401},[287,2186,2187,2189,2191,2193,2195,2197,2199,2201,2203,2205,2207],{"class":289,"line":456},[287,2188,409],{"class":408},[287,2190,413],{"class":412},[287,2192,2158],{"class":416},[287,2194,688],{"class":412},[287,2196,2163],{"class":416},[287,2198,688],{"class":412},[287,2200,2168],{"class":416},[287,2202,420],{"class":412},[287,2204,423],{"class":412},[287,2206,2008],{"class":426},[287,2208,1984],{"class":416},[287,2210,2211],{"class":289,"line":838},[287,2212,2213],{"class":401},"// Works the same as before for common use cases\n",[258,2215,2216,2021,2218,518],{},[386,2217,2020],{},[284,2219,116],{},[276,2221,2223],{"className":392,"code":2222,"language":394,"meta":282,"style":282},"// ✅ For module authors - full context access\nconst { invalidate, advance, canBeInvalidated, renderer } = useTresContext()\n// renderer is now readonly\n// Use context methods for renderer operations\n",[284,2224,2225,2229,2260,2265],{"__ignoreMap":282},[287,2226,2227],{"class":289,"line":290},[287,2228,2033],{"class":401},[287,2230,2231,2233,2235,2237,2239,2242,2244,2247,2249,2252,2254,2256,2258],{"class":289,"line":405},[287,2232,409],{"class":408},[287,2234,413],{"class":412},[287,2236,2163],{"class":416},[287,2238,688],{"class":412},[287,2240,2241],{"class":416}," advance",[287,2243,688],{"class":412},[287,2245,2246],{"class":416}," canBeInvalidated",[287,2248,688],{"class":412},[287,2250,2251],{"class":416}," renderer ",[287,2253,420],{"class":412},[287,2255,423],{"class":412},[287,2257,1981],{"class":426},[287,2259,1984],{"class":416},[287,2261,2262],{"class":289,"line":444},[287,2263,2264],{"class":401},"// renderer is now readonly\n",[287,2266,2267],{"class":289,"line":450},[287,2268,2269],{"class":401},"// Use context methods for renderer operations\n",[258,2271,2272,518],{},[386,2273,2274],{},"Performance monitoring changes",[276,2276,2278],{"className":392,"code":2277,"language":394,"meta":282,"style":282},"// ❌ Old v4 performance access\nconst { performance } = useTresContext()\n\n// ✅ New v5 - use renderer stats or custom performance monitoring\nconst { renderer } = useTres()\nconst stats = renderer.info\n",[284,2279,2280,2285,2302,2306,2311,2327],{"__ignoreMap":282},[287,2281,2282],{"class":289,"line":290},[287,2283,2284],{"class":401},"// ❌ Old v4 performance access\n",[287,2286,2287,2289,2291,2294,2296,2298,2300],{"class":289,"line":405},[287,2288,409],{"class":408},[287,2290,413],{"class":412},[287,2292,2293],{"class":416}," performance ",[287,2295,420],{"class":412},[287,2297,423],{"class":412},[287,2299,1981],{"class":426},[287,2301,1984],{"class":416},[287,2303,2304],{"class":289,"line":444},[287,2305,447],{"emptyLinePlaceholder":39},[287,2307,2308],{"class":289,"line":450},[287,2309,2310],{"class":401},"// ✅ New v5 - use renderer stats or custom performance monitoring\n",[287,2312,2313,2315,2317,2319,2321,2323,2325],{"class":289,"line":456},[287,2314,409],{"class":408},[287,2316,413],{"class":412},[287,2318,2251],{"class":416},[287,2320,420],{"class":412},[287,2322,423],{"class":412},[287,2324,2008],{"class":426},[287,2326,1984],{"class":416},[287,2328,2329,2331,2334,2336,2338,2340],{"class":289,"line":838},[287,2330,409],{"class":408},[287,2332,2333],{"class":416}," stats ",[287,2335,560],{"class":412},[287,2337,2158],{"class":416},[287,2339,900],{"class":412},[287,2341,2342],{"class":416},"info\n",[2078,2344,2345],{},[258,2346,2082,2347,900],{},[265,2348,2085],{"href":117},[250,2350,2352],{"id":2351},"deprecated-composables-removal","Deprecated Composables Removal",[258,2354,1425],{},[349,2356,2358],{"id":2357},"what-has-been-removed","What has been removed",[361,2360,2361,2366,2371,2375,2380,2385,2390],{},[364,2362,2363],{},[284,2364,2365],{},"useTresReady",[364,2367,2368],{},[284,2369,2370],{},"useSeek",[364,2372,2373],{},[284,2374,1618],{},[364,2376,2377],{},[284,2378,2379],{},"useRaycaster",[364,2381,2382],{},[284,2383,2384],{},"useRenderLoop",[364,2386,2387],{},[284,2388,2389],{},"useLogger",[364,2391,2392],{},[284,2393,2394],{},"useCamera",[349,2396,359],{"id":2397},"why-we-changed-it-5",[361,2399,2400,2403,2406],{},[364,2401,2402],{},"Simplified API surface",[364,2404,2405],{},"Better state management patterns",[364,2407,2408],{},"Replaced with more robust alternatives",[349,2410,379],{"id":2411},"migration-steps-6",[381,2413,2414],{},[364,2415,2416,518],{},[386,2417,2418],{},"Replace useTresReady",[276,2420,2422],{"className":392,"code":2421,"language":394,"meta":282,"style":282},"// ❌ Old v4 syntax\nconst { isReady } = useTresReady()\n",[284,2423,2424,2428],{"__ignoreMap":282},[287,2425,2426],{"class":289,"line":290},[287,2427,1965],{"class":401},[287,2429,2430,2432,2434,2437,2439,2441,2444],{"class":289,"line":405},[287,2431,409],{"class":408},[287,2433,413],{"class":412},[287,2435,2436],{"class":416}," isReady ",[287,2438,420],{"class":412},[287,2440,423],{"class":412},[287,2442,2443],{"class":426}," useTresReady",[287,2445,1984],{"class":416},[276,2447,2449],{"className":759,"code":2448,"language":761,"meta":282,"style":282},"\u003Cscript setup>\n// ✅ New v5 alternative - use @ready event on TresCanvas\n// Option 1: Template event (recommended for most users)\n\nconst onReady = (context) => {\n  console.log('Renderer is ready:', context.renderer.instance)\n  // Your ready logic here\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas @ready=\"onReady\">\n    \u003C!-- Your 3D scene -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[284,2450,2451,2461,2466,2471,2475,2495,2529,2534,2538,2546,2550,2558,2582,2587,2595],{"__ignoreMap":282},[287,2452,2453,2455,2457,2459],{"class":289,"line":290},[287,2454,768],{"class":412},[287,2456,771],{"class":715},[287,2458,774],{"class":408},[287,2460,777],{"class":412},[287,2462,2463],{"class":289,"line":405},[287,2464,2465],{"class":401},"// ✅ New v5 alternative - use @ready event on TresCanvas\n",[287,2467,2468],{"class":289,"line":444},[287,2469,2470],{"class":401},"// Option 1: Template event (recommended for most users)\n",[287,2472,2473],{"class":289,"line":450},[287,2474,447],{"emptyLinePlaceholder":39},[287,2476,2477,2479,2482,2484,2486,2489,2491,2493],{"class":289,"line":456},[287,2478,409],{"class":408},[287,2480,2481],{"class":416}," onReady ",[287,2483,560],{"class":412},[287,2485,865],{"class":412},[287,2487,2488],{"class":868},"context",[287,2490,872],{"class":412},[287,2492,875],{"class":408},[287,2494,878],{"class":412},[287,2496,2497,2499,2501,2503,2505,2507,2510,2512,2514,2517,2519,2522,2524,2527],{"class":289,"line":838},[287,2498,961],{"class":416},[287,2500,900],{"class":412},[287,2502,903],{"class":426},[287,2504,430],{"class":715},[287,2506,433],{"class":412},[287,2508,2509],{"class":296},"Renderer is ready:",[287,2511,433],{"class":412},[287,2513,688],{"class":412},[287,2515,2516],{"class":416}," context",[287,2518,900],{"class":412},[287,2520,2521],{"class":416},"renderer",[287,2523,900],{"class":412},[287,2525,2526],{"class":416},"instance",[287,2528,441],{"class":715},[287,2530,2531],{"class":289,"line":843},[287,2532,2533],{"class":401},"  // Your ready logic here\n",[287,2535,2536],{"class":289,"line":848},[287,2537,532],{"class":412},[287,2539,2540,2542,2544],{"class":289,"line":854},[287,2541,1005],{"class":412},[287,2543,771],{"class":715},[287,2545,777],{"class":412},[287,2547,2548],{"class":289,"line":881},[287,2549,447],{"emptyLinePlaceholder":39},[287,2551,2552,2554,2556],{"class":289,"line":919},[287,2553,768],{"class":412},[287,2555,1022],{"class":715},[287,2557,777],{"class":412},[287,2559,2560,2562,2565,2568,2571,2573,2575,2578,2580],{"class":289,"line":926},[287,2561,1030],{"class":412},[287,2563,2564],{"class":715},"TresCanvas",[287,2566,2567],{"class":412}," @",[287,2569,2570],{"class":408},"ready",[287,2572,560],{"class":412},[287,2574,515],{"class":412},[287,2576,2577],{"class":416},"onReady",[287,2579,515],{"class":412},[287,2581,777],{"class":412},[287,2583,2584],{"class":289,"line":931},[287,2585,2586],{"class":401},"    \u003C!-- Your 3D scene -->\n",[287,2588,2589,2591,2593],{"class":289,"line":937},[287,2590,1829],{"class":412},[287,2592,2564],{"class":715},[287,2594,777],{"class":412},[287,2596,2597,2599,2601],{"class":289,"line":958},[287,2598,1005],{"class":412},[287,2600,1022],{"class":715},[287,2602,777],{"class":412},[276,2604,2606],{"className":392,"code":2605,"language":394,"meta":282,"style":282},"// Option 2: Composable approach (advanced users)\nconst { renderer } = useTresContext()\n\nrenderer.onReady((rendererInstance) => {\n  console.log('Renderer ready:', rendererInstance)\n  // Your ready logic here\n})\n",[284,2607,2608,2613,2629,2633,2654,2678,2682],{"__ignoreMap":282},[287,2609,2610],{"class":289,"line":290},[287,2611,2612],{"class":401},"// Option 2: Composable approach (advanced users)\n",[287,2614,2615,2617,2619,2621,2623,2625,2627],{"class":289,"line":405},[287,2616,409],{"class":408},[287,2618,413],{"class":412},[287,2620,2251],{"class":416},[287,2622,420],{"class":412},[287,2624,423],{"class":412},[287,2626,1981],{"class":426},[287,2628,1984],{"class":416},[287,2630,2631],{"class":289,"line":444},[287,2632,447],{"emptyLinePlaceholder":39},[287,2634,2635,2637,2639,2641,2643,2645,2648,2650,2652],{"class":289,"line":450},[287,2636,2521],{"class":416},[287,2638,900],{"class":412},[287,2640,2577],{"class":426},[287,2642,430],{"class":416},[287,2644,430],{"class":412},[287,2646,2647],{"class":868},"rendererInstance",[287,2649,872],{"class":412},[287,2651,875],{"class":408},[287,2653,878],{"class":412},[287,2655,2656,2658,2660,2662,2664,2666,2669,2671,2673,2676],{"class":289,"line":456},[287,2657,961],{"class":416},[287,2659,900],{"class":412},[287,2661,903],{"class":426},[287,2663,430],{"class":715},[287,2665,433],{"class":412},[287,2667,2668],{"class":296},"Renderer ready:",[287,2670,433],{"class":412},[287,2672,688],{"class":412},[287,2674,2675],{"class":416}," rendererInstance",[287,2677,441],{"class":715},[287,2679,2680],{"class":289,"line":838},[287,2681,2533],{"class":401},[287,2683,2684,2686],{"class":289,"line":843},[287,2685,420],{"class":412},[287,2687,441],{"class":416},[381,2689,2690],{"start":405},[364,2691,2692,2695],{},[386,2693,2694],{},"Replace useSeek"," (if you were using it):",[276,2697,2699],{"className":392,"code":2698,"language":394,"meta":282,"style":282},"// ❌ Old v4 syntax\nconst { seek, seekByName, seekAll, seekAllByName } = useSeek()\nconst body = seek(car, 'name', 'Octane_Octane_Body_0')\nconst bones = seekAll(character, 'type', 'Bone')\n\n// ✅ New v5 alternative - use useGraph or manual traversal\nimport { useGraph } from '@tresjs/core'\n\n// Option 1: Use useGraph for structured access\nconst { state: model } = useLoader(GLTFLoader, '/path/to/model.glb')\nconst scene = computed(() => model.value?.scene)\nconst { nodes, materials } = useGraph(scene)\n\n// Access objects by name directly\nconst body = computed(() => nodes.value?.Octane_Octane_Body_0)\n\n// Option 2: Manual traversal function\nfunction seek(object, property, value) {\n  if (!object) return null\n\n  if (object[property] === value) return object\n\n  for (const child of object.children) {\n    const found = seek(child, property, value)\n    if (found) return found\n  }\n\n  return null\n}\n\n// Usage\nconst body = seek(car.value, 'name', 'Octane_Octane_Body_0')\n",[284,2700,2701,2705,2738,2772,2805,2809,2814,2833,2837,2842,2874,2904,2927,2931,2936,2963,2967,2972,2997,3015,3019,3048,3053,3081,3109,3127,3132,3137,3145,3150,3155,3161],{"__ignoreMap":282},[287,2702,2703],{"class":289,"line":290},[287,2704,1965],{"class":401},[287,2706,2707,2709,2711,2714,2716,2719,2721,2724,2726,2729,2731,2733,2736],{"class":289,"line":405},[287,2708,409],{"class":408},[287,2710,413],{"class":412},[287,2712,2713],{"class":416}," seek",[287,2715,688],{"class":412},[287,2717,2718],{"class":416}," seekByName",[287,2720,688],{"class":412},[287,2722,2723],{"class":416}," seekAll",[287,2725,688],{"class":412},[287,2727,2728],{"class":416}," seekAllByName ",[287,2730,420],{"class":412},[287,2732,423],{"class":412},[287,2734,2735],{"class":426}," useSeek",[287,2737,1984],{"class":416},[287,2739,2740,2742,2745,2747,2749,2752,2754,2756,2759,2761,2763,2765,2768,2770],{"class":289,"line":444},[287,2741,409],{"class":408},[287,2743,2744],{"class":416}," body ",[287,2746,560],{"class":412},[287,2748,2713],{"class":426},[287,2750,2751],{"class":416},"(car",[287,2753,688],{"class":412},[287,2755,474],{"class":412},[287,2757,2758],{"class":296},"name",[287,2760,433],{"class":412},[287,2762,688],{"class":412},[287,2764,474],{"class":412},[287,2766,2767],{"class":296},"Octane_Octane_Body_0",[287,2769,433],{"class":412},[287,2771,441],{"class":416},[287,2773,2774,2776,2779,2781,2783,2786,2788,2790,2792,2794,2796,2798,2801,2803],{"class":289,"line":450},[287,2775,409],{"class":408},[287,2777,2778],{"class":416}," bones ",[287,2780,560],{"class":412},[287,2782,2723],{"class":426},[287,2784,2785],{"class":416},"(character",[287,2787,688],{"class":412},[287,2789,474],{"class":412},[287,2791,512],{"class":296},[287,2793,433],{"class":412},[287,2795,688],{"class":412},[287,2797,474],{"class":412},[287,2799,2800],{"class":296},"Bone",[287,2802,433],{"class":412},[287,2804,441],{"class":416},[287,2806,2807],{"class":289,"line":456},[287,2808,447],{"emptyLinePlaceholder":39},[287,2810,2811],{"class":289,"line":838},[287,2812,2813],{"class":401},"// ✅ New v5 alternative - use useGraph or manual traversal\n",[287,2815,2816,2818,2820,2823,2825,2827,2829,2831],{"class":289,"line":843},[287,2817,460],{"class":459},[287,2819,413],{"class":412},[287,2821,2822],{"class":416}," useGraph",[287,2824,468],{"class":412},[287,2826,471],{"class":459},[287,2828,474],{"class":412},[287,2830,436],{"class":296},[287,2832,479],{"class":412},[287,2834,2835],{"class":289,"line":848},[287,2836,447],{"emptyLinePlaceholder":39},[287,2838,2839],{"class":289,"line":854},[287,2840,2841],{"class":401},"// Option 1: Use useGraph for structured access\n",[287,2843,2844,2846,2848,2850,2852,2855,2857,2859,2861,2863,2865,2867,2870,2872],{"class":289,"line":881},[287,2845,409],{"class":408},[287,2847,413],{"class":412},[287,2849,716],{"class":715},[287,2851,518],{"class":412},[287,2853,2854],{"class":416}," model ",[287,2856,420],{"class":412},[287,2858,423],{"class":412},[287,2860,682],{"class":426},[287,2862,685],{"class":416},[287,2864,688],{"class":412},[287,2866,474],{"class":412},[287,2868,2869],{"class":296},"/path/to/model.glb",[287,2871,433],{"class":412},[287,2873,441],{"class":416},[287,2875,2876,2878,2881,2883,2886,2888,2891,2893,2895,2897,2899,2901],{"class":289,"line":919},[287,2877,409],{"class":408},[287,2879,2880],{"class":416}," scene ",[287,2882,560],{"class":412},[287,2884,2885],{"class":426}," computed",[287,2887,430],{"class":416},[287,2889,2890],{"class":412},"()",[287,2892,875],{"class":408},[287,2894,795],{"class":416},[287,2896,900],{"class":412},[287,2898,2071],{"class":416},[287,2900,1055],{"class":412},[287,2902,2903],{"class":416},"scene)\n",[287,2905,2906,2908,2910,2913,2915,2918,2920,2922,2924],{"class":289,"line":926},[287,2907,409],{"class":408},[287,2909,413],{"class":412},[287,2911,2912],{"class":416}," nodes",[287,2914,688],{"class":412},[287,2916,2917],{"class":416}," materials ",[287,2919,420],{"class":412},[287,2921,423],{"class":412},[287,2923,2822],{"class":426},[287,2925,2926],{"class":416},"(scene)\n",[287,2928,2929],{"class":289,"line":931},[287,2930,447],{"emptyLinePlaceholder":39},[287,2932,2933],{"class":289,"line":937},[287,2934,2935],{"class":401},"// Access objects by name directly\n",[287,2937,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956,2958,2960],{"class":289,"line":958},[287,2939,409],{"class":408},[287,2941,2744],{"class":416},[287,2943,560],{"class":412},[287,2945,2885],{"class":426},[287,2947,430],{"class":416},[287,2949,2890],{"class":412},[287,2951,875],{"class":408},[287,2953,2912],{"class":416},[287,2955,900],{"class":412},[287,2957,2071],{"class":416},[287,2959,1055],{"class":412},[287,2961,2962],{"class":416},"Octane_Octane_Body_0)\n",[287,2964,2965],{"class":289,"line":995},[287,2966,447],{"emptyLinePlaceholder":39},[287,2968,2969],{"class":289,"line":1002},[287,2970,2971],{"class":401},"// Option 2: Manual traversal function\n",[287,2973,2974,2977,2979,2981,2983,2985,2988,2990,2993,2995],{"class":289,"line":1012},[287,2975,2976],{"class":408},"function",[287,2978,2713],{"class":426},[287,2980,430],{"class":412},[287,2982,1066],{"class":868},[287,2984,688],{"class":412},[287,2986,2987],{"class":868}," property",[287,2989,688],{"class":412},[287,2991,2992],{"class":868}," value",[287,2994,872],{"class":412},[287,2996,878],{"class":412},[287,2998,2999,3001,3003,3005,3007,3009,3012],{"class":289,"line":1017},[287,3000,884],{"class":459},[287,3002,865],{"class":715},[287,3004,1043],{"class":412},[287,3006,1066],{"class":416},[287,3008,891],{"class":715},[287,3010,3011],{"class":459},"return",[287,3013,3014],{"class":412}," null\n",[287,3016,3017],{"class":289,"line":1027},[287,3018,447],{"emptyLinePlaceholder":39},[287,3020,3021,3023,3025,3027,3030,3033,3036,3039,3041,3043,3045],{"class":289,"line":1084},[287,3022,884],{"class":459},[287,3024,865],{"class":715},[287,3026,1066],{"class":416},[287,3028,3029],{"class":715},"[",[287,3031,3032],{"class":416},"property",[287,3034,3035],{"class":715},"] ",[287,3037,3038],{"class":412},"===",[287,3040,2992],{"class":416},[287,3042,891],{"class":715},[287,3044,3011],{"class":459},[287,3046,3047],{"class":416}," object\n",[287,3049,3051],{"class":289,"line":3050},22,[287,3052,447],{"emptyLinePlaceholder":39},[287,3054,3056,3059,3061,3063,3066,3069,3072,3074,3077,3079],{"class":289,"line":3055},23,[287,3057,3058],{"class":459},"  for",[287,3060,865],{"class":715},[287,3062,409],{"class":408},[287,3064,3065],{"class":416}," child",[287,3067,3068],{"class":412}," of",[287,3070,3071],{"class":416}," object",[287,3073,900],{"class":412},[287,3075,3076],{"class":416},"children",[287,3078,891],{"class":715},[287,3080,504],{"class":412},[287,3082,3084,3087,3090,3092,3094,3096,3099,3101,3103,3105,3107],{"class":289,"line":3083},24,[287,3085,3086],{"class":408},"    const",[287,3088,3089],{"class":416}," found",[287,3091,423],{"class":412},[287,3093,2713],{"class":426},[287,3095,430],{"class":715},[287,3097,3098],{"class":416},"child",[287,3100,688],{"class":412},[287,3102,2987],{"class":416},[287,3104,688],{"class":412},[287,3106,2992],{"class":416},[287,3108,441],{"class":715},[287,3110,3112,3115,3117,3120,3122,3124],{"class":289,"line":3111},25,[287,3113,3114],{"class":459},"    if",[287,3116,865],{"class":715},[287,3118,3119],{"class":416},"found",[287,3121,891],{"class":715},[287,3123,3011],{"class":459},[287,3125,3126],{"class":416}," found\n",[287,3128,3130],{"class":289,"line":3129},26,[287,3131,1226],{"class":412},[287,3133,3135],{"class":289,"line":3134},27,[287,3136,447],{"emptyLinePlaceholder":39},[287,3138,3140,3143],{"class":289,"line":3139},28,[287,3141,3142],{"class":459},"  return",[287,3144,3014],{"class":412},[287,3146,3148],{"class":289,"line":3147},29,[287,3149,532],{"class":412},[287,3151,3153],{"class":289,"line":3152},30,[287,3154,447],{"emptyLinePlaceholder":39},[287,3156,3158],{"class":289,"line":3157},31,[287,3159,3160],{"class":401},"// Usage\n",[287,3162,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3188,3190,3192,3194],{"class":289,"line":3163},32,[287,3165,409],{"class":408},[287,3167,2744],{"class":416},[287,3169,560],{"class":412},[287,3171,2713],{"class":426},[287,3173,2751],{"class":416},[287,3175,900],{"class":412},[287,3177,2071],{"class":416},[287,3179,688],{"class":412},[287,3181,474],{"class":412},[287,3183,2758],{"class":296},[287,3185,433],{"class":412},[287,3187,688],{"class":412},[287,3189,474],{"class":412},[287,3191,2767],{"class":296},[287,3193,433],{"class":412},[287,3195,441],{"class":416},[381,3197,3198],{"start":444},[364,3199,3200,518],{},[386,3201,3202],{},"Replace useRenderLoop",[276,3204,3206],{"className":392,"code":3205,"language":394,"meta":282,"style":282},"// ❌ Old v4 syntax\nconst { onLoop } = useRenderLoop()\n\nonLoop(({ delta, elapsedTime }) => {\n  // Your loop logic here\n})\n",[284,3207,3208,3212,3230,3234,3259,3264],{"__ignoreMap":282},[287,3209,3210],{"class":289,"line":290},[287,3211,1965],{"class":401},[287,3213,3214,3216,3218,3221,3223,3225,3228],{"class":289,"line":405},[287,3215,409],{"class":408},[287,3217,413],{"class":412},[287,3219,3220],{"class":416}," onLoop ",[287,3222,420],{"class":412},[287,3224,423],{"class":412},[287,3226,3227],{"class":426}," useRenderLoop",[287,3229,1984],{"class":416},[287,3231,3232],{"class":289,"line":444},[287,3233,447],{"emptyLinePlaceholder":39},[287,3235,3236,3239,3241,3244,3247,3249,3252,3255,3257],{"class":289,"line":450},[287,3237,3238],{"class":426},"onLoop",[287,3240,430],{"class":416},[287,3242,3243],{"class":412},"({",[287,3245,3246],{"class":868}," delta",[287,3248,688],{"class":412},[287,3250,3251],{"class":868}," elapsedTime",[287,3253,3254],{"class":412}," })",[287,3256,875],{"class":408},[287,3258,878],{"class":412},[287,3260,3261],{"class":289,"line":456},[287,3262,3263],{"class":401},"  // Your loop logic here\n",[287,3265,3266,3268],{"class":289,"line":838},[287,3267,420],{"class":412},[287,3269,441],{"class":416},[276,3271,3273],{"className":392,"code":3272,"language":394,"meta":282,"style":282},"// ✅ New v5 alternative - use context methods\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(({ delta, elapsedTime }) => {\n  // Your loop logic here\n})\n",[284,3274,3275,3280,3284,3302,3306,3327,3331],{"__ignoreMap":282},[287,3276,3277],{"class":289,"line":290},[287,3278,3279],{"class":401},"// ✅ New v5 alternative - use context methods\n",[287,3281,3282],{"class":289,"line":405},[287,3283,447],{"emptyLinePlaceholder":39},[287,3285,3286,3288,3290,3293,3295,3297,3300],{"class":289,"line":444},[287,3287,409],{"class":408},[287,3289,413],{"class":412},[287,3291,3292],{"class":416}," onBeforeRender ",[287,3294,420],{"class":412},[287,3296,423],{"class":412},[287,3298,3299],{"class":426}," useLoop",[287,3301,1984],{"class":416},[287,3303,3304],{"class":289,"line":450},[287,3305,447],{"emptyLinePlaceholder":39},[287,3307,3308,3311,3313,3315,3317,3319,3321,3323,3325],{"class":289,"line":456},[287,3309,3310],{"class":426},"onBeforeRender",[287,3312,430],{"class":416},[287,3314,3243],{"class":412},[287,3316,3246],{"class":868},[287,3318,688],{"class":412},[287,3320,3251],{"class":868},[287,3322,3254],{"class":412},[287,3324,875],{"class":408},[287,3326,878],{"class":412},[287,3328,3329],{"class":289,"line":838},[287,3330,3263],{"class":401},[287,3332,3333,3335],{"class":289,"line":843},[287,3334,420],{"class":412},[287,3336,441],{"class":416},[255,3338,3339],{},[258,3340,3341,3343,3344,3348,3349,900],{},[284,3342,120],{}," can only be used in child components of a ",[265,3345,3346],{"href":94},[284,3347,2564],{}," component, as its data is provided by ",[265,3350,3351],{"href":94},[284,3352,2564],{},[2078,3354,3355],{"to":121},[258,3356,3357,3358,3360],{},"Learn more about the ",[284,3359,120],{}," composable.",[258,3362,3363,3364,3367,3368,3370],{},"If the composable was used on a SFC (single file component), you can use the ",[284,3365,3366],{},"loop"," event on the ",[284,3369,2564],{}," component:",[276,3372,3374],{"className":759,"code":3373,"language":761,"meta":282,"style":282},"\u003Cscript setup>\nonLoop(({ delta, elapsedTime }) => {\n  // Your loop logic here\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas @loop=\"onLoop\">\n    \u003C!-- Your 3D scene -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[284,3375,3376,3386,3406,3410,3416,3424,3428,3436,3456,3460,3468],{"__ignoreMap":282},[287,3377,3378,3380,3382,3384],{"class":289,"line":290},[287,3379,768],{"class":412},[287,3381,771],{"class":715},[287,3383,774],{"class":408},[287,3385,777],{"class":412},[287,3387,3388,3390,3392,3394,3396,3398,3400,3402,3404],{"class":289,"line":405},[287,3389,3238],{"class":426},[287,3391,430],{"class":416},[287,3393,3243],{"class":412},[287,3395,3246],{"class":868},[287,3397,688],{"class":412},[287,3399,3251],{"class":868},[287,3401,3254],{"class":412},[287,3403,875],{"class":408},[287,3405,878],{"class":412},[287,3407,3408],{"class":289,"line":444},[287,3409,3263],{"class":401},[287,3411,3412,3414],{"class":289,"line":450},[287,3413,420],{"class":412},[287,3415,441],{"class":416},[287,3417,3418,3420,3422],{"class":289,"line":456},[287,3419,1005],{"class":412},[287,3421,771],{"class":715},[287,3423,777],{"class":412},[287,3425,3426],{"class":289,"line":838},[287,3427,447],{"emptyLinePlaceholder":39},[287,3429,3430,3432,3434],{"class":289,"line":843},[287,3431,768],{"class":412},[287,3433,1022],{"class":715},[287,3435,777],{"class":412},[287,3437,3438,3440,3442,3444,3446,3448,3450,3452,3454],{"class":289,"line":848},[287,3439,1030],{"class":412},[287,3441,2564],{"class":715},[287,3443,2567],{"class":412},[287,3445,3366],{"class":408},[287,3447,560],{"class":412},[287,3449,515],{"class":412},[287,3451,3238],{"class":416},[287,3453,515],{"class":412},[287,3455,777],{"class":412},[287,3457,3458],{"class":289,"line":854},[287,3459,2586],{"class":401},[287,3461,3462,3464,3466],{"class":289,"line":881},[287,3463,1829],{"class":412},[287,3465,2564],{"class":715},[287,3467,777],{"class":412},[287,3469,3470,3472,3474],{"class":289,"line":919},[287,3471,1005],{"class":412},[287,3473,1022],{"class":715},[287,3475,777],{"class":412},[381,3477,3478],{"start":450},[364,3479,3480,518],{},[386,3481,3482],{},"Replace useCamera",[276,3484,3486],{"className":392,"code":3485,"language":394,"meta":282,"style":282},"// ❌ Old v4 syntax\nconst { camera } = useCamera()\n",[284,3487,3488,3492],{"__ignoreMap":282},[287,3489,3490],{"class":289,"line":290},[287,3491,1965],{"class":401},[287,3493,3494,3496,3498,3500,3502,3504,3507],{"class":289,"line":405},[287,3495,409],{"class":408},[287,3497,413],{"class":412},[287,3499,1974],{"class":416},[287,3501,420],{"class":412},[287,3503,423],{"class":412},[287,3505,3506],{"class":426}," useCamera",[287,3508,1984],{"class":416},[276,3510,3512],{"className":392,"code":3511,"language":394,"meta":282,"style":282},"// ✅ New v5 alternative - use context methods\nconst { camera } = useTres()\n",[284,3513,3514,3518],{"__ignoreMap":282},[287,3515,3516],{"class":289,"line":290},[287,3517,3279],{"class":401},[287,3519,3520,3522,3524,3526,3528,3530,3532],{"class":289,"line":405},[287,3521,409],{"class":408},[287,3523,413],{"class":412},[287,3525,1974],{"class":416},[287,3527,420],{"class":412},[287,3529,423],{"class":412},[287,3531,2008],{"class":426},[287,3533,1984],{"class":416},[250,3535,3537],{"id":3536},"trescanvas-props-reactivity-changes","TresCanvas Props Reactivity Changes",[258,3539,3540],{},"🚦 Impact Level: Low to Moderate",[349,3542,352],{"id":3543},"what-changed-6",[258,3545,3546,3547,3550],{},"Several TresCanvas props are no longer reactive and are marked as ",[284,3548,3549],{},"@readonly",". These props were used to initialize the WebGL context and cannot be changed after the renderer is created without recreating the entire renderer and replacing the canvas element.",[258,3552,3553],{},[386,3554,3555],{},"Props that lost reactivity:",[361,3557,3558,3564,3570,3576,3582,3588,3594,3609],{},[364,3559,3560,3563],{},[284,3561,3562],{},"alpha"," - WebGL context alpha buffer setting",[364,3565,3566,3569],{},[284,3567,3568],{},"depth"," - Depth buffer configuration",[364,3571,3572,3575],{},[284,3573,3574],{},"stencil"," - Stencil buffer configuration",[364,3577,3578,3581],{},[284,3579,3580],{},"antialias"," - Anti-aliasing setting",[364,3583,3584,3587],{},[284,3585,3586],{},"logarithmicDepthBuffer"," - Logarithmic depth buffer setting",[364,3589,3590,3593],{},[284,3591,3592],{},"preserveDrawingBuffer"," - Drawing buffer preservation",[364,3595,3596,3599,3600,2108,3603,2108,3606,872],{},[284,3597,3598],{},"powerPreference"," - GPU power preference (",[284,3601,3602],{},"default",[284,3604,3605],{},"high-performance",[284,3607,3608],{},"low-power",[364,3610,3611,3614],{},[284,3612,3613],{},"failIfMajorPerformanceCaveat"," - Performance caveat handling",[258,3616,3617],{},[386,3618,3619],{},"Props that remain reactive:",[361,3621,3622,3628,3634,3640,3646,3652,3658,3664,3670,3676],{},[364,3623,3624,3627],{},[284,3625,3626],{},"shadows"," - Shadow rendering",[364,3629,3630,3633],{},[284,3631,3632],{},"clearColor"," - Background clear color",[364,3635,3636,3639],{},[284,3637,3638],{},"clearAlpha"," - Clear color opacity",[364,3641,3642,3645],{},[284,3643,3644],{},"toneMapping"," - Tone mapping technique",[364,3647,3648,3651],{},[284,3649,3650],{},"shadowMapType"," - Shadow map type",[364,3653,3654,3657],{},[284,3655,3656],{},"toneMappingExposure"," - Tone mapping exposure",[364,3659,3660,3663],{},[284,3661,3662],{},"outputColorSpace"," - Output color space",[364,3665,3666,3669],{},[284,3667,3668],{},"useLegacyLights"," - Legacy lights system",[364,3671,3672,3675],{},[284,3673,3674],{},"renderMode"," - Render mode setting",[364,3677,3678,3681],{},[284,3679,3680],{},"dpr"," - Device pixel ratio",[349,3683,359],{"id":3684},"why-we-changed-it-6",[258,3686,3687],{},"WebGL context initialization parameters must be set when the WebGL context is created. These settings are passed directly to the WebGL renderer constructor and cannot be modified without recreating the entire renderer, which would be expensive and disruptive.",[349,3689,379],{"id":3690},"migration-steps-7",[381,3692,3693],{},[364,3694,3695,518],{},[386,3696,3697],{},"Set context initialization props as static values",[276,3699,3701],{"className":759,"code":3700,"language":761,"meta":282,"style":282},"\u003Cscript setup>\n// ✅ These props should be set once and not changed\nconst rendererSettings = {\n  antialias: true,\n  alpha: false,\n  powerPreference: 'high-performance'\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- ✅ Use static values for WebGL context props -->\n  \u003CTresCanvas\n    :antialias=\"rendererSettings.antialias\"\n    :alpha=\"rendererSettings.alpha\"\n    :power-preference=\"rendererSettings.powerPreference\"\n  >\n    \u003C!-- Your scene -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[284,3702,3703,3713,3718,3729,3742,3754,3767,3771,3779,3783,3791,3796,3803,3823,3841,3860,3865,3870,3878],{"__ignoreMap":282},[287,3704,3705,3707,3709,3711],{"class":289,"line":290},[287,3706,768],{"class":412},[287,3708,771],{"class":715},[287,3710,774],{"class":408},[287,3712,777],{"class":412},[287,3714,3715],{"class":289,"line":405},[287,3716,3717],{"class":401},"// ✅ These props should be set once and not changed\n",[287,3719,3720,3722,3725,3727],{"class":289,"line":444},[287,3721,409],{"class":408},[287,3723,3724],{"class":416}," rendererSettings ",[287,3726,560],{"class":412},[287,3728,878],{"class":412},[287,3730,3731,3734,3736,3740],{"class":289,"line":450},[287,3732,3733],{"class":715},"  antialias",[287,3735,518],{"class":412},[287,3737,3739],{"class":3738},"sfNiH"," true",[287,3741,826],{"class":412},[287,3743,3744,3747,3749,3752],{"class":289,"line":456},[287,3745,3746],{"class":715},"  alpha",[287,3748,518],{"class":412},[287,3750,3751],{"class":3738}," false",[287,3753,826],{"class":412},[287,3755,3756,3759,3761,3763,3765],{"class":289,"line":838},[287,3757,3758],{"class":715},"  powerPreference",[287,3760,518],{"class":412},[287,3762,474],{"class":412},[287,3764,3605],{"class":296},[287,3766,479],{"class":412},[287,3768,3769],{"class":289,"line":843},[287,3770,532],{"class":412},[287,3772,3773,3775,3777],{"class":289,"line":848},[287,3774,1005],{"class":412},[287,3776,771],{"class":715},[287,3778,777],{"class":412},[287,3780,3781],{"class":289,"line":854},[287,3782,447],{"emptyLinePlaceholder":39},[287,3784,3785,3787,3789],{"class":289,"line":881},[287,3786,768],{"class":412},[287,3788,1022],{"class":715},[287,3790,777],{"class":412},[287,3792,3793],{"class":289,"line":919},[287,3794,3795],{"class":401},"  \u003C!-- ✅ Use static values for WebGL context props -->\n",[287,3797,3798,3800],{"class":289,"line":926},[287,3799,1030],{"class":412},[287,3801,3802],{"class":715},"TresCanvas\n",[287,3804,3805,3808,3810,3812,3814,3817,3819,3821],{"class":289,"line":931},[287,3806,3807],{"class":412},"    :",[287,3809,3580],{"class":408},[287,3811,560],{"class":412},[287,3813,515],{"class":412},[287,3815,3816],{"class":416},"rendererSettings",[287,3818,900],{"class":412},[287,3820,3580],{"class":416},[287,3822,527],{"class":412},[287,3824,3825,3827,3829,3831,3833,3835,3837,3839],{"class":289,"line":937},[287,3826,3807],{"class":412},[287,3828,3562],{"class":408},[287,3830,560],{"class":412},[287,3832,515],{"class":412},[287,3834,3816],{"class":416},[287,3836,900],{"class":412},[287,3838,3562],{"class":416},[287,3840,527],{"class":412},[287,3842,3843,3845,3848,3850,3852,3854,3856,3858],{"class":289,"line":958},[287,3844,3807],{"class":412},[287,3846,3847],{"class":408},"power-preference",[287,3849,560],{"class":412},[287,3851,515],{"class":412},[287,3853,3816],{"class":416},[287,3855,900],{"class":412},[287,3857,3598],{"class":416},[287,3859,527],{"class":412},[287,3861,3862],{"class":289,"line":995},[287,3863,3864],{"class":412},"  >\n",[287,3866,3867],{"class":289,"line":1002},[287,3868,3869],{"class":401},"    \u003C!-- Your scene -->\n",[287,3871,3872,3874,3876],{"class":289,"line":1012},[287,3873,1829],{"class":412},[287,3875,2564],{"class":715},[287,3877,777],{"class":412},[287,3879,3880,3882,3884],{"class":289,"line":1017},[287,3881,1005],{"class":412},[287,3883,1022],{"class":715},[287,3885,777],{"class":412},[381,3887,3888],{"start":405},[364,3889,3890,518],{},[386,3891,3892],{},"For conditional rendering based on device capabilities",[276,3894,3896],{"className":759,"code":3895,"language":761,"meta":282,"style":282},"\u003Cscript setup>\n// ✅ Determine settings once based on device capabilities\nconst isHighPerformanceDevice = () => {\n  // Your device detection logic\n  return navigator.hardwareConcurrency > 4\n}\n\nconst contextSettings = {\n  antialias: isHighPerformanceDevice(),\n  powerPreference: isHighPerformanceDevice() ? 'high-performance' : 'default'\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas v-bind=\"contextSettings\">\n    \u003C!-- Your scene -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[284,3897,3898,3908,3913,3929,3934,3953,3957,3961,3972,3985,4013,4017,4025,4029,4037,4057,4061,4069],{"__ignoreMap":282},[287,3899,3900,3902,3904,3906],{"class":289,"line":290},[287,3901,768],{"class":412},[287,3903,771],{"class":715},[287,3905,774],{"class":408},[287,3907,777],{"class":412},[287,3909,3910],{"class":289,"line":405},[287,3911,3912],{"class":401},"// ✅ Determine settings once based on device capabilities\n",[287,3914,3915,3917,3920,3922,3925,3927],{"class":289,"line":444},[287,3916,409],{"class":408},[287,3918,3919],{"class":416}," isHighPerformanceDevice ",[287,3921,560],{"class":412},[287,3923,3924],{"class":412}," ()",[287,3926,875],{"class":408},[287,3928,878],{"class":412},[287,3930,3931],{"class":289,"line":450},[287,3932,3933],{"class":401},"  // Your device detection logic\n",[287,3935,3936,3938,3941,3943,3946,3949],{"class":289,"line":456},[287,3937,3142],{"class":459},[287,3939,3940],{"class":416}," navigator",[287,3942,900],{"class":412},[287,3944,3945],{"class":416},"hardwareConcurrency",[287,3947,3948],{"class":412}," >",[287,3950,3952],{"class":3951},"sbssI"," 4\n",[287,3954,3955],{"class":289,"line":838},[287,3956,532],{"class":412},[287,3958,3959],{"class":289,"line":843},[287,3960,447],{"emptyLinePlaceholder":39},[287,3962,3963,3965,3968,3970],{"class":289,"line":848},[287,3964,409],{"class":408},[287,3966,3967],{"class":416}," contextSettings ",[287,3969,560],{"class":412},[287,3971,878],{"class":412},[287,3973,3974,3976,3978,3981,3983],{"class":289,"line":854},[287,3975,3733],{"class":715},[287,3977,518],{"class":412},[287,3979,3980],{"class":426}," isHighPerformanceDevice",[287,3982,2890],{"class":416},[287,3984,826],{"class":412},[287,3986,3987,3989,3991,3993,3996,3999,4001,4003,4005,4007,4009,4011],{"class":289,"line":881},[287,3988,3758],{"class":715},[287,3990,518],{"class":412},[287,3992,3980],{"class":426},[287,3994,3995],{"class":416},"() ",[287,3997,3998],{"class":412},"?",[287,4000,474],{"class":412},[287,4002,3605],{"class":296},[287,4004,433],{"class":412},[287,4006,1063],{"class":412},[287,4008,474],{"class":412},[287,4010,3602],{"class":296},[287,4012,479],{"class":412},[287,4014,4015],{"class":289,"line":919},[287,4016,532],{"class":412},[287,4018,4019,4021,4023],{"class":289,"line":926},[287,4020,1005],{"class":412},[287,4022,771],{"class":715},[287,4024,777],{"class":412},[287,4026,4027],{"class":289,"line":931},[287,4028,447],{"emptyLinePlaceholder":39},[287,4030,4031,4033,4035],{"class":289,"line":937},[287,4032,768],{"class":412},[287,4034,1022],{"class":715},[287,4036,777],{"class":412},[287,4038,4039,4041,4043,4046,4048,4050,4053,4055],{"class":289,"line":958},[287,4040,1030],{"class":412},[287,4042,2564],{"class":715},[287,4044,4045],{"class":408}," v-bind",[287,4047,560],{"class":412},[287,4049,515],{"class":412},[287,4051,4052],{"class":416},"contextSettings",[287,4054,515],{"class":412},[287,4056,777],{"class":412},[287,4058,4059],{"class":289,"line":995},[287,4060,3869],{"class":401},[287,4062,4063,4065,4067],{"class":289,"line":1002},[287,4064,1829],{"class":412},[287,4066,2564],{"class":715},[287,4068,777],{"class":412},[287,4070,4071,4073,4075],{"class":289,"line":1012},[287,4072,1005],{"class":412},[287,4074,1022],{"class":715},[287,4076,777],{"class":412},[381,4078,4079],{"start":444},[364,4080,4081,518],{},[386,4082,4083],{},"Update dynamic renderer options",[276,4085,4087],{"className":759,"code":4086,"language":761,"meta":282,"style":282},"\u003Cscript setup>\n// ✅ These props can still be changed dynamically\nconst shadowsEnabled = ref(true)\nconst currentToneMapping = ref(ACESFilmicToneMapping)\n\nconst toggleShadows = () => {\n  shadowsEnabled.value = !shadowsEnabled.value\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas\n    :shadows=\"shadowsEnabled\"\n    :tone-mapping=\"currentToneMapping\"\n  >\n    \u003C!-- Your scene -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[284,4088,4089,4099,4104,4122,4136,4140,4155,4177,4181,4189,4193,4201,4207,4221,4237,4241,4245,4253],{"__ignoreMap":282},[287,4090,4091,4093,4095,4097],{"class":289,"line":290},[287,4092,768],{"class":412},[287,4094,771],{"class":715},[287,4096,774],{"class":408},[287,4098,777],{"class":412},[287,4100,4101],{"class":289,"line":405},[287,4102,4103],{"class":401},"// ✅ These props can still be changed dynamically\n",[287,4105,4106,4108,4111,4113,4115,4117,4120],{"class":289,"line":444},[287,4107,409],{"class":408},[287,4109,4110],{"class":416}," shadowsEnabled ",[287,4112,560],{"class":412},[287,4114,1259],{"class":426},[287,4116,430],{"class":416},[287,4118,4119],{"class":3738},"true",[287,4121,441],{"class":416},[287,4123,4124,4126,4129,4131,4133],{"class":289,"line":450},[287,4125,409],{"class":408},[287,4127,4128],{"class":416}," currentToneMapping ",[287,4130,560],{"class":412},[287,4132,1259],{"class":426},[287,4134,4135],{"class":416},"(ACESFilmicToneMapping)\n",[287,4137,4138],{"class":289,"line":456},[287,4139,447],{"emptyLinePlaceholder":39},[287,4141,4142,4144,4147,4149,4151,4153],{"class":289,"line":838},[287,4143,409],{"class":408},[287,4145,4146],{"class":416}," toggleShadows ",[287,4148,560],{"class":412},[287,4150,3924],{"class":412},[287,4152,875],{"class":408},[287,4154,878],{"class":412},[287,4156,4157,4160,4162,4164,4166,4169,4172,4174],{"class":289,"line":843},[287,4158,4159],{"class":416},"  shadowsEnabled",[287,4161,900],{"class":412},[287,4163,2071],{"class":416},[287,4165,423],{"class":412},[287,4167,4168],{"class":412}," !",[287,4170,4171],{"class":416},"shadowsEnabled",[287,4173,900],{"class":412},[287,4175,4176],{"class":416},"value\n",[287,4178,4179],{"class":289,"line":848},[287,4180,532],{"class":412},[287,4182,4183,4185,4187],{"class":289,"line":854},[287,4184,1005],{"class":412},[287,4186,771],{"class":715},[287,4188,777],{"class":412},[287,4190,4191],{"class":289,"line":881},[287,4192,447],{"emptyLinePlaceholder":39},[287,4194,4195,4197,4199],{"class":289,"line":919},[287,4196,768],{"class":412},[287,4198,1022],{"class":715},[287,4200,777],{"class":412},[287,4202,4203,4205],{"class":289,"line":926},[287,4204,1030],{"class":412},[287,4206,3802],{"class":715},[287,4208,4209,4211,4213,4215,4217,4219],{"class":289,"line":931},[287,4210,3807],{"class":412},[287,4212,3626],{"class":408},[287,4214,560],{"class":412},[287,4216,515],{"class":412},[287,4218,4171],{"class":416},[287,4220,527],{"class":412},[287,4222,4223,4225,4228,4230,4232,4235],{"class":289,"line":937},[287,4224,3807],{"class":412},[287,4226,4227],{"class":408},"tone-mapping",[287,4229,560],{"class":412},[287,4231,515],{"class":412},[287,4233,4234],{"class":416},"currentToneMapping",[287,4236,527],{"class":412},[287,4238,4239],{"class":289,"line":958},[287,4240,3864],{"class":412},[287,4242,4243],{"class":289,"line":995},[287,4244,3869],{"class":401},[287,4246,4247,4249,4251],{"class":289,"line":1002},[287,4248,1829],{"class":412},[287,4250,2564],{"class":715},[287,4252,777],{"class":412},[287,4254,4255,4257,4259],{"class":289,"line":1012},[287,4256,1005],{"class":412},[287,4258,1022],{"class":715},[287,4260,777],{"class":412},[245,4262,4264],{"id":4263},"summary","Summary",[258,4266,4267],{},"These breaking changes represent a major architectural improvement in TresJS v5, focusing on:",[361,4269,4270,4273,4276,4279,4282],{},[364,4271,4272],{},"Modern ESM standards",[364,4274,4275],{},"Better TypeScript support",[364,4277,4278],{},"Improved performance",[364,4280,4281],{},"More predictable behavior",[364,4283,4284],{},"Cleaner API surface",[258,4286,4287],{},"Take your time migrating and test thoroughly. The new APIs provide better developer experience and performance once migrated.",[4289,4290,4291],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":282,"searchDepth":290,"depth":405,"links":4293},[4294,4298,4309],{"id":247,"depth":405,"text":248,"children":4295},[4296,4297],{"id":252,"depth":444,"text":253},{"id":332,"depth":444,"text":333},{"id":339,"depth":405,"text":340,"children":4299},[4300,4301,4303,4304,4305,4306,4307,4308],{"id":343,"depth":444,"text":344},{"id":605,"depth":444,"text":4302},"useLoader Composable refactor",{"id":1421,"depth":444,"text":1422},{"id":1591,"depth":444,"text":1592},{"id":1917,"depth":444,"text":1918},{"id":2088,"depth":444,"text":2089},{"id":2351,"depth":444,"text":2352},{"id":3536,"depth":444,"text":3537},{"id":4263,"depth":405,"text":4264},"Upgrade TresJS to the latest version.","md",null,{},{"icon":26},{"title":23,"description":4310},"rxeBSSi-IGj4TjqqV6e_P0zpoNxykGhHq85QCP4K61w",[4318,4320],{"title":18,"path":19,"stem":20,"description":4319,"icon":21,"children":-1},"Learn how to create your first 3D scene with TresJS with this step-by-step guide.",{"title":30,"path":31,"stem":35,"description":4321,"children":-1},"Discover the core concepts of TresJS.",1774953658088]