[{"data":1,"prerenderedAt":3086},["ShallowReactive",2],{"/blog/tresjs-v5":3,"formatted-blog-post":2691},{"id":4,"title":5,"author":6,"body":9,"category":2679,"date":2680,"description":2681,"draft":2682,"extension":2683,"meta":2684,"navigation":379,"path":2685,"seo":2686,"stem":2687,"thumbnail":2688,"url":2689,"__hash__":2690},"blog/blog/tresjs-v5.md","Announcing Tres 5.0",[7,8],"alvarosabu","tino-koch",{"type":10,"value":11,"toc":2657},"minimark",[12,16,21,24,65,70,77,80,143,150,183,193,197,203,229,238,242,248,254,280,699,703,718,726,736,768,1076,1080,1095,1259,1262,1299,1303,1306,1310,1351,1355,1360,1458,1463,1626,1640,1644,1648,1652,1655,1744,1748,1755,1933,1939,2128,2134,2273,2277,2280,2364,2368,2371,2412,2418,2422,2442,2448,2452,2472,2478,2482,2485,2506,2510,2513,2539,2543,2546,2586,2595,2599,2602,2611,2614,2626,2628,2653],[13,14,15],"p",{},"After months of development since March 21st, we're thrilled to announce TresJS v5! This major release represents a significant evolution of the declarative Three.js framework for Vue, bringing modern architecture, enhanced performance, and cutting-edge WebGPU support.",[17,18,20],"h2",{"id":19},"whats-new","🎯 What's New?",[13,22,23],{},"Tres 5 is our most ambitious release yet, it's all about making your developer experience better, increasing performance, and future-proofing the framework for the next generation of web graphics in Vue.",[25,26,27,40,50,59],"ul",{},[28,29,30,34,35,39],"li",{},[31,32,33],"strong",{},"Start a Tres project quickly",": With the new ",[36,37,38],"code",{},"create-tres"," CLI tool, you can start a new Tres project in seconds.",[28,41,42,45,46,49],{},[31,43,44],{},"ESM-only architecture",": We've made the bold decision to embrace the future by going ",[31,47,48],{},"ESM-only",".",[28,51,52,55,56],{},[31,53,54],{},"WebGPU native support",": The future of web graphics is here! TresJS v5 introduces ",[31,57,58],{},"experimental WebGPU support",[28,60,61,64],{},[31,62,63],{},"Completely refactored composables",": We've completely refactored our composables system for better reliability and type safety.",[66,67,69],"h3",{"id":68},"new-way-to-start-a-tres-project","🚀 New way to start a Tres project",[13,71,72],{},[73,74],"img",{"src":75,"alt":76},"/blog/tresjs-v5/create-tres.png","Tres 5.0 CLI",[13,78,79],{},"We've created a new CLI tool to help you scaffold a new Tres project with the best practices and the most popular packages.",[81,82,83,109,127],"code-group",{},[84,85,91],"pre",{"className":86,"code":87,"filename":88,"language":89,"meta":90,"style":90},"language-bash shiki shiki-themes catppuccin-latte catppuccin-latte catppuccin-frappe","npx create-tres my-tres-project\n","npm","bash","",[36,92,93],{"__ignoreMap":90},[94,95,98,102,106],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"s0faT","npx",[94,103,105],{"class":104},"s9Zht"," create-tres",[94,107,108],{"class":104}," my-tres-project\n",[84,110,113],{"className":86,"code":111,"filename":112,"language":89,"meta":90,"style":90},"yarn create tres my-tres-project\n","yarn",[36,114,115],{"__ignoreMap":90},[94,116,117,119,122,125],{"class":96,"line":97},[94,118,112],{"class":100},[94,120,121],{"class":104}," create",[94,123,124],{"class":104}," tres",[94,126,108],{"class":104},[84,128,131],{"className":86,"code":129,"filename":130,"language":89,"meta":90,"style":90},"pnpm create tres my-tres-project\n","pnpm",[36,132,133],{"__ignoreMap":90},[94,134,135,137,139,141],{"class":96,"line":97},[94,136,130],{"class":100},[94,138,121],{"class":104},[94,140,124],{"class":104},[94,142,108],{"class":104},[13,144,145,146,149],{},"The CLI provides an ",[31,147,148],{},"interactive wizard"," that guides you through:",[151,152,153],"prose-list",{},[25,154,155,162,169,176],{},[28,156,157,158,161],{},"🎯 ",[31,159,160],{},"Template selection",": Choose between Vue + Vite or Nuxt",[28,163,164,165,168],{},"📦 ",[31,166,167],{},"Ecosystem packages",": Select from TresJS ecosystem packages (Cientos, Post-processing, Leches)",[28,170,171,172,175],{},"🔧 ",[31,173,174],{},"TypeScript support",": Type safe development with TypeScript",[28,177,178,179,182],{},"📏 ",[31,180,181],{},"ESLint integration",": Code quality with TresJS ESLint config",[184,185,186],"prose-note",{},[13,187,188,189,192],{},"This is the ",[31,190,191],{},"recommended approach"," for new projects as it handles all the configuration automatically and lets you choose exactly what you need.",[66,194,196],{"id":195},"esm-only-architecture","🌟 ESM-Only Architecture",[13,198,199,200,202],{},"We've made the bold decision to embrace the future by going ",[31,201,48],{},". This means:",[25,204,205,211,217,223],{},[28,206,207,210],{},[31,208,209],{},"Smaller bundle sizes"," with better tree-shaking",[28,212,213,216],{},[31,214,215],{},"Faster loading"," and improved performance",[28,218,219,222],{},[31,220,221],{},"Modern JavaScript standards"," alignment",[28,224,225,228],{},[31,226,227],{},"Better compatibility"," with modern build tools",[230,231,232],"prose-warning",{},[13,233,234,237],{},[31,235,236],{},"Breaking Change",": UMD builds are no longer supported. If you're using TresJS in a legacy environment, you'll need to update your build pipeline.",[66,239,241],{"id":240},"webgpu-native-support","⚡ WebGPU Native Support",[243,244,247],"u-badge",{"color":245,"variant":246},"primary","soft","\nExperimental\n",[13,249,250,251,253],{},"The future of web graphics is here! TresJS v5 introduces ",[31,252,58],{},", bringing:",[25,255,256,262,268,274],{},[28,257,258,261],{},[31,259,260],{},"Next-generation performance"," for complex 3D scenes",[28,263,264,267],{},[31,265,266],{},"Better GPU utilization"," and compute shader support",[28,269,270,273],{},[31,271,272],{},"Future-ready architecture"," for upcoming web standards",[28,275,276,279],{},[31,277,278],{},"Seamless fallback"," to WebGL when WebGPU isn't available",[84,281,286],{"className":282,"code":283,"filename":284,"language":285,"meta":90,"style":90},"language-vue shiki shiki-themes catppuccin-latte catppuccin-latte catppuccin-frappe","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { WebGPURenderer } from 'three/webgpu'\nimport type { TresRendererSetupContext } from '@tresjs/core'\n\n// Create WebGPU renderer factory\nconst createWebGPURenderer = (ctx: TresRendererSetupContext) => {\n  const renderer = new WebGPURenderer({\n    canvas: toValue(ctx.canvas),\n    // WebGPU specific configuration\n    alpha: true,\n    antialias: true,\n  })\n  return renderer\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :renderer=\"createWebGPURenderer\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n    \u003CTresMeshBasicMaterial color=\"hotpink\" />\n    \u003C!-- Your 3D scene here -->\n  \u003C/TresCanvas>\n\u003C/template>\n","basic-webgpu.vue","vue",[36,287,288,314,338,355,374,381,388,423,447,469,475,489,501,510,519,525,535,540,550,577,619,656,674,680,690],{"__ignoreMap":90},[94,289,290,294,298,302,305,308,311],{"class":96,"line":97},[94,291,293],{"class":292},"sWdzt","\u003C",[94,295,297],{"class":296},"slJ5s","script",[94,299,301],{"class":300},"s1cdE"," setup",[94,303,304],{"class":300}," lang",[94,306,307],{"class":292},"=",[94,309,310],{"class":104},"\"ts\"",[94,312,313],{"class":292},">\n",[94,315,317,321,325,329,332,335],{"class":96,"line":316},2,[94,318,320],{"class":319},"sZyUJ","import",[94,322,324],{"class":323},"spKPg"," {",[94,326,328],{"class":327},"s9Av-"," TresCanvas ",[94,330,331],{"class":323},"}",[94,333,334],{"class":319}," from",[94,336,337],{"class":104}," '@tresjs/core'\n",[94,339,341,343,345,348,350,352],{"class":96,"line":340},3,[94,342,320],{"class":319},[94,344,324],{"class":323},[94,346,347],{"class":327}," WebGPURenderer ",[94,349,331],{"class":323},[94,351,334],{"class":319},[94,353,354],{"class":104}," 'three/webgpu'\n",[94,356,358,360,363,365,368,370,372],{"class":96,"line":357},4,[94,359,320],{"class":319},[94,361,362],{"class":319}," type",[94,364,324],{"class":323},[94,366,367],{"class":327}," TresRendererSetupContext ",[94,369,331],{"class":323},[94,371,334],{"class":319},[94,373,337],{"class":104},[94,375,377],{"class":96,"line":376},5,[94,378,380],{"emptyLinePlaceholder":379},true,"\n",[94,382,384],{"class":96,"line":383},6,[94,385,387],{"class":386},"sMnCH","// Create WebGPU renderer factory\n",[94,389,391,394,397,400,403,407,410,414,417,420],{"class":96,"line":390},7,[94,392,393],{"class":319},"const",[94,395,396],{"class":100}," createWebGPURenderer",[94,398,399],{"class":292}," =",[94,401,402],{"class":323}," (",[94,404,406],{"class":405},"sQnVB","ctx",[94,408,409],{"class":292},":",[94,411,413],{"class":412},"sVAQX"," TresRendererSetupContext",[94,415,416],{"class":323},")",[94,418,419],{"class":292}," =>",[94,421,422],{"class":323}," {\n",[94,424,426,429,432,434,438,441,444],{"class":96,"line":425},8,[94,427,428],{"class":319},"  const",[94,430,431],{"class":327}," renderer ",[94,433,307],{"class":292},[94,435,437],{"class":436},"sVNBm"," new",[94,439,440],{"class":100}," WebGPURenderer",[94,442,443],{"class":327},"(",[94,445,446],{"class":323},"{\n",[94,448,450,453,455,458,461,463,466],{"class":96,"line":449},9,[94,451,452],{"class":327},"    canvas",[94,454,409],{"class":292},[94,456,457],{"class":100}," toValue",[94,459,460],{"class":327},"(ctx",[94,462,49],{"class":292},[94,464,465],{"class":327},"canvas)",[94,467,468],{"class":323},",\n",[94,470,472],{"class":96,"line":471},10,[94,473,474],{"class":386},"    // WebGPU specific configuration\n",[94,476,478,481,483,487],{"class":96,"line":477},11,[94,479,480],{"class":327},"    alpha",[94,482,409],{"class":292},[94,484,486],{"class":485},"sREMW"," true",[94,488,468],{"class":323},[94,490,492,495,497,499],{"class":96,"line":491},12,[94,493,494],{"class":327},"    antialias",[94,496,409],{"class":292},[94,498,486],{"class":485},[94,500,468],{"class":323},[94,502,504,507],{"class":96,"line":503},13,[94,505,506],{"class":323},"  }",[94,508,509],{"class":327},")\n",[94,511,513,516],{"class":96,"line":512},14,[94,514,515],{"class":319},"  return",[94,517,518],{"class":327}," renderer\n",[94,520,522],{"class":96,"line":521},15,[94,523,524],{"class":323},"}\n",[94,526,528,531,533],{"class":96,"line":527},16,[94,529,530],{"class":292},"\u003C/",[94,532,297],{"class":296},[94,534,313],{"class":292},[94,536,538],{"class":96,"line":537},17,[94,539,380],{"emptyLinePlaceholder":379},[94,541,543,545,548],{"class":96,"line":542},18,[94,544,293],{"class":292},[94,546,547],{"class":296},"template",[94,549,313],{"class":292},[94,551,553,556,559,562,565,567,570,573,575],{"class":96,"line":552},19,[94,554,555],{"class":292},"  \u003C",[94,557,558],{"class":296},"TresCanvas",[94,560,561],{"class":323}," :",[94,563,564],{"class":300},"renderer",[94,566,307],{"class":292},[94,568,569],{"class":104},"\"",[94,571,572],{"class":327},"createWebGPURenderer",[94,574,569],{"class":104},[94,576,313],{"class":292},[94,578,580,583,586,588,591,593,595,598,601,604,607,609,611,614,616],{"class":96,"line":579},20,[94,581,582],{"class":292},"    \u003C",[94,584,585],{"class":296},"TresPerspectiveCamera",[94,587,561],{"class":323},[94,589,590],{"class":300},"position",[94,592,307],{"class":292},[94,594,569],{"class":104},[94,596,597],{"class":327},"[",[94,599,600],{"class":485},"3",[94,602,603],{"class":323},",",[94,605,606],{"class":485}," 3",[94,608,603],{"class":323},[94,610,606],{"class":485},[94,612,613],{"class":327},"]",[94,615,569],{"class":104},[94,617,618],{"class":292}," />\n",[94,620,622,624,627,629,632,634,636,638,641,643,646,648,650,652,654],{"class":96,"line":621},21,[94,623,582],{"class":292},[94,625,626],{"class":296},"TresBoxGeometry",[94,628,561],{"class":323},[94,630,631],{"class":300},"args",[94,633,307],{"class":292},[94,635,569],{"class":104},[94,637,597],{"class":327},[94,639,640],{"class":485},"1",[94,642,603],{"class":323},[94,644,645],{"class":485}," 1",[94,647,603],{"class":323},[94,649,645],{"class":485},[94,651,613],{"class":327},[94,653,569],{"class":104},[94,655,618],{"class":292},[94,657,659,661,664,667,669,672],{"class":96,"line":658},22,[94,660,582],{"class":292},[94,662,663],{"class":296},"TresMeshBasicMaterial",[94,665,666],{"class":300}," color",[94,668,307],{"class":292},[94,670,671],{"class":104},"\"hotpink\"",[94,673,618],{"class":292},[94,675,677],{"class":96,"line":676},23,[94,678,679],{"class":386},"    \u003C!-- Your 3D scene here -->\n",[94,681,683,686,688],{"class":96,"line":682},24,[94,684,685],{"class":292},"  \u003C/",[94,687,558],{"class":296},[94,689,313],{"class":292},[94,691,693,695,697],{"class":96,"line":692},25,[94,694,530],{"class":292},[94,696,547],{"class":296},[94,698,313],{"class":292},[66,700,702],{"id":701},"enhanced-composables-api","🔄 Enhanced Composables API",[13,704,705,706,709,710,717],{},"We've completely refactored our composables system to become ",[31,707,708],{},"true Vue composables"," (thanks to ",[711,712,716],"a",{"href":713,"rel":714},"https://www.youtube.com/watch?v=N0QrFKBZuqA",[715],"nofollow","Alexander Lichter's video"," 😅) with proper reactive state management. The biggest motivation was that many of our previous \"composables\" weren't actually composables but utility functions wrapping Three.js APIs.",[719,720,722,723],"h4",{"id":721},"completely-refactored-useloader","Completely Refactored ",[36,724,725],{},"useLoader",[13,727,728,729,731,732,735],{},"The ",[36,730,725],{}," composable has been transformed from a simple utility function into a true Vue composable based on ",[36,733,734],{},"useAsyncData",", providing:",[25,737,738,744,750,756,762],{},[28,739,740,743],{},[31,741,742],{},"Reactive state management"," with loading, error, and progress tracking",[28,745,746,749],{},[31,747,748],{},"Better Vue integration"," with proper composable patterns",[28,751,752,755],{},[31,753,754],{},"Automatic cleanup"," and disposal of 3D objects",[28,757,758,761],{},[31,759,760],{},"Enhanced TypeScript support"," and developer experience",[28,763,764,767],{},[31,765,766],{},"Dynamic path loading"," - change the model path reactively",[84,769,771],{"className":282,"code":770,"language":285,"meta":90,"style":90},"\u003Cscript setup>\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'\n\n// ❌ Old v4 syntax - returned a promise\n// const gltf = await useLoader(GLTFLoader, '/models/duck.gltf')\n\n// ✅ New v5 syntax - returns reactive state object\nconst { state: model, isLoading, error, progress } = useLoader(\n  GLTFLoader, \n  '/models/duck.gltf'\n)\n\n// Watch for loading state changes reactively\nwatch(isLoading, (loading) => {\n  if (loading) console.log('Loading model...')\n})\n\n// Track loading progress\nwatch(progress, (prog) => {\n  console.log(`Loading: ${prog.percentage}%`)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- Reactive loading states in template -->\n  \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n\u003C/template>\n",[36,772,773,783,799,803,808,813,817,822,861,871,876,880,884,889,910,930,936,940,945,965,996,1002,1010,1014,1022,1027,1067],{"__ignoreMap":90},[94,774,775,777,779,781],{"class":96,"line":97},[94,776,293],{"class":292},[94,778,297],{"class":296},[94,780,301],{"class":300},[94,782,313],{"class":292},[94,784,785,787,789,792,794,796],{"class":96,"line":316},[94,786,320],{"class":319},[94,788,324],{"class":323},[94,790,791],{"class":327}," GLTFLoader ",[94,793,331],{"class":323},[94,795,334],{"class":319},[94,797,798],{"class":104}," 'three/examples/jsm/loaders/GLTFLoader'\n",[94,800,801],{"class":96,"line":340},[94,802,380],{"emptyLinePlaceholder":379},[94,804,805],{"class":96,"line":357},[94,806,807],{"class":386},"// ❌ Old v4 syntax - returned a promise\n",[94,809,810],{"class":96,"line":376},[94,811,812],{"class":386},"// const gltf = await useLoader(GLTFLoader, '/models/duck.gltf')\n",[94,814,815],{"class":96,"line":383},[94,816,380],{"emptyLinePlaceholder":379},[94,818,819],{"class":96,"line":390},[94,820,821],{"class":386},"// ✅ New v5 syntax - returns reactive state object\n",[94,823,824,826,828,831,833,836,838,841,843,846,848,851,853,855,858],{"class":96,"line":425},[94,825,393],{"class":319},[94,827,324],{"class":323},[94,829,830],{"class":327}," state",[94,832,409],{"class":323},[94,834,835],{"class":327}," model",[94,837,603],{"class":323},[94,839,840],{"class":327}," isLoading",[94,842,603],{"class":323},[94,844,845],{"class":327}," error",[94,847,603],{"class":323},[94,849,850],{"class":327}," progress ",[94,852,331],{"class":323},[94,854,399],{"class":292},[94,856,857],{"class":100}," useLoader",[94,859,860],{"class":327},"(\n",[94,862,863,866,868],{"class":96,"line":449},[94,864,865],{"class":327},"  GLTFLoader",[94,867,603],{"class":323},[94,869,870],{"class":327}," \n",[94,872,873],{"class":96,"line":471},[94,874,875],{"class":104},"  '/models/duck.gltf'\n",[94,877,878],{"class":96,"line":477},[94,879,509],{"class":327},[94,881,882],{"class":96,"line":491},[94,883,380],{"emptyLinePlaceholder":379},[94,885,886],{"class":96,"line":503},[94,887,888],{"class":386},"// Watch for loading state changes reactively\n",[94,890,891,894,897,899,901,904,906,908],{"class":96,"line":512},[94,892,893],{"class":100},"watch",[94,895,896],{"class":327},"(isLoading",[94,898,603],{"class":323},[94,900,402],{"class":323},[94,902,903],{"class":405},"loading",[94,905,416],{"class":323},[94,907,419],{"class":319},[94,909,422],{"class":323},[94,911,912,915,918,920,923,925,928],{"class":96,"line":521},[94,913,914],{"class":319},"  if",[94,916,917],{"class":327}," (loading) console",[94,919,49],{"class":292},[94,921,922],{"class":100},"log",[94,924,443],{"class":327},[94,926,927],{"class":104},"'Loading model...'",[94,929,509],{"class":327},[94,931,932,934],{"class":96,"line":527},[94,933,331],{"class":323},[94,935,509],{"class":327},[94,937,938],{"class":96,"line":537},[94,939,380],{"emptyLinePlaceholder":379},[94,941,942],{"class":96,"line":542},[94,943,944],{"class":386},"// Track loading progress\n",[94,946,947,949,952,954,956,959,961,963],{"class":96,"line":552},[94,948,893],{"class":100},[94,950,951],{"class":327},"(progress",[94,953,603],{"class":323},[94,955,402],{"class":323},[94,957,958],{"class":405},"prog",[94,960,416],{"class":323},[94,962,419],{"class":319},[94,964,422],{"class":323},[94,966,967,970,972,974,976,979,982,984,986,989,991,994],{"class":96,"line":579},[94,968,969],{"class":327},"  console",[94,971,49],{"class":292},[94,973,922],{"class":100},[94,975,443],{"class":327},[94,977,978],{"class":104},"`Loading: ",[94,980,981],{"class":323},"${",[94,983,958],{"class":327},[94,985,49],{"class":292},[94,987,988],{"class":327},"percentage",[94,990,331],{"class":323},[94,992,993],{"class":104},"%`",[94,995,509],{"class":327},[94,997,998,1000],{"class":96,"line":621},[94,999,331],{"class":323},[94,1001,509],{"class":327},[94,1003,1004,1006,1008],{"class":96,"line":658},[94,1005,530],{"class":292},[94,1007,297],{"class":296},[94,1009,313],{"class":292},[94,1011,1012],{"class":96,"line":676},[94,1013,380],{"emptyLinePlaceholder":379},[94,1015,1016,1018,1020],{"class":96,"line":682},[94,1017,293],{"class":292},[94,1019,547],{"class":296},[94,1021,313],{"class":292},[94,1023,1024],{"class":96,"line":692},[94,1025,1026],{"class":386},"  \u003C!-- Reactive loading states in template -->\n",[94,1028,1030,1032,1035,1038,1040,1042,1045,1047,1049,1052,1054,1056,1058,1060,1063,1065],{"class":96,"line":1029},26,[94,1031,555],{"class":292},[94,1033,1034],{"class":296},"primitive",[94,1036,1037],{"class":319}," v-if",[94,1039,307],{"class":292},[94,1041,569],{"class":104},[94,1043,1044],{"class":327},"model",[94,1046,569],{"class":104},[94,1048,561],{"class":323},[94,1050,1051],{"class":300},"object",[94,1053,307],{"class":292},[94,1055,569],{"class":104},[94,1057,1044],{"class":327},[94,1059,49],{"class":292},[94,1061,1062],{"class":327},"scene",[94,1064,569],{"class":104},[94,1066,618],{"class":292},[94,1068,1070,1072,1074],{"class":96,"line":1069},27,[94,1071,530],{"class":292},[94,1073,547],{"class":296},[94,1075,313],{"class":292},[719,1077,1079],{"id":1078},"impact-on-cientos-composables","Impact on Cientos Composables",[13,1081,1082,1083,1090,1091,1094],{},"This breaking change also affects Cientos composables like ",[711,1084,1087],{"href":1085,"rel":1086},"https://deploy-preview-563--cientos-tresjs.netlify.app/guide/loaders/use-gltf.html",[715],[36,1088,1089],{},"useGLTF"," and ",[36,1092,1093],{},"useFBX",", which now follow the same reactive pattern:",[84,1096,1098],{"className":282,"code":1097,"language":285,"meta":90,"style":90},"\u003Cscript setup>\nimport { useGLTF } from '@tresjs/cientos'\n\n// ✅ New reactive state pattern in Cientos\nconst { state, nodes, materials, isLoading, progress } = useGLTF('/model.glb', { \n  draco: true \n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state.scene\" />\n\u003C/template>\n",[36,1099,1100,1110,1126,1130,1135,1179,1190,1196,1204,1208,1216,1251],{"__ignoreMap":90},[94,1101,1102,1104,1106,1108],{"class":96,"line":97},[94,1103,293],{"class":292},[94,1105,297],{"class":296},[94,1107,301],{"class":300},[94,1109,313],{"class":292},[94,1111,1112,1114,1116,1119,1121,1123],{"class":96,"line":316},[94,1113,320],{"class":319},[94,1115,324],{"class":323},[94,1117,1118],{"class":327}," useGLTF ",[94,1120,331],{"class":323},[94,1122,334],{"class":319},[94,1124,1125],{"class":104}," '@tresjs/cientos'\n",[94,1127,1128],{"class":96,"line":340},[94,1129,380],{"emptyLinePlaceholder":379},[94,1131,1132],{"class":96,"line":357},[94,1133,1134],{"class":386},"// ✅ New reactive state pattern in Cientos\n",[94,1136,1137,1139,1141,1143,1145,1148,1150,1153,1155,1157,1159,1161,1163,1165,1168,1170,1173,1175,1177],{"class":96,"line":376},[94,1138,393],{"class":319},[94,1140,324],{"class":323},[94,1142,830],{"class":327},[94,1144,603],{"class":323},[94,1146,1147],{"class":327}," nodes",[94,1149,603],{"class":323},[94,1151,1152],{"class":327}," materials",[94,1154,603],{"class":323},[94,1156,840],{"class":327},[94,1158,603],{"class":323},[94,1160,850],{"class":327},[94,1162,331],{"class":323},[94,1164,399],{"class":292},[94,1166,1167],{"class":100}," useGLTF",[94,1169,443],{"class":327},[94,1171,1172],{"class":104},"'/model.glb'",[94,1174,603],{"class":323},[94,1176,324],{"class":323},[94,1178,870],{"class":327},[94,1180,1181,1184,1186,1188],{"class":96,"line":383},[94,1182,1183],{"class":327},"  draco",[94,1185,409],{"class":292},[94,1187,486],{"class":485},[94,1189,870],{"class":327},[94,1191,1192,1194],{"class":96,"line":390},[94,1193,331],{"class":323},[94,1195,509],{"class":327},[94,1197,1198,1200,1202],{"class":96,"line":425},[94,1199,530],{"class":292},[94,1201,297],{"class":296},[94,1203,313],{"class":292},[94,1205,1206],{"class":96,"line":449},[94,1207,380],{"emptyLinePlaceholder":379},[94,1209,1210,1212,1214],{"class":96,"line":471},[94,1211,293],{"class":292},[94,1213,547],{"class":296},[94,1215,313],{"class":292},[94,1217,1218,1220,1222,1224,1226,1228,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249],{"class":96,"line":477},[94,1219,555],{"class":292},[94,1221,1034],{"class":296},[94,1223,1037],{"class":319},[94,1225,307],{"class":292},[94,1227,569],{"class":104},[94,1229,1230],{"class":327},"state",[94,1232,569],{"class":104},[94,1234,561],{"class":323},[94,1236,1051],{"class":300},[94,1238,307],{"class":292},[94,1240,569],{"class":104},[94,1242,1230],{"class":327},[94,1244,49],{"class":292},[94,1246,1062],{"class":327},[94,1248,569],{"class":104},[94,1250,618],{"class":292},[94,1252,1253,1255,1257],{"class":96,"line":491},[94,1254,530],{"class":292},[94,1256,547],{"class":296},[94,1258,313],{"class":292},[13,1260,1261],{},"These Cientos composables now provide the same reactive benefits:",[25,1263,1264,1276,1293],{},[28,1265,1266,1269,1270,1090,1273],{},[31,1267,1268],{},"Reactive loading states"," with ",[36,1271,1272],{},"isLoading",[36,1274,1275],{},"progress",[28,1277,1278,1281,1282,1090,1285,1288,1289,1292],{},[31,1279,1280],{},"Structured access"," to ",[36,1283,1284],{},"nodes",[36,1286,1287],{},"materials"," based on ",[36,1290,1291],{},"useGraph"," composable",[28,1294,1295,1298],{},[31,1296,1297],{},"Consistent API"," across the TresJS ecosystem",[66,1300,1302],{"id":1301},"enhanced-event-system","Enhanced Event System",[13,1304,1305],{},"We've completely revamped the event system based on the pmndrs ecosystem standards, bringing significant improvements:",[719,1307,1309],{"id":1308},"key-changes","Key Changes",[25,1311,1312,1322,1328,1342],{},[28,1313,1314,1317,1318,1321],{},[31,1315,1316],{},"New event system"," based on the ",[36,1319,1320],{},"@pmndrs/pointer-events"," package for battle-tested reliability",[28,1323,1324,1327],{},[31,1325,1326],{},"First-intersected-only behavior",": Only the first intersected element will trigger pointer events, improving performance with complex scenes.",[28,1329,1330,1333,1334,1337,1338,1341],{},[31,1331,1332],{},"Native DOM event names",": Pointer events now follow exact DOM standards (e.g., ",[36,1335,1336],{},"@pointerdown"," instead of ",[36,1339,1340],{},"@pointer-down",").",[28,1343,1344,1350],{},[31,1345,1346,1347],{},"Removed ",[36,1348,1349],{},"useTresEventManager",": The composable has been removed in favor of the new system.",[719,1352,1354],{"id":1353},"migration-required","Migration Required",[13,1356,1357],{},[31,1358,1359],{},"Update pointer event names:",[84,1361,1363],{"className":282,"code":1362,"language":285,"meta":90,"style":90},"\u003C!-- ❌ Old v4 syntax -->\n\u003CTresMesh @pointer-down=\"handlePointerDown\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshBasicMaterial />\n\u003C/TresMesh>\n\n\u003C!-- ✅ New v5 syntax -->\n\u003CTresMesh @pointerdown=\"handlePointerDown\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshBasicMaterial />\n\u003C/TresMesh>\n",[36,1364,1365,1370,1394,1399,1404,1412,1416,1421,1442,1446,1450],{"__ignoreMap":90},[94,1366,1367],{"class":96,"line":97},[94,1368,1369],{"class":386},"\u003C!-- ❌ Old v4 syntax -->\n",[94,1371,1372,1374,1377,1380,1383,1385,1387,1390,1392],{"class":96,"line":316},[94,1373,293],{"class":292},[94,1375,1376],{"class":296},"TresMesh",[94,1378,1379],{"class":323}," @",[94,1381,1382],{"class":300},"pointer-down",[94,1384,307],{"class":292},[94,1386,569],{"class":104},[94,1388,1389],{"class":327},"handlePointerDown",[94,1391,569],{"class":104},[94,1393,313],{"class":292},[94,1395,1396],{"class":96,"line":340},[94,1397,1398],{"class":327},"  \u003CTresBoxGeometry />\n",[94,1400,1401],{"class":96,"line":357},[94,1402,1403],{"class":327},"  \u003CTresMeshBasicMaterial />\n",[94,1405,1406,1408,1410],{"class":96,"line":376},[94,1407,530],{"class":292},[94,1409,1376],{"class":296},[94,1411,313],{"class":292},[94,1413,1414],{"class":96,"line":383},[94,1415,380],{"emptyLinePlaceholder":379},[94,1417,1418],{"class":96,"line":390},[94,1419,1420],{"class":386},"\u003C!-- ✅ New v5 syntax -->\n",[94,1422,1423,1425,1427,1429,1432,1434,1436,1438,1440],{"class":96,"line":425},[94,1424,293],{"class":292},[94,1426,1376],{"class":296},[94,1428,1379],{"class":323},[94,1430,1431],{"class":300},"pointerdown",[94,1433,307],{"class":292},[94,1435,569],{"class":104},[94,1437,1389],{"class":327},[94,1439,569],{"class":104},[94,1441,313],{"class":292},[94,1443,1444],{"class":96,"line":449},[94,1445,1398],{"class":327},[94,1447,1448],{"class":96,"line":471},[94,1449,1403],{"class":327},[94,1451,1452,1454,1456],{"class":96,"line":477},[94,1453,530],{"class":292},[94,1455,1376],{"class":296},[94,1457,313],{"class":292},[13,1459,1460],{},[31,1461,1462],{},"Overlapping elements are handled differently:",[84,1464,1466],{"className":282,"code":1465,"language":285,"meta":90,"style":90},"\u003C!-- ❌ 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\u003C!-- ✅ New behavior: use 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",[36,1467,1468,1473,1495,1499,1503,1511,1535,1539,1543,1551,1555,1560,1582,1587,1592,1597,1602,1606,1610,1614,1618],{"__ignoreMap":90},[94,1469,1470],{"class":96,"line":97},[94,1471,1472],{"class":386},"\u003C!-- ❌ Old behavior: multiple overlapping objects could trigger events -->\n",[94,1474,1475,1477,1479,1481,1484,1486,1488,1491,1493],{"class":96,"line":316},[94,1476,293],{"class":292},[94,1478,1376],{"class":296},[94,1480,1379],{"class":323},[94,1482,1483],{"class":300},"click",[94,1485,307],{"class":292},[94,1487,569],{"class":104},[94,1489,1490],{"class":327},"handleClick",[94,1492,569],{"class":104},[94,1494,313],{"class":292},[94,1496,1497],{"class":96,"line":340},[94,1498,1398],{"class":327},[94,1500,1501],{"class":96,"line":357},[94,1502,1403],{"class":327},[94,1504,1505,1507,1509],{"class":96,"line":376},[94,1506,530],{"class":292},[94,1508,1376],{"class":296},[94,1510,313],{"class":292},[94,1512,1513,1515,1517,1519,1521,1523,1525,1527,1529,1532],{"class":96,"line":383},[94,1514,293],{"class":292},[94,1516,1376],{"class":296},[94,1518,1379],{"class":323},[94,1520,1483],{"class":300},[94,1522,307],{"class":292},[94,1524,569],{"class":104},[94,1526,1490],{"class":327},[94,1528,569],{"class":104},[94,1530,1531],{"class":292},">",[94,1533,1534],{"class":327}," \u003C!-- This might not trigger if behind first mesh -->\n",[94,1536,1537],{"class":96,"line":390},[94,1538,1398],{"class":327},[94,1540,1541],{"class":96,"line":425},[94,1542,1403],{"class":327},[94,1544,1545,1547,1549],{"class":96,"line":449},[94,1546,530],{"class":292},[94,1548,1376],{"class":296},[94,1550,313],{"class":292},[94,1552,1553],{"class":96,"line":471},[94,1554,380],{"emptyLinePlaceholder":379},[94,1556,1557],{"class":96,"line":477},[94,1558,1559],{"class":386},"\u003C!-- ✅ New behavior: use parent handler for overlapping elements -->\n",[94,1561,1562,1564,1567,1569,1571,1573,1575,1578,1580],{"class":96,"line":491},[94,1563,293],{"class":292},[94,1565,1566],{"class":296},"TresGroup",[94,1568,1379],{"class":323},[94,1570,1483],{"class":300},[94,1572,307],{"class":292},[94,1574,569],{"class":104},[94,1576,1577],{"class":327},"handleGroupClick",[94,1579,569],{"class":104},[94,1581,313],{"class":292},[94,1583,1584],{"class":96,"line":503},[94,1585,1586],{"class":327},"  \u003CTresMesh>\n",[94,1588,1589],{"class":96,"line":512},[94,1590,1591],{"class":327},"    \u003CTresBoxGeometry />\n",[94,1593,1594],{"class":96,"line":521},[94,1595,1596],{"class":327},"    \u003CTresMeshBasicMaterial />\n",[94,1598,1599],{"class":96,"line":527},[94,1600,1601],{"class":327},"  \u003C/TresMesh>\n",[94,1603,1604],{"class":96,"line":537},[94,1605,1586],{"class":327},[94,1607,1608],{"class":96,"line":542},[94,1609,1591],{"class":327},[94,1611,1612],{"class":96,"line":552},[94,1613,1596],{"class":327},[94,1615,1616],{"class":96,"line":579},[94,1617,1601],{"class":327},[94,1619,1620,1622,1624],{"class":96,"line":621},[94,1621,530],{"class":292},[94,1623,1566],{"class":296},[94,1625,313],{"class":292},[13,1627,1628,1629,1632,1633,1636,1637,49],{},"This change brings ",[31,1630,1631],{},"better performance",", ",[31,1634,1635],{},"more predictable event handling",", and ",[31,1638,1639],{},"consistency with web standards",[66,1641,1643],{"id":1642},"️-developer-experience-improvements","🛠️ Developer Experience Improvements",[17,1645,1647],{"id":1646},"breaking-changes-migration","💔 Breaking Changes & Migration",[66,1649,1651],{"id":1650},"removed-composables","Removed Composables",[13,1653,1654],{},"We've removed several composables that were either not true composables or have been replaced with better alternatives:",[25,1656,1657,1672,1682,1689,1697,1713,1721,1732],{},[28,1658,1659,1664,1665,1668,1669,1671],{},[31,1660,1661],{},[36,1662,1663],{},"useTresReady",": Use ",[36,1666,1667],{},"@ready"," event on ",[36,1670,558],{}," instead",[28,1673,1674,1664,1679,1681],{},[31,1675,1676],{},[36,1677,1678],{},"useSeek",[36,1680,1291],{}," or manual traversal functions",[28,1683,1684,1688],{},[31,1685,1686],{},[36,1687,1349],{},": Removed in favor of the new event system",[28,1690,1691,1696],{},[31,1692,1693],{},[36,1694,1695],{},"useRaycaster",": Use native Three.js raycasting or the new event system",[28,1698,1699,1664,1704,1707,1708,1668,1711],{},[31,1700,1701],{},[36,1702,1703],{},"useRenderLoop",[36,1705,1706],{},"useLoop"," composable or ",[36,1709,1710],{},"@loop",[36,1712,558],{},[28,1714,1715,1720],{},[31,1716,1717],{},[36,1718,1719],{},"useLogger",": Removed for simpler debugging approach",[28,1722,1723,1664,1728,1731],{},[31,1724,1725],{},[36,1726,1727],{},"useCamera",[36,1729,1730],{},"useTres()"," to access camera",[28,1733,1734,1739,1740,1743],{},[31,1735,1736],{},[36,1737,1738],{},"useTexture",": Moved to ",[36,1741,1742],{},"@tresjs/cientos"," for better organization",[719,1745,1747],{"id":1746},"migration-examples","Migration Examples",[13,1749,1750],{},[31,1751,1752,1753,409],{},"Replace ",[36,1754,1663],{},[84,1756,1758],{"className":282,"code":1757,"language":285,"meta":90,"style":90},"\u003C!-- ❌ Old v4 syntax -->\n\u003Cscript setup>\nconst { isReady } = useTresReady()\n\u003C/script>\n\n\u003C!-- ✅ New v5 syntax -->\n\u003Cscript setup>\nconst onReady = (context) => {\n  console.log('Renderer is ready:', context.renderer.instance)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas @ready=\"onReady\">\n    \u003C!-- Your 3D scene -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[36,1759,1760,1764,1774,1793,1801,1805,1809,1819,1839,1866,1870,1878,1882,1890,1912,1917,1925],{"__ignoreMap":90},[94,1761,1762],{"class":96,"line":97},[94,1763,1369],{"class":386},[94,1765,1766,1768,1770,1772],{"class":96,"line":316},[94,1767,293],{"class":292},[94,1769,297],{"class":296},[94,1771,301],{"class":300},[94,1773,313],{"class":292},[94,1775,1776,1778,1780,1783,1785,1787,1790],{"class":96,"line":340},[94,1777,393],{"class":319},[94,1779,324],{"class":323},[94,1781,1782],{"class":327}," isReady ",[94,1784,331],{"class":323},[94,1786,399],{"class":292},[94,1788,1789],{"class":100}," useTresReady",[94,1791,1792],{"class":327},"()\n",[94,1794,1795,1797,1799],{"class":96,"line":357},[94,1796,530],{"class":292},[94,1798,297],{"class":296},[94,1800,313],{"class":292},[94,1802,1803],{"class":96,"line":376},[94,1804,380],{"emptyLinePlaceholder":379},[94,1806,1807],{"class":96,"line":383},[94,1808,1420],{"class":386},[94,1810,1811,1813,1815,1817],{"class":96,"line":390},[94,1812,293],{"class":292},[94,1814,297],{"class":296},[94,1816,301],{"class":300},[94,1818,313],{"class":292},[94,1820,1821,1823,1826,1828,1830,1833,1835,1837],{"class":96,"line":425},[94,1822,393],{"class":319},[94,1824,1825],{"class":100}," onReady",[94,1827,399],{"class":292},[94,1829,402],{"class":323},[94,1831,1832],{"class":405},"context",[94,1834,416],{"class":323},[94,1836,419],{"class":319},[94,1838,422],{"class":323},[94,1840,1841,1843,1845,1847,1849,1852,1854,1857,1859,1861,1863],{"class":96,"line":449},[94,1842,969],{"class":327},[94,1844,49],{"class":292},[94,1846,922],{"class":100},[94,1848,443],{"class":327},[94,1850,1851],{"class":104},"'Renderer is ready:'",[94,1853,603],{"class":323},[94,1855,1856],{"class":327}," context",[94,1858,49],{"class":292},[94,1860,564],{"class":327},[94,1862,49],{"class":292},[94,1864,1865],{"class":327},"instance)\n",[94,1867,1868],{"class":96,"line":471},[94,1869,524],{"class":323},[94,1871,1872,1874,1876],{"class":96,"line":477},[94,1873,530],{"class":292},[94,1875,297],{"class":296},[94,1877,313],{"class":292},[94,1879,1880],{"class":96,"line":491},[94,1881,380],{"emptyLinePlaceholder":379},[94,1883,1884,1886,1888],{"class":96,"line":503},[94,1885,293],{"class":292},[94,1887,547],{"class":296},[94,1889,313],{"class":292},[94,1891,1892,1894,1896,1898,1901,1903,1905,1908,1910],{"class":96,"line":512},[94,1893,555],{"class":292},[94,1895,558],{"class":296},[94,1897,1379],{"class":323},[94,1899,1900],{"class":300},"ready",[94,1902,307],{"class":292},[94,1904,569],{"class":104},[94,1906,1907],{"class":327},"onReady",[94,1909,569],{"class":104},[94,1911,313],{"class":292},[94,1913,1914],{"class":96,"line":521},[94,1915,1916],{"class":386},"    \u003C!-- Your 3D scene -->\n",[94,1918,1919,1921,1923],{"class":96,"line":527},[94,1920,685],{"class":292},[94,1922,558],{"class":296},[94,1924,313],{"class":292},[94,1926,1927,1929,1931],{"class":96,"line":537},[94,1928,530],{"class":292},[94,1930,547],{"class":296},[94,1932,313],{"class":292},[13,1934,1935],{},[31,1936,1752,1937,409],{},[36,1938,1678],{},[84,1940,1942],{"className":282,"code":1941,"language":285,"meta":90,"style":90},"\u003Cscript setup>\n// ❌ Old v4 syntax\nconst { seek } = useSeek()\nconst body = seek(car, 'name', 'Octane_Body_0')\n\n// ✅ New v5 syntax - use useGraph\nconst { state: model } = useLoader(GLTFLoader, '/model.glb')\nconst scene = computed(() => model.value?.scene)\nconst { nodes } = useGraph(scene)\nconst body = computed(() => nodes.value?.Octane_Body_0)\n\u003C/script>\n",[36,1943,1944,1954,1959,1977,2004,2008,2013,2042,2074,2093,2120],{"__ignoreMap":90},[94,1945,1946,1948,1950,1952],{"class":96,"line":97},[94,1947,293],{"class":292},[94,1949,297],{"class":296},[94,1951,301],{"class":300},[94,1953,313],{"class":292},[94,1955,1956],{"class":96,"line":316},[94,1957,1958],{"class":386},"// ❌ Old v4 syntax\n",[94,1960,1961,1963,1965,1968,1970,1972,1975],{"class":96,"line":340},[94,1962,393],{"class":319},[94,1964,324],{"class":323},[94,1966,1967],{"class":327}," seek ",[94,1969,331],{"class":323},[94,1971,399],{"class":292},[94,1973,1974],{"class":100}," useSeek",[94,1976,1792],{"class":327},[94,1978,1979,1981,1984,1986,1989,1992,1994,1997,1999,2002],{"class":96,"line":357},[94,1980,393],{"class":319},[94,1982,1983],{"class":327}," body ",[94,1985,307],{"class":292},[94,1987,1988],{"class":100}," seek",[94,1990,1991],{"class":327},"(car",[94,1993,603],{"class":323},[94,1995,1996],{"class":104}," 'name'",[94,1998,603],{"class":323},[94,2000,2001],{"class":104}," 'Octane_Body_0'",[94,2003,509],{"class":327},[94,2005,2006],{"class":96,"line":376},[94,2007,380],{"emptyLinePlaceholder":379},[94,2009,2010],{"class":96,"line":383},[94,2011,2012],{"class":386},"// ✅ New v5 syntax - use useGraph\n",[94,2014,2015,2017,2019,2021,2023,2026,2028,2030,2032,2035,2037,2040],{"class":96,"line":390},[94,2016,393],{"class":319},[94,2018,324],{"class":323},[94,2020,830],{"class":327},[94,2022,409],{"class":323},[94,2024,2025],{"class":327}," model ",[94,2027,331],{"class":323},[94,2029,399],{"class":292},[94,2031,857],{"class":100},[94,2033,2034],{"class":327},"(GLTFLoader",[94,2036,603],{"class":323},[94,2038,2039],{"class":104}," '/model.glb'",[94,2041,509],{"class":327},[94,2043,2044,2046,2049,2051,2054,2056,2059,2061,2063,2065,2068,2071],{"class":96,"line":425},[94,2045,393],{"class":319},[94,2047,2048],{"class":327}," scene ",[94,2050,307],{"class":292},[94,2052,2053],{"class":100}," computed",[94,2055,443],{"class":327},[94,2057,2058],{"class":323},"()",[94,2060,419],{"class":319},[94,2062,835],{"class":327},[94,2064,49],{"class":292},[94,2066,2067],{"class":327},"value",[94,2069,2070],{"class":292},"?.",[94,2072,2073],{"class":327},"scene)\n",[94,2075,2076,2078,2080,2083,2085,2087,2090],{"class":96,"line":449},[94,2077,393],{"class":319},[94,2079,324],{"class":323},[94,2081,2082],{"class":327}," nodes ",[94,2084,331],{"class":323},[94,2086,399],{"class":292},[94,2088,2089],{"class":100}," useGraph",[94,2091,2092],{"class":327},"(scene)\n",[94,2094,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115,2117],{"class":96,"line":471},[94,2096,393],{"class":319},[94,2098,1983],{"class":327},[94,2100,307],{"class":292},[94,2102,2053],{"class":100},[94,2104,443],{"class":327},[94,2106,2058],{"class":323},[94,2108,419],{"class":319},[94,2110,1147],{"class":327},[94,2112,49],{"class":292},[94,2114,2067],{"class":327},[94,2116,2070],{"class":292},[94,2118,2119],{"class":327},"Octane_Body_0)\n",[94,2121,2122,2124,2126],{"class":96,"line":477},[94,2123,530],{"class":292},[94,2125,297],{"class":296},[94,2127,313],{"class":292},[13,2129,2130],{},[31,2131,1752,2132,409],{},[36,2133,1703],{},[84,2135,2137],{"className":282,"code":2136,"language":285,"meta":90,"style":90},"\u003Cscript setup>\n// ❌ Old v4 syntax\nconst { onLoop } = useRenderLoop()\nonLoop(({ delta, elapsedTime }) => {\n  // Animation logic\n})\n\n// ✅ New v5 syntax\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ delta, elapsedTime }) => {\n  // Animation logic\n})\n\u003C/script>\n",[36,2138,2139,2149,2153,2171,2196,2201,2207,2211,2216,2234,2255,2259,2265],{"__ignoreMap":90},[94,2140,2141,2143,2145,2147],{"class":96,"line":97},[94,2142,293],{"class":292},[94,2144,297],{"class":296},[94,2146,301],{"class":300},[94,2148,313],{"class":292},[94,2150,2151],{"class":96,"line":316},[94,2152,1958],{"class":386},[94,2154,2155,2157,2159,2162,2164,2166,2169],{"class":96,"line":340},[94,2156,393],{"class":319},[94,2158,324],{"class":323},[94,2160,2161],{"class":327}," onLoop ",[94,2163,331],{"class":323},[94,2165,399],{"class":292},[94,2167,2168],{"class":100}," useRenderLoop",[94,2170,1792],{"class":327},[94,2172,2173,2176,2178,2181,2184,2186,2189,2192,2194],{"class":96,"line":357},[94,2174,2175],{"class":100},"onLoop",[94,2177,443],{"class":327},[94,2179,2180],{"class":323},"({",[94,2182,2183],{"class":405}," delta",[94,2185,603],{"class":323},[94,2187,2188],{"class":405}," elapsedTime",[94,2190,2191],{"class":323}," })",[94,2193,419],{"class":319},[94,2195,422],{"class":323},[94,2197,2198],{"class":96,"line":376},[94,2199,2200],{"class":386},"  // Animation logic\n",[94,2202,2203,2205],{"class":96,"line":383},[94,2204,331],{"class":323},[94,2206,509],{"class":327},[94,2208,2209],{"class":96,"line":390},[94,2210,380],{"emptyLinePlaceholder":379},[94,2212,2213],{"class":96,"line":425},[94,2214,2215],{"class":386},"// ✅ New v5 syntax\n",[94,2217,2218,2220,2222,2225,2227,2229,2232],{"class":96,"line":449},[94,2219,393],{"class":319},[94,2221,324],{"class":323},[94,2223,2224],{"class":327}," onBeforeRender ",[94,2226,331],{"class":323},[94,2228,399],{"class":292},[94,2230,2231],{"class":100}," useLoop",[94,2233,1792],{"class":327},[94,2235,2236,2239,2241,2243,2245,2247,2249,2251,2253],{"class":96,"line":471},[94,2237,2238],{"class":100},"onBeforeRender",[94,2240,443],{"class":327},[94,2242,2180],{"class":323},[94,2244,2183],{"class":405},[94,2246,603],{"class":323},[94,2248,2188],{"class":405},[94,2250,2191],{"class":323},[94,2252,419],{"class":319},[94,2254,422],{"class":323},[94,2256,2257],{"class":96,"line":477},[94,2258,2200],{"class":386},[94,2260,2261,2263],{"class":96,"line":491},[94,2262,331],{"class":323},[94,2264,509],{"class":327},[94,2266,2267,2269,2271],{"class":96,"line":503},[94,2268,530],{"class":292},[94,2270,297],{"class":296},[94,2272,313],{"class":292},[66,2274,2276],{"id":2275},"trescanvas-event-renaming","TresCanvas Event Renaming",[13,2278,2279],{},"Update your event handlers:",[84,2281,2283],{"className":282,"code":2282,"language":285,"meta":90,"style":90},"\u003C!-- Before (v4) -->\n\u003CTresCanvas \n  @after-render=\"handleAfterRender\"\n  @before-render=\"handleBeforeRender\"\n>\n\n\u003C!-- After (v5) -->\n\u003CTresCanvas \n  @render=\"handleRender\"\n  @before-loop=\"handleBeforeLoop\"\n>\n",[36,2284,2285,2290,2298,2316,2332,2336,2340,2345,2350,2355,2360],{"__ignoreMap":90},[94,2286,2287],{"class":96,"line":97},[94,2288,2289],{"class":386},"\u003C!-- Before (v4) -->\n",[94,2291,2292,2294,2296],{"class":96,"line":316},[94,2293,293],{"class":292},[94,2295,558],{"class":296},[94,2297,870],{"class":327},[94,2299,2300,2303,2306,2308,2310,2313],{"class":96,"line":340},[94,2301,2302],{"class":323},"  @",[94,2304,2305],{"class":300},"after-render",[94,2307,307],{"class":292},[94,2309,569],{"class":104},[94,2311,2312],{"class":327},"handleAfterRender",[94,2314,2315],{"class":104},"\"\n",[94,2317,2318,2320,2323,2325,2327,2330],{"class":96,"line":357},[94,2319,2302],{"class":323},[94,2321,2322],{"class":300},"before-render",[94,2324,307],{"class":292},[94,2326,569],{"class":104},[94,2328,2329],{"class":327},"handleBeforeRender",[94,2331,2315],{"class":104},[94,2333,2334],{"class":96,"line":376},[94,2335,313],{"class":292},[94,2337,2338],{"class":96,"line":383},[94,2339,380],{"emptyLinePlaceholder":379},[94,2341,2342],{"class":96,"line":390},[94,2343,2344],{"class":327},"\u003C!-- After (v5) -->\n",[94,2346,2347],{"class":96,"line":425},[94,2348,2349],{"class":327},"\u003CTresCanvas \n",[94,2351,2352],{"class":96,"line":449},[94,2353,2354],{"class":327},"  @render=\"handleRender\"\n",[94,2356,2357],{"class":96,"line":471},[94,2358,2359],{"class":327},"  @before-loop=\"handleBeforeLoop\"\n",[94,2361,2362],{"class":96,"line":477},[94,2363,313],{"class":327},[17,2365,2367],{"id":2366},"ready-for-nuxt-4-with-brand-new-devtools","Ready for Nuxt 4 with brand new devtools!",[13,2369,2370],{},"Along with TresJS v5, we're excited to announce full support for Nuxt 4, including a brand new TresJS Devtools extension for Nuxt devtools completely remade from the ground up.",[81,2372,2373,2394],{},[84,2374,2376],{"className":86,"code":2375,"filename":88,"language":89,"meta":90,"style":90},"npx nuxi@latest module add tresjs\n",[36,2377,2378],{"__ignoreMap":90},[94,2379,2380,2382,2385,2388,2391],{"class":96,"line":97},[94,2381,101],{"class":100},[94,2383,2384],{"class":104}," nuxi@latest",[94,2386,2387],{"class":104}," module",[94,2389,2390],{"class":104}," add",[94,2392,2393],{"class":104}," tresjs\n",[84,2395,2397],{"className":86,"code":2396,"filename":130,"language":89,"meta":90,"style":90},"pnpx nuxi@latest module add tresjs\n",[36,2398,2399],{"__ignoreMap":90},[94,2400,2401,2404,2406,2408,2410],{"class":96,"line":97},[94,2402,2403],{"class":100},"pnpx",[94,2405,2384],{"class":104},[94,2407,2387],{"class":104},[94,2409,2390],{"class":104},[94,2411,2393],{"class":104},[13,2413,2414],{},[73,2415],{"src":2416,"alt":2417},"/blog/tresjs-v5/tresjs-nuxt-devtools.png","TresJS Devtools for Nuxt 4",[66,2419,2421],{"id":2420},"inspect-and-debug-your-scene","Inspect and debug your scene",[25,2423,2424,2430,2436],{},[28,2425,2426,2429],{},[31,2427,2428],{},"Scene graph visualization",": Explore your 3D scene hierarchy",[28,2431,2432,2435],{},[31,2433,2434],{},"Real-time property editing",": Modify object properties on the fly",[28,2437,2438,2441],{},[31,2439,2440],{},"Copy values",": Easily copy object properties for use in your code",[13,2443,2444],{},[73,2445],{"src":2446,"alt":2447},"/blog/tresjs-v5/tresjs-devtools-scene-graph.png","TresJS Devtools Scene Graph",[66,2449,2451],{"id":2450},"real-time-performance-monitoring","Real-time performance monitoring",[25,2453,2454,2460,2466],{},[28,2455,2456,2459],{},[31,2457,2458],{},"FPS counter",": Monitor your application's frame rate",[28,2461,2462,2465],{},[31,2463,2464],{},"Memory usage",": Keep an eye on memory consumption",[28,2467,2468,2471],{},[31,2469,2470],{},"Draw calls",": Analyze rendering performance",[13,2473,2474],{},[73,2475],{"src":2476,"alt":2477},"/blog/tresjs-v5/tresjs-devtools-performance.png","TresJS Devtools Performance",[17,2479,2481],{"id":2480},"ecosystem-updates","🌐 Ecosystem Updates",[13,2483,2484],{},"With v5, the entire TresJS ecosystem is evolving:",[25,2486,2487,2495,2501],{},[28,2488,2489,2491,2492,2494],{},[31,2490,1742],{}," will receive ",[36,2493,1738],{}," and other utility composables",[28,2496,2497,2500],{},[31,2498,2499],{},"Better modularization"," allows you to import only what you need",[28,2502,2503,2505],{},[31,2504,1297],{}," across all TresJS packages",[17,2507,2509],{"id":2508},"looking-forward","🔮 Looking Forward",[13,2511,2512],{},"TresJS v5 sets the foundation for exciting future developments:",[25,2514,2515,2521,2527,2533],{},[28,2516,2517,2520],{},[31,2518,2519],{},"Full WebGPU feature support"," as the specification stabilizes",[28,2522,2523,2526],{},[31,2524,2525],{},"Enhanced compute shader integration"," for advanced effects",[28,2528,2529,2532],{},[31,2530,2531],{},"Better Vue 3 Composition API integration"," with upcoming features",[28,2534,2535,2538],{},[31,2536,2537],{},"Expanded ecosystem"," with specialized packages for different use cases",[17,2540,2542],{"id":2541},"️-getting-started-with-v5","🛠️ Getting Started with v5",[13,2544,2545],{},"Ready to upgrade? Here's how:",[84,2547,2549],{"className":86,"code":2548,"language":89,"meta":90,"style":90},"# Update TresJS\npnpm add @tresjs/tres@latest\n\n# Update your dependencies\npnpm add @tresjs/cientos@latest # for useTexture and other utilities\n",[36,2550,2551,2556,2565,2569,2574],{"__ignoreMap":90},[94,2552,2553],{"class":96,"line":97},[94,2554,2555],{"class":386},"# Update TresJS\n",[94,2557,2558,2560,2562],{"class":96,"line":316},[94,2559,130],{"class":100},[94,2561,2390],{"class":104},[94,2563,2564],{"class":104}," @tresjs/tres@latest\n",[94,2566,2567],{"class":96,"line":340},[94,2568,380],{"emptyLinePlaceholder":379},[94,2570,2571],{"class":96,"line":357},[94,2572,2573],{"class":386},"# Update your dependencies\n",[94,2575,2576,2578,2580,2583],{"class":96,"line":376},[94,2577,130],{"class":100},[94,2579,2390],{"class":104},[94,2581,2582],{"class":104}," @tresjs/cientos@latest",[94,2584,2585],{"class":386}," # for useTexture and other utilities\n",[13,2587,2588,2589,2594],{},"Check out our ",[711,2590,2593],{"href":2591,"rel":2592},"https://docs.tresjs.org/getting-started/upgrade-guide",[715],"migration guide"," for step-by-step instructions on updating your existing projects.",[17,2596,2598],{"id":2597},"community-contributors","🙏 Community & Contributors",[13,2600,2601],{},"TresJS v5 wouldn't be possible without our amazing community. Special thanks to everyone who provided feedback, reported issues, and contributed code during the development process.",[13,2603,2604,2605,2610],{},"Join our ",[711,2606,2609],{"href":2607,"rel":2608},"https://discord.gg/UCr96AQmWn",[715],"Discord community"," to share your v5 creations and get help with migration!",[2612,2613],"hr",{},[13,2615,2616],{},[2617,2618,2619,2620,2625],"em",{},"Ready to build the future of web 3D with TresJS v5? ",[711,2621,2624],{"href":2622,"rel":2623},"https://docs.tresjs.org/guide/getting-started",[715],"Get started today"," and experience the next generation of declarative Three.js development!",[2612,2627],{},[2629,2630,2632,2646],"card",{"variant":2631},"subtle",[2633,2634,2637],"div",{"className":2635},[2636],"w-2/3",[13,2638,2639,2640,2645],{},"In the loving memory of our friend ",[711,2641,2644],{"href":2642,"rel":2643},"https://github.com/justserdar",[715],"Serdar Yerdelen",", we want to dedicate this release to him, the most genuine and gentle soul in our community, you will be deeply missed.",[73,2647],{"src":2648,"className":2649},"/blog/tresjs-v5/serdar.png",[2650,2651,2652],"rounded-full","w-12","h-12",[2654,2655,2656],"style",{},"html pre.shiki code .s0faT, html code.shiki .s0faT{--shiki-light:#1E66F5;--shiki-light-font-style:italic;--shiki-default:#1E66F5;--shiki-default-font-style:italic;--shiki-dark:#8CAAEE;--shiki-dark-font-style:italic}html pre.shiki code .s9Zht, html code.shiki .s9Zht{--shiki-light:#40A02B;--shiki-default:#40A02B;--shiki-dark:#A6D189}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 .sWdzt, html code.shiki .sWdzt{--shiki-light:#179299;--shiki-default:#179299;--shiki-dark:#81C8BE}html pre.shiki code .slJ5s, html code.shiki .slJ5s{--shiki-light:#1E66F5;--shiki-default:#1E66F5;--shiki-dark:#8CAAEE}html pre.shiki code .s1cdE, html code.shiki .s1cdE{--shiki-light:#DF8E1D;--shiki-default:#DF8E1D;--shiki-dark:#E5C890}html pre.shiki code .sZyUJ, html code.shiki .sZyUJ{--shiki-light:#8839EF;--shiki-default:#8839EF;--shiki-dark:#CA9EE6}html pre.shiki code .spKPg, html code.shiki .spKPg{--shiki-light:#7C7F93;--shiki-default:#7C7F93;--shiki-dark:#949CBB}html pre.shiki code .s9Av-, html code.shiki .s9Av-{--shiki-light:#4C4F69;--shiki-default:#4C4F69;--shiki-dark:#C6D0F5}html pre.shiki code .sMnCH, html code.shiki .sMnCH{--shiki-light:#7C7F93;--shiki-light-font-style:italic;--shiki-default:#7C7F93;--shiki-default-font-style:italic;--shiki-dark:#949CBB;--shiki-dark-font-style:italic}html pre.shiki code .sQnVB, html code.shiki .sQnVB{--shiki-light:#E64553;--shiki-light-font-style:italic;--shiki-default:#E64553;--shiki-default-font-style:italic;--shiki-dark:#EA999C;--shiki-dark-font-style:italic}html pre.shiki code .sVAQX, html code.shiki .sVAQX{--shiki-light:#DF8E1D;--shiki-light-font-style:italic;--shiki-default:#DF8E1D;--shiki-default-font-style:italic;--shiki-dark:#E5C890;--shiki-dark-font-style:italic}html pre.shiki code .sVNBm, html code.shiki .sVNBm{--shiki-light:#8839EF;--shiki-light-font-weight:bold;--shiki-default:#8839EF;--shiki-default-font-weight:bold;--shiki-dark:#CA9EE6;--shiki-dark-font-weight:bold}html pre.shiki code .sREMW, html code.shiki .sREMW{--shiki-light:#FE640B;--shiki-default:#FE640B;--shiki-dark:#EF9F76}",{"title":90,"searchDepth":316,"depth":316,"links":2658},[2659,2667,2671,2675,2676,2677,2678],{"id":19,"depth":316,"text":20,"children":2660},[2661,2662,2663,2664,2665,2666],{"id":68,"depth":340,"text":69},{"id":195,"depth":340,"text":196},{"id":240,"depth":340,"text":241},{"id":701,"depth":340,"text":702},{"id":1301,"depth":340,"text":1302},{"id":1642,"depth":340,"text":1643},{"id":1646,"depth":316,"text":1647,"children":2668},[2669,2670],{"id":1650,"depth":340,"text":1651},{"id":2275,"depth":340,"text":2276},{"id":2366,"depth":316,"text":2367,"children":2672},[2673,2674],{"id":2420,"depth":340,"text":2421},{"id":2450,"depth":340,"text":2451},{"id":2480,"depth":316,"text":2481},{"id":2508,"depth":316,"text":2509},{"id":2541,"depth":316,"text":2542},{"id":2597,"depth":316,"text":2598},"release","2025-09-22","Introducing Tres 5.0 with experimentalWebGPU support, reimagined event system and enhanced developer experience",false,"md",{},"/blog/tresjs-v5",{"title":5,"description":2681},"blog/tresjs-v5","/blog/tresjs-v5/tresjs-v5-thumbnail.png",null,"L2oVIaaDomz_1ZbjtxyS2xN2as7fOChD2smiCCxbh2o",{"id":2692,"title":2693,"author":2694,"body":2695,"category":3065,"date":3066,"description":3067,"draft":2682,"extension":2683,"meta":3068,"navigation":379,"path":3069,"seo":3070,"stem":3071,"thumbnail":2709,"url":2689,"__hash__":3072,"authors":3073},"blog/blog/tresjs-new-website-and-docs.md","New look, new docs, new website",[7,8],{"type":10,"value":2696,"toc":3056},[2697,2700,2704,2710,2723,2797,2800,2804,2825,2828,2835,2846,2850,2859,2862,2877,2880,2886,2890,2910,2913,2921,2928,2932,2935,2946,2986,2997,3001,3004,3019,3040,3044,3053],[13,2698,2699],{},"TresJS has grown a lot since we started in 2022, and tresjs.org has been the main entry point when you want to start you journey with 3D on Vue. It was time to give it a new look and feel that matches the current state of the library, modern and powerful, but same sprit as the beginning.",[17,2701,2703],{"id":2702},"new-design","New design",[13,2705,2706],{},[73,2707],{"alt":2708,"src":2709},"New TresJS website","/blog/tresjs-new-website-and-docs/tresjs-new-landing.png",[13,2711,2712,2713,2716,2717,2722],{},"We decided to refactor the website to ",[31,2714,2715],{},"Nuxt 4",", and in an effort to have a consistent design language across the TresJS ecosystem, we are leveraging the incredible ",[711,2718,2721],{"href":2719,"rel":2720},"https://ui.nuxt.com/",[715],"Nuxt UI","\nlibrary.",[2633,2724,2729,2762,2779],{"className":2725},[2726,2727,2728],"grid","sm:grid-cols-2","gap-2",[2633,2730,2734,2753],{"className":2731},[2732,2733],"flex","flex-col",[2735,2736,2741],"nuxt-link",{"className":2737,"target":2739,"to":2740},[2738],"hover:border-transparent","_blank","https://docs.tresjs.org",[2742,2743],"nuxt-img",{"alt":2744,"className":2745,"height":2750,"src":2751,"width":2752},"TresJS Docs",[2746,2747,2748,2749],"m-0","border","rounded-md","border-gray-200",375,"/blog/tresjs-new-website-and-docs/docs.tresjs.org.png",600,[94,2754,2759],{"className":2755},[2756,2757,2758],"italic","text-xs","text-gray-500",[13,2760,2761],{},"New docs website",[2633,2763,2765,2774],{"className":2764},[2732,2733],[2735,2766,2769],{"className":2767,"target":2739,"to":2768},[2738],"https://docs.tresjs.org/getting-started/installation#nuxt-project",[2742,2770],{"alt":2771,"className":2772,"height":2750,"src":2773,"width":2752},"TresJS Nuxt Devtools",[2746,2747,2748,2749],"/blog/tresjs-new-website-and-docs/tresjs-devtools.png",[94,2775,2777],{"className":2776},[2756,2757,2758],[13,2778,2771],{},[2633,2780,2782,2791],{"className":2781},[2732,2733],[2735,2783,2786],{"className":2784,"target":2739,"to":2785},[2738],"https://lab.tresjs.org",[2742,2787],{"alt":2788,"className":2789,"height":2750,"src":2790,"width":2752},"TresJS Labs",[2746,2747,2748,2749],"/blog/tresjs-new-website-and-docs/labs.png",[94,2792,2794],{"className":2793},[2756,2757,2758],[13,2795,2796],{},"New labs website",[13,2798,2799],{},"This is just a glance towards many improvements on the ecosystem",[17,2801,2803],{"id":2802},"same-spirit","Same spirit",[13,2805,2806,2807,2812,2813,2818,2819,2824],{},"The brand is made to be minimalist and playful, we chosed ",[711,2808,2811],{"href":2809,"rel":2810},"https://fonts.google.com/specimen/Manrope",[715],"Manrope"," for the headlines, ",[711,2814,2817],{"href":2815,"rel":2816},"https://fonts.google.com/specimen/Inter",[715],"Inter"," stayed as the main font and mono is now ",[711,2820,2823],{"href":2821,"rel":2822},"https://vercel.com/font",[715],"Geist Mono"," from Vercel, creating a lot of contrast between bold headers and body text.",[2826,2827],"design-kit-board",{},[13,2829,2830,2831,2834],{},"We also incorporated some elements to make it feel like a technical blueprint, being ",[31,2832,2833],{},"Tres code",": the schematics to bring those interactive experiences to life 🤓.",[2836,2837,2840],"read-more",{"icon":2838,"to":2839},"i-lucide-palette","/design-kit",[13,2841,2842,2843,49],{},"Discover the ",[31,2844,2845],{},"TresJS Design Kit",[17,2847,2849],{"id":2848},"new-docs","New Docs",[13,2851,2852,2853,2858],{},"We also migrate our documentation from previous ",[711,2854,2857],{"href":2855,"rel":2856},"https://vitepress.dev/",[715],"Vitepress"," to a tailored Nuxt 4 + Nuxt UI v4 customized Docs template. And we have to warn you, we were highly \"inspired\" (shamelessly copy 😜) by ideas from the Nuxt website.",[13,2860,2861],{},"Like the new navigation where you can easily jump between categories:",[2863,2864,2872],"video",{":controls":2865,"className":2866,"controls":379,"poster":2871},"true",[2867,2868,2869,2870,2747,2749],"rounded-lg","w-full","aspect-video","overflow-hidden","/blog/tresjs-new-website-and-docs/docs-navigation-poster.png",[2873,2874],"source",{"src":2875,"type":2876},"/blog/tresjs-new-website-and-docs/docs-navigation.mp4","video/mp4",[13,2878,2879],{},"Or the other side (right), you can also navegate through each page's table of contents as well as community shortcuts.",[13,2881,2882],{},[73,2883],{"alt":2884,"src":2885},"Table of Contents","/blog/tresjs-new-website-and-docs/table-contents.png",[17,2887,2889],{"id":2888},"search-command-palette","Search command palette",[13,2891,2892,2893,2897,2898,2901,2902,2909],{},"You can now navigate faster by hitting ",[2894,2895],"kbd",{"value":2896},"meta"," ",[2894,2899],{"value":2900},"K",". We leverage the Nuxt UI ",[711,2903,2906],{"href":2904,"rel":2905},"https://ui.nuxt.com/components/command-palette",[715],[36,2907,2908],{},"\u003CCommandPalette>"," components combined with Nuxt Content data (search & navigation) to provide a better search experience.",[13,2911,2912],{},"With the command palette, you can:",[25,2914,2915,2918],{},[28,2916,2917],{},"Jump to a page",[28,2919,2920],{},"Search in the documentation",[2863,2922,2925],{":controls":2865,"className":2923,"controls":379,"poster":2924},[2867,2868,2869,2870,2747,2749],"/blog/tresjs-new-website-and-docs/search-poster.png",[2873,2926],{"src":2927,"type":2876},"/blog/tresjs-new-website-and-docs/search.mp4",[17,2929,2931],{"id":2930},"cookbook-and-community-resources","Cookbook and community resources",[13,2933,2934],{},"We heard your feedback and we improved the format of the Cookbook recipes with step by step guides and we added a whole new page dedicated to Community resources, such as:",[25,2936,2937,2940,2943],{},[28,2938,2939],{},"Community plugins and packages",[28,2941,2942],{},"Talks",[28,2944,2945],{},"TresJS courses",[2633,2947,2950,2968],{"className":2948},[2726,2727,2949],"gap-4",[2633,2951,2953,2962],{"className":2952},[2732,2733],[2735,2954,2957],{"className":2955,"target":2739,"to":2956},[2738],"https://docs.tresjs.org/cookbook",[2742,2958],{"alt":2959,"className":2960,"height":2750,"src":2961,"width":2752},"TresJS Cookbook recipes",[2746,2747,2748,2749],"/blog/tresjs-new-website-and-docs/cookbook-recipes.png",[94,2963,2965],{"className":2964},[2756,2757,2758],[13,2966,2967],{},"Cookbook 🍳🧑‍🍳",[2633,2969,2971,2980],{"className":2970},[2732,2733],[2735,2972,2975],{"className":2973,"target":2739,"to":2974},[2738],"https://docs.tresjs.org/community/awesome-resources",[2742,2976],{"alt":2977,"className":2978,"height":2750,"src":2979,"width":2752},"TresJS Community resources",[2746,2747,2748,2749],"/blog/tresjs-new-website-and-docs/community-resources.png",[94,2981,2983],{"className":2982},[2756,2757,2758],[13,2984,2985],{},"Community resources",[2836,2987,2990],{"icon":2988,"to":2989},"i-lucide-pencil","https://github.com/Tresjs/tres/edit/next/docs/content/5.community/awesome-resources.md",[13,2991,2992,2993,2996],{},"If you want to showcase your own packages or resources, edit this page ",[36,2994,2995],{},"tresjs/tres/docs"," on Github.",[17,2998,3000],{"id":2999},"whats-next","What's next?",[13,3002,3003],{},"This new websites are just the beginning of upcoming changes we are planing for the ecosystem, some of them are:",[25,3005,3006,3011,3016],{},[28,3007,3008,3009],{},"New docs for ",[36,3010,1742],{},[28,3012,3008,3013],{},[36,3014,3015],{},"@tresjs/postprocessing",[28,3017,3018],{},"Contributors page",[13,3020,3021,49],{},[31,3022,3023,3024,1632,3029,3034,3035],{},"We are looking forward to your feedback on ",[711,3025,3028],{"href":3026,"rel":3027},"https://x.com/tresjs_dev",[715],"Twitter",[711,3030,3033],{"href":3031,"rel":3032},"https://discord.gg/WTpvaxr5",[715],"Discord"," or ",[711,3036,3039],{"href":3037,"rel":3038},"https://github.com/tresjs/tresjs.org",[715],"GitHub",[17,3041,3043],{"id":3042},"big-shoutout-to-the-nuxt-ui-team","Big shoutout to the Nuxt UI team",[13,3045,3046,3047,3052],{},"We want to give a big shoutout to the",[711,3048,3051],{"href":3049,"rel":3050},"https://nuxt.com/blog/nuxt-ui-v4",[715]," Nuxt UI team"," for their incredible work on the library and for making all the pro components available for free. We are very grateful for their support and for the incredible library they have created.",[13,3054,3055],{},"Thank you for reading this blog post, and happy 3D ✌️",{"title":90,"searchDepth":316,"depth":316,"links":3057},[3058,3059,3060,3061,3062,3063,3064],{"id":2702,"depth":316,"text":2703},{"id":2802,"depth":316,"text":2803},{"id":2848,"depth":316,"text":2849},{"id":2888,"depth":316,"text":2889},{"id":2930,"depth":316,"text":2931},{"id":2999,"depth":316,"text":3000},{"id":3042,"depth":316,"text":3043},"announcement","2025-10-01","We are trilled to release the new tresjs.org and docs.tresjs.org, powered by Nuxt UI.",{},"/blog/tresjs-new-website-and-docs",{"title":2693,"description":3067},"blog/tresjs-new-website-and-docs","P6ob-Xih9CeUEJSxpFvomwjrKS_L_zGix2pi8gBw7VY",[3074,3080],{"name":3075,"description":3076,"avatar":3077,"to":3079,"target":2739},"Alvaro Saburido","@alvarosabu",{"src":3078},"/avatars/alvarosabu.png","https://alvarosaburido.dev",{"name":3081,"description":3082,"avatar":3083,"to":3085,"target":2739},"Tino Koch","@tinoooo",{"src":3084},"/avatars/tino-koch.jpeg","https://github.com/tinoooo",1759336368857]