[{"data":1,"prerenderedAt":9149},["ShallowReactive",2],{"blog":3,"author-alvarosabu":9038,"author-tino-koch":9054,"author-damien-montastier":9071,"formatted-blog":9087},[4,409,3074,3763,4676,6648,6886,7748],{"id":5,"title":6,"author":7,"body":10,"category":398,"date":399,"description":400,"draft":401,"extension":402,"meta":403,"navigation":196,"path":404,"seo":405,"stem":406,"thumbnail":28,"url":407,"__hash__":408},"blog/blog/tresjs-new-website-and-docs.md","New look, new docs, new website",[8,9],"alvarosabu","tino-koch",{"type":11,"value":12,"toc":387},"minimark",[13,17,22,29,45,121,124,128,149,152,159,171,175,184,187,203,206,212,216,237,240,250,257,261,264,275,315,326,330,333,349,371,375,384],[14,15,16],"p",{},"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.",[18,19,21],"h2",{"id":20},"new-design","New design",[14,23,24],{},[25,26],"img",{"alt":27,"src":28},"New TresJS website","/blog/tresjs-new-website-and-docs/tresjs-new-landing.png",[14,30,31,32,36,37,44],{},"We decided to refactor the website to ",[33,34,35],"strong",{},"Nuxt 4",", and in an effort to have a consistent design language across the TresJS ecosystem, we are leveraging the incredible ",[38,39,43],"a",{"href":40,"rel":41},"https://ui.nuxt.com/",[42],"nofollow","Nuxt UI","\nlibrary.",[46,47,52,86,103],"div",{"className":48},[49,50,51],"grid","sm:grid-cols-2","gap-2",[46,53,57,76],{"className":54},[55,56],"flex","flex-col",[58,59,64],"nuxt-link",{"className":60,"target":62,"to":63},[61],"hover:border-transparent","_blank","https://docs.tresjs.org",[65,66],"nuxt-img",{"alt":67,"className":68,"height":73,"src":74,"width":75},"TresJS Docs",[69,70,71,72],"m-0","border","rounded-md","border-gray-200",375,"/blog/tresjs-new-website-and-docs/docs.tresjs.org.png",600,[77,78,83],"span",{"className":79},[80,81,82],"italic","text-xs","text-gray-500",[14,84,85],{},"New docs website",[46,87,89,98],{"className":88},[55,56],[58,90,93],{"className":91,"target":62,"to":92},[61],"https://docs.tresjs.org/getting-started/installation#nuxt-project",[65,94],{"alt":95,"className":96,"height":73,"src":97,"width":75},"TresJS Nuxt Devtools",[69,70,71,72],"/blog/tresjs-new-website-and-docs/tresjs-devtools.png",[77,99,101],{"className":100},[80,81,82],[14,102,95],{},[46,104,106,115],{"className":105},[55,56],[58,107,110],{"className":108,"target":62,"to":109},[61],"https://lab.tresjs.org",[65,111],{"alt":112,"className":113,"height":73,"src":114,"width":75},"TresJS Labs",[69,70,71,72],"/blog/tresjs-new-website-and-docs/labs.png",[77,116,118],{"className":117},[80,81,82],[14,119,120],{},"New labs website",[14,122,123],{},"This is just a glance towards many improvements on the ecosystem",[18,125,127],{"id":126},"same-spirit","Same spirit",[14,129,130,131,136,137,142,143,148],{},"The brand is made to be minimalist and playful, we chosed ",[38,132,135],{"href":133,"rel":134},"https://fonts.google.com/specimen/Manrope",[42],"Manrope"," for the headlines, ",[38,138,141],{"href":139,"rel":140},"https://fonts.google.com/specimen/Inter",[42],"Inter"," stayed as the main font and mono is now ",[38,144,147],{"href":145,"rel":146},"https://vercel.com/font",[42],"Geist Mono"," from Vercel, creating a lot of contrast between bold headers and body text.",[150,151],"design-kit-board",{},[14,153,154,155,158],{},"We also incorporated some elements to make it feel like a technical blueprint, being ",[33,156,157],{},"Tres code",": the schematics to bring those interactive experiences to life 🤓.",[160,161,164],"read-more",{"icon":162,"to":163},"i-lucide-palette","/design-kit",[14,165,166,167,170],{},"Discover the ",[33,168,169],{},"TresJS Design Kit",".",[18,172,174],{"id":173},"new-docs","New Docs",[14,176,177,178,183],{},"We also migrate our documentation from previous ",[38,179,182],{"href":180,"rel":181},"https://vitepress.dev/",[42],"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.",[14,185,186],{},"Like the new navigation where you can easily jump between categories:",[188,189,198],"video",{":controls":190,"className":191,"controls":196,"poster":197},"true",[192,193,194,195,70,72],"rounded-lg","w-full","aspect-video","overflow-hidden",true,"/blog/tresjs-new-website-and-docs/docs-navigation-poster.png",[199,200],"source",{"src":201,"type":202},"/blog/tresjs-new-website-and-docs/docs-navigation.mp4","video/mp4",[14,204,205],{},"Or the other side (right), you can also navegate through each page's table of contents as well as community shortcuts.",[14,207,208],{},[25,209],{"alt":210,"src":211},"Table of Contents","/blog/tresjs-new-website-and-docs/table-contents.png",[18,213,215],{"id":214},"search-command-palette","Search command palette",[14,217,218,219,223,224,227,228,236],{},"You can now navigate faster by hitting ",[220,221],"kbd",{"value":222},"meta"," ",[220,225],{"value":226},"K",". We leverage the Nuxt UI ",[38,229,232],{"href":230,"rel":231},"https://ui.nuxt.com/components/command-palette",[42],[233,234,235],"code",{},"\u003CCommandPalette>"," components combined with Nuxt Content data (search & navigation) to provide a better search experience.",[14,238,239],{},"With the command palette, you can:",[241,242,243,247],"ul",{},[244,245,246],"li",{},"Jump to a page",[244,248,249],{},"Search in the documentation",[188,251,254],{":controls":190,"className":252,"controls":196,"poster":253},[192,193,194,195,70,72],"/blog/tresjs-new-website-and-docs/search-poster.png",[199,255],{"src":256,"type":202},"/blog/tresjs-new-website-and-docs/search.mp4",[18,258,260],{"id":259},"cookbook-and-community-resources","Cookbook and community resources",[14,262,263],{},"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:",[241,265,266,269,272],{},[244,267,268],{},"Community plugins and packages",[244,270,271],{},"Talks",[244,273,274],{},"TresJS courses",[46,276,279,297],{"className":277},[49,50,278],"gap-4",[46,280,282,291],{"className":281},[55,56],[58,283,286],{"className":284,"target":62,"to":285},[61],"https://docs.tresjs.org/cookbook",[65,287],{"alt":288,"className":289,"height":73,"src":290,"width":75},"TresJS Cookbook recipes",[69,70,71,72],"/blog/tresjs-new-website-and-docs/cookbook-recipes.png",[77,292,294],{"className":293},[80,81,82],[14,295,296],{},"Cookbook 🍳🧑‍🍳",[46,298,300,309],{"className":299},[55,56],[58,301,304],{"className":302,"target":62,"to":303},[61],"https://docs.tresjs.org/community/awesome-resources",[65,305],{"alt":306,"className":307,"height":73,"src":308,"width":75},"TresJS Community resources",[69,70,71,72],"/blog/tresjs-new-website-and-docs/community-resources.png",[77,310,312],{"className":311},[80,81,82],[14,313,314],{},"Community resources",[160,316,319],{"icon":317,"to":318},"i-lucide-pencil","https://github.com/Tresjs/tres/edit/next/docs/content/5.community/awesome-resources.md",[14,320,321,322,325],{},"If you want to showcase your own packages or resources, edit this page ",[233,323,324],{},"tresjs/tres/docs"," on Github.",[18,327,329],{"id":328},"whats-next","What's next?",[14,331,332],{},"This new websites are just the beginning of upcoming changes we are planing for the ecosystem, some of them are:",[241,334,335,341,346],{},[244,336,337,338],{},"New docs for ",[233,339,340],{},"@tresjs/cientos",[244,342,337,343],{},[233,344,345],{},"@tresjs/postprocessing",[244,347,348],{},"Contributors page",[14,350,351,170],{},[33,352,353,354,359,360,365,366],{},"We are looking forward to your feedback on ",[38,355,358],{"href":356,"rel":357},"https://x.com/tresjs_dev",[42],"Twitter",", ",[38,361,364],{"href":362,"rel":363},"https://discord.gg/WTpvaxr5",[42],"Discord"," or ",[38,367,370],{"href":368,"rel":369},"https://github.com/tresjs/tresjs.org",[42],"GitHub",[18,372,374],{"id":373},"big-shoutout-to-the-nuxt-ui-team","Big shoutout to the Nuxt UI team",[14,376,377,378,383],{},"We want to give a big shoutout to the",[38,379,382],{"href":380,"rel":381},"https://nuxt.com/blog/nuxt-ui-v4",[42]," 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.",[14,385,386],{},"Thank you for reading this blog post, and happy 3D ✌️",{"title":388,"searchDepth":389,"depth":389,"links":390},"",2,[391,392,393,394,395,396,397],{"id":20,"depth":389,"text":21},{"id":126,"depth":389,"text":127},{"id":173,"depth":389,"text":174},{"id":214,"depth":389,"text":215},{"id":259,"depth":389,"text":260},{"id":328,"depth":389,"text":329},{"id":373,"depth":389,"text":374},"announcement","2025-10-01","We are trilled to release the new tresjs.org and docs.tresjs.org, powered by Nuxt UI.",false,"md",{},"/blog/tresjs-new-website-and-docs",{"title":6,"description":400},"blog/tresjs-new-website-and-docs",null,"P6ob-Xih9CeUEJSxpFvomwjrKS_L_zGix2pi8gBw7VY",{"id":410,"title":411,"author":412,"body":413,"category":3065,"date":3066,"description":3067,"draft":401,"extension":402,"meta":3068,"navigation":196,"path":3069,"seo":3070,"stem":3071,"thumbnail":3072,"url":407,"__hash__":3073},"blog/blog/tresjs-v5.md","Announcing Tres 5.0",[8,9],{"type":11,"value":414,"toc":3043},[415,418,422,425,461,466,472,475,536,543,576,586,590,596,622,631,635,641,647,673,1090,1094,1107,1115,1125,1157,1465,1469,1484,1648,1651,1688,1692,1695,1699,1740,1744,1749,1847,1852,2015,2028,2032,2036,2040,2043,2131,2135,2142,2320,2326,2515,2521,2660,2664,2667,2751,2755,2758,2799,2805,2809,2829,2835,2839,2859,2865,2869,2872,2893,2897,2900,2926,2930,2933,2973,2982,2986,2989,2998,3001,3013,3015,3039],[14,416,417],{},"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.",[18,419,421],{"id":420},"whats-new","🎯 What's New?",[14,423,424],{},"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.",[241,426,427,437,446,455],{},[244,428,429,432,433,436],{},[33,430,431],{},"Start a Tres project quickly",": With the new ",[233,434,435],{},"create-tres"," CLI tool, you can start a new Tres project in seconds.",[244,438,439,442,443,170],{},[33,440,441],{},"ESM-only architecture",": We've made the bold decision to embrace the future by going ",[33,444,445],{},"ESM-only",[244,447,448,451,452],{},[33,449,450],{},"WebGPU native support",": The future of web graphics is here! TresJS v5 introduces ",[33,453,454],{},"experimental WebGPU support",[244,456,457,460],{},[33,458,459],{},"Completely refactored composables",": We've completely refactored our composables system for better reliability and type safety.",[462,463,465],"h3",{"id":464},"new-way-to-start-a-tres-project","🚀 New way to start a Tres project",[14,467,468],{},[25,469],{"src":470,"alt":471},"/blog/tresjs-v5/create-tres.png","Tres 5.0 CLI",[14,473,474],{},"We've created a new CLI tool to help you scaffold a new Tres project with the best practices and the most popular packages.",[476,477,478,502,520],"code-group",{},[479,480,485],"pre",{"className":481,"code":482,"filename":483,"language":484,"meta":388,"style":388},"language-bash shiki shiki-themes catppuccin-latte catppuccin-latte catppuccin-frappe","npx create-tres my-tres-project\n","npm","bash",[233,486,487],{"__ignoreMap":388},[77,488,491,495,499],{"class":489,"line":490},"line",1,[77,492,494],{"class":493},"s0faT","npx",[77,496,498],{"class":497},"s9Zht"," create-tres",[77,500,501],{"class":497}," my-tres-project\n",[479,503,506],{"className":481,"code":504,"filename":505,"language":484,"meta":388,"style":388},"yarn create tres my-tres-project\n","yarn",[233,507,508],{"__ignoreMap":388},[77,509,510,512,515,518],{"class":489,"line":490},[77,511,505],{"class":493},[77,513,514],{"class":497}," create",[77,516,517],{"class":497}," tres",[77,519,501],{"class":497},[479,521,524],{"className":481,"code":522,"filename":523,"language":484,"meta":388,"style":388},"pnpm create tres my-tres-project\n","pnpm",[233,525,526],{"__ignoreMap":388},[77,527,528,530,532,534],{"class":489,"line":490},[77,529,523],{"class":493},[77,531,514],{"class":497},[77,533,517],{"class":497},[77,535,501],{"class":497},[14,537,538,539,542],{},"The CLI provides an ",[33,540,541],{},"interactive wizard"," that guides you through:",[544,545,546],"prose-list",{},[241,547,548,555,562,569],{},[244,549,550,551,554],{},"🎯 ",[33,552,553],{},"Template selection",": Choose between Vue + Vite or Nuxt",[244,556,557,558,561],{},"📦 ",[33,559,560],{},"Ecosystem packages",": Select from TresJS ecosystem packages (Cientos, Post-processing, Leches)",[244,563,564,565,568],{},"🔧 ",[33,566,567],{},"TypeScript support",": Type safe development with TypeScript",[244,570,571,572,575],{},"📏 ",[33,573,574],{},"ESLint integration",": Code quality with TresJS ESLint config",[577,578,579],"prose-note",{},[14,580,581,582,585],{},"This is the ",[33,583,584],{},"recommended approach"," for new projects as it handles all the configuration automatically and lets you choose exactly what you need.",[462,587,589],{"id":588},"esm-only-architecture","🌟 ESM-Only Architecture",[14,591,592,593,595],{},"We've made the bold decision to embrace the future by going ",[33,594,445],{},". This means:",[241,597,598,604,610,616],{},[244,599,600,603],{},[33,601,602],{},"Smaller bundle sizes"," with better tree-shaking",[244,605,606,609],{},[33,607,608],{},"Faster loading"," and improved performance",[244,611,612,615],{},[33,613,614],{},"Modern JavaScript standards"," alignment",[244,617,618,621],{},[33,619,620],{},"Better compatibility"," with modern build tools",[623,624,625],"prose-warning",{},[14,626,627,630],{},[33,628,629],{},"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.",[462,632,634],{"id":633},"webgpu-native-support","⚡ WebGPU Native Support",[636,637,640],"u-badge",{"color":638,"variant":639},"primary","soft","\nExperimental\n",[14,642,643,644,646],{},"The future of web graphics is here! TresJS v5 introduces ",[33,645,454],{},", bringing:",[241,648,649,655,661,667],{},[244,650,651,654],{},[33,652,653],{},"Next-generation performance"," for complex 3D scenes",[244,656,657,660],{},[33,658,659],{},"Better GPU utilization"," and compute shader support",[244,662,663,666],{},[33,664,665],{},"Future-ready architecture"," for upcoming web standards",[244,668,669,672],{},[33,670,671],{},"Seamless fallback"," to WebGL when WebGPU isn't available",[479,674,679],{"className":675,"code":676,"filename":677,"language":678,"meta":388,"style":388},"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",[233,680,681,707,730,747,766,772,779,814,838,860,866,880,892,901,910,916,926,931,941,968,1010,1047,1065,1071,1081],{"__ignoreMap":388},[77,682,683,687,691,695,698,701,704],{"class":489,"line":490},[77,684,686],{"class":685},"sWdzt","\u003C",[77,688,690],{"class":689},"slJ5s","script",[77,692,694],{"class":693},"s1cdE"," setup",[77,696,697],{"class":693}," lang",[77,699,700],{"class":685},"=",[77,702,703],{"class":497},"\"ts\"",[77,705,706],{"class":685},">\n",[77,708,709,713,717,721,724,727],{"class":489,"line":389},[77,710,712],{"class":711},"sZyUJ","import",[77,714,716],{"class":715},"spKPg"," {",[77,718,720],{"class":719},"s9Av-"," TresCanvas ",[77,722,723],{"class":715},"}",[77,725,726],{"class":711}," from",[77,728,729],{"class":497}," '@tresjs/core'\n",[77,731,733,735,737,740,742,744],{"class":489,"line":732},3,[77,734,712],{"class":711},[77,736,716],{"class":715},[77,738,739],{"class":719}," WebGPURenderer ",[77,741,723],{"class":715},[77,743,726],{"class":711},[77,745,746],{"class":497}," 'three/webgpu'\n",[77,748,750,752,755,757,760,762,764],{"class":489,"line":749},4,[77,751,712],{"class":711},[77,753,754],{"class":711}," type",[77,756,716],{"class":715},[77,758,759],{"class":719}," TresRendererSetupContext ",[77,761,723],{"class":715},[77,763,726],{"class":711},[77,765,729],{"class":497},[77,767,769],{"class":489,"line":768},5,[77,770,771],{"emptyLinePlaceholder":196},"\n",[77,773,775],{"class":489,"line":774},6,[77,776,778],{"class":777},"sMnCH","// Create WebGPU renderer factory\n",[77,780,782,785,788,791,794,798,801,805,808,811],{"class":489,"line":781},7,[77,783,784],{"class":711},"const",[77,786,787],{"class":493}," createWebGPURenderer",[77,789,790],{"class":685}," =",[77,792,793],{"class":715}," (",[77,795,797],{"class":796},"sQnVB","ctx",[77,799,800],{"class":685},":",[77,802,804],{"class":803},"sVAQX"," TresRendererSetupContext",[77,806,807],{"class":715},")",[77,809,810],{"class":685}," =>",[77,812,813],{"class":715}," {\n",[77,815,817,820,823,825,829,832,835],{"class":489,"line":816},8,[77,818,819],{"class":711},"  const",[77,821,822],{"class":719}," renderer ",[77,824,700],{"class":685},[77,826,828],{"class":827},"sVNBm"," new",[77,830,831],{"class":493}," WebGPURenderer",[77,833,834],{"class":719},"(",[77,836,837],{"class":715},"{\n",[77,839,841,844,846,849,852,854,857],{"class":489,"line":840},9,[77,842,843],{"class":719},"    canvas",[77,845,800],{"class":685},[77,847,848],{"class":493}," toValue",[77,850,851],{"class":719},"(ctx",[77,853,170],{"class":685},[77,855,856],{"class":719},"canvas)",[77,858,859],{"class":715},",\n",[77,861,863],{"class":489,"line":862},10,[77,864,865],{"class":777},"    // WebGPU specific configuration\n",[77,867,869,872,874,878],{"class":489,"line":868},11,[77,870,871],{"class":719},"    alpha",[77,873,800],{"class":685},[77,875,877],{"class":876},"sREMW"," true",[77,879,859],{"class":715},[77,881,883,886,888,890],{"class":489,"line":882},12,[77,884,885],{"class":719},"    antialias",[77,887,800],{"class":685},[77,889,877],{"class":876},[77,891,859],{"class":715},[77,893,895,898],{"class":489,"line":894},13,[77,896,897],{"class":715},"  }",[77,899,900],{"class":719},")\n",[77,902,904,907],{"class":489,"line":903},14,[77,905,906],{"class":711},"  return",[77,908,909],{"class":719}," renderer\n",[77,911,913],{"class":489,"line":912},15,[77,914,915],{"class":715},"}\n",[77,917,919,922,924],{"class":489,"line":918},16,[77,920,921],{"class":685},"\u003C/",[77,923,690],{"class":689},[77,925,706],{"class":685},[77,927,929],{"class":489,"line":928},17,[77,930,771],{"emptyLinePlaceholder":196},[77,932,934,936,939],{"class":489,"line":933},18,[77,935,686],{"class":685},[77,937,938],{"class":689},"template",[77,940,706],{"class":685},[77,942,944,947,950,953,956,958,961,964,966],{"class":489,"line":943},19,[77,945,946],{"class":685},"  \u003C",[77,948,949],{"class":689},"TresCanvas",[77,951,952],{"class":715}," :",[77,954,955],{"class":693},"renderer",[77,957,700],{"class":685},[77,959,960],{"class":497},"\"",[77,962,963],{"class":719},"createWebGPURenderer",[77,965,960],{"class":497},[77,967,706],{"class":685},[77,969,971,974,977,979,982,984,986,989,992,995,998,1000,1002,1005,1007],{"class":489,"line":970},20,[77,972,973],{"class":685},"    \u003C",[77,975,976],{"class":689},"TresPerspectiveCamera",[77,978,952],{"class":715},[77,980,981],{"class":693},"position",[77,983,700],{"class":685},[77,985,960],{"class":497},[77,987,988],{"class":719},"[",[77,990,991],{"class":876},"3",[77,993,994],{"class":715},",",[77,996,997],{"class":876}," 3",[77,999,994],{"class":715},[77,1001,997],{"class":876},[77,1003,1004],{"class":719},"]",[77,1006,960],{"class":497},[77,1008,1009],{"class":685}," />\n",[77,1011,1013,1015,1018,1020,1023,1025,1027,1029,1032,1034,1037,1039,1041,1043,1045],{"class":489,"line":1012},21,[77,1014,973],{"class":685},[77,1016,1017],{"class":689},"TresBoxGeometry",[77,1019,952],{"class":715},[77,1021,1022],{"class":693},"args",[77,1024,700],{"class":685},[77,1026,960],{"class":497},[77,1028,988],{"class":719},[77,1030,1031],{"class":876},"1",[77,1033,994],{"class":715},[77,1035,1036],{"class":876}," 1",[77,1038,994],{"class":715},[77,1040,1036],{"class":876},[77,1042,1004],{"class":719},[77,1044,960],{"class":497},[77,1046,1009],{"class":685},[77,1048,1050,1052,1055,1058,1060,1063],{"class":489,"line":1049},22,[77,1051,973],{"class":685},[77,1053,1054],{"class":689},"TresMeshBasicMaterial",[77,1056,1057],{"class":693}," color",[77,1059,700],{"class":685},[77,1061,1062],{"class":497},"\"hotpink\"",[77,1064,1009],{"class":685},[77,1066,1068],{"class":489,"line":1067},23,[77,1069,1070],{"class":777},"    \u003C!-- Your 3D scene here -->\n",[77,1072,1074,1077,1079],{"class":489,"line":1073},24,[77,1075,1076],{"class":685},"  \u003C/",[77,1078,949],{"class":689},[77,1080,706],{"class":685},[77,1082,1084,1086,1088],{"class":489,"line":1083},25,[77,1085,921],{"class":685},[77,1087,938],{"class":689},[77,1089,706],{"class":685},[462,1091,1093],{"id":1092},"enhanced-composables-api","🔄 Enhanced Composables API",[14,1095,1096,1097,1100,1101,1106],{},"We've completely refactored our composables system to become ",[33,1098,1099],{},"true Vue composables"," (thanks to ",[38,1102,1105],{"href":1103,"rel":1104},"https://www.youtube.com/watch?v=N0QrFKBZuqA",[42],"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.",[1108,1109,1111,1112],"h4",{"id":1110},"completely-refactored-useloader","Completely Refactored ",[233,1113,1114],{},"useLoader",[14,1116,1117,1118,1120,1121,1124],{},"The ",[233,1119,1114],{}," composable has been transformed from a simple utility function into a true Vue composable based on ",[233,1122,1123],{},"useAsyncData",", providing:",[241,1126,1127,1133,1139,1145,1151],{},[244,1128,1129,1132],{},[33,1130,1131],{},"Reactive state management"," with loading, error, and progress tracking",[244,1134,1135,1138],{},[33,1136,1137],{},"Better Vue integration"," with proper composable patterns",[244,1140,1141,1144],{},[33,1142,1143],{},"Automatic cleanup"," and disposal of 3D objects",[244,1146,1147,1150],{},[33,1148,1149],{},"Enhanced TypeScript support"," and developer experience",[244,1152,1153,1156],{},[33,1154,1155],{},"Dynamic path loading"," - change the model path reactively",[479,1158,1160],{"className":675,"code":1159,"language":678,"meta":388,"style":388},"\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",[233,1161,1162,1172,1188,1192,1197,1202,1206,1211,1250,1260,1265,1269,1273,1278,1299,1319,1325,1329,1334,1354,1385,1391,1399,1403,1411,1416,1456],{"__ignoreMap":388},[77,1163,1164,1166,1168,1170],{"class":489,"line":490},[77,1165,686],{"class":685},[77,1167,690],{"class":689},[77,1169,694],{"class":693},[77,1171,706],{"class":685},[77,1173,1174,1176,1178,1181,1183,1185],{"class":489,"line":389},[77,1175,712],{"class":711},[77,1177,716],{"class":715},[77,1179,1180],{"class":719}," GLTFLoader ",[77,1182,723],{"class":715},[77,1184,726],{"class":711},[77,1186,1187],{"class":497}," 'three/examples/jsm/loaders/GLTFLoader'\n",[77,1189,1190],{"class":489,"line":732},[77,1191,771],{"emptyLinePlaceholder":196},[77,1193,1194],{"class":489,"line":749},[77,1195,1196],{"class":777},"// ❌ Old v4 syntax - returned a promise\n",[77,1198,1199],{"class":489,"line":768},[77,1200,1201],{"class":777},"// const gltf = await useLoader(GLTFLoader, '/models/duck.gltf')\n",[77,1203,1204],{"class":489,"line":774},[77,1205,771],{"emptyLinePlaceholder":196},[77,1207,1208],{"class":489,"line":781},[77,1209,1210],{"class":777},"// ✅ New v5 syntax - returns reactive state object\n",[77,1212,1213,1215,1217,1220,1222,1225,1227,1230,1232,1235,1237,1240,1242,1244,1247],{"class":489,"line":816},[77,1214,784],{"class":711},[77,1216,716],{"class":715},[77,1218,1219],{"class":719}," state",[77,1221,800],{"class":715},[77,1223,1224],{"class":719}," model",[77,1226,994],{"class":715},[77,1228,1229],{"class":719}," isLoading",[77,1231,994],{"class":715},[77,1233,1234],{"class":719}," error",[77,1236,994],{"class":715},[77,1238,1239],{"class":719}," progress ",[77,1241,723],{"class":715},[77,1243,790],{"class":685},[77,1245,1246],{"class":493}," useLoader",[77,1248,1249],{"class":719},"(\n",[77,1251,1252,1255,1257],{"class":489,"line":840},[77,1253,1254],{"class":719},"  GLTFLoader",[77,1256,994],{"class":715},[77,1258,1259],{"class":719}," \n",[77,1261,1262],{"class":489,"line":862},[77,1263,1264],{"class":497},"  '/models/duck.gltf'\n",[77,1266,1267],{"class":489,"line":868},[77,1268,900],{"class":719},[77,1270,1271],{"class":489,"line":882},[77,1272,771],{"emptyLinePlaceholder":196},[77,1274,1275],{"class":489,"line":894},[77,1276,1277],{"class":777},"// Watch for loading state changes reactively\n",[77,1279,1280,1283,1286,1288,1290,1293,1295,1297],{"class":489,"line":903},[77,1281,1282],{"class":493},"watch",[77,1284,1285],{"class":719},"(isLoading",[77,1287,994],{"class":715},[77,1289,793],{"class":715},[77,1291,1292],{"class":796},"loading",[77,1294,807],{"class":715},[77,1296,810],{"class":711},[77,1298,813],{"class":715},[77,1300,1301,1304,1307,1309,1312,1314,1317],{"class":489,"line":912},[77,1302,1303],{"class":711},"  if",[77,1305,1306],{"class":719}," (loading) console",[77,1308,170],{"class":685},[77,1310,1311],{"class":493},"log",[77,1313,834],{"class":719},[77,1315,1316],{"class":497},"'Loading model...'",[77,1318,900],{"class":719},[77,1320,1321,1323],{"class":489,"line":918},[77,1322,723],{"class":715},[77,1324,900],{"class":719},[77,1326,1327],{"class":489,"line":928},[77,1328,771],{"emptyLinePlaceholder":196},[77,1330,1331],{"class":489,"line":933},[77,1332,1333],{"class":777},"// Track loading progress\n",[77,1335,1336,1338,1341,1343,1345,1348,1350,1352],{"class":489,"line":943},[77,1337,1282],{"class":493},[77,1339,1340],{"class":719},"(progress",[77,1342,994],{"class":715},[77,1344,793],{"class":715},[77,1346,1347],{"class":796},"prog",[77,1349,807],{"class":715},[77,1351,810],{"class":711},[77,1353,813],{"class":715},[77,1355,1356,1359,1361,1363,1365,1368,1371,1373,1375,1378,1380,1383],{"class":489,"line":970},[77,1357,1358],{"class":719},"  console",[77,1360,170],{"class":685},[77,1362,1311],{"class":493},[77,1364,834],{"class":719},[77,1366,1367],{"class":497},"`Loading: ",[77,1369,1370],{"class":715},"${",[77,1372,1347],{"class":719},[77,1374,170],{"class":685},[77,1376,1377],{"class":719},"percentage",[77,1379,723],{"class":715},[77,1381,1382],{"class":497},"%`",[77,1384,900],{"class":719},[77,1386,1387,1389],{"class":489,"line":1012},[77,1388,723],{"class":715},[77,1390,900],{"class":719},[77,1392,1393,1395,1397],{"class":489,"line":1049},[77,1394,921],{"class":685},[77,1396,690],{"class":689},[77,1398,706],{"class":685},[77,1400,1401],{"class":489,"line":1067},[77,1402,771],{"emptyLinePlaceholder":196},[77,1404,1405,1407,1409],{"class":489,"line":1073},[77,1406,686],{"class":685},[77,1408,938],{"class":689},[77,1410,706],{"class":685},[77,1412,1413],{"class":489,"line":1083},[77,1414,1415],{"class":777},"  \u003C!-- Reactive loading states in template -->\n",[77,1417,1419,1421,1424,1427,1429,1431,1434,1436,1438,1441,1443,1445,1447,1449,1452,1454],{"class":489,"line":1418},26,[77,1420,946],{"class":685},[77,1422,1423],{"class":689},"primitive",[77,1425,1426],{"class":711}," v-if",[77,1428,700],{"class":685},[77,1430,960],{"class":497},[77,1432,1433],{"class":719},"model",[77,1435,960],{"class":497},[77,1437,952],{"class":715},[77,1439,1440],{"class":693},"object",[77,1442,700],{"class":685},[77,1444,960],{"class":497},[77,1446,1433],{"class":719},[77,1448,170],{"class":685},[77,1450,1451],{"class":719},"scene",[77,1453,960],{"class":497},[77,1455,1009],{"class":685},[77,1457,1459,1461,1463],{"class":489,"line":1458},27,[77,1460,921],{"class":685},[77,1462,938],{"class":689},[77,1464,706],{"class":685},[1108,1466,1468],{"id":1467},"impact-on-cientos-composables","Impact on Cientos Composables",[14,1470,1471,1472,1479,1480,1483],{},"This breaking change also affects Cientos composables like ",[38,1473,1476],{"href":1474,"rel":1475},"https://deploy-preview-563--cientos-tresjs.netlify.app/guide/loaders/use-gltf.html",[42],[233,1477,1478],{},"useGLTF"," and ",[233,1481,1482],{},"useFBX",", which now follow the same reactive pattern:",[479,1485,1487],{"className":675,"code":1486,"language":678,"meta":388,"style":388},"\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",[233,1488,1489,1499,1515,1519,1524,1568,1579,1585,1593,1597,1605,1640],{"__ignoreMap":388},[77,1490,1491,1493,1495,1497],{"class":489,"line":490},[77,1492,686],{"class":685},[77,1494,690],{"class":689},[77,1496,694],{"class":693},[77,1498,706],{"class":685},[77,1500,1501,1503,1505,1508,1510,1512],{"class":489,"line":389},[77,1502,712],{"class":711},[77,1504,716],{"class":715},[77,1506,1507],{"class":719}," useGLTF ",[77,1509,723],{"class":715},[77,1511,726],{"class":711},[77,1513,1514],{"class":497}," '@tresjs/cientos'\n",[77,1516,1517],{"class":489,"line":732},[77,1518,771],{"emptyLinePlaceholder":196},[77,1520,1521],{"class":489,"line":749},[77,1522,1523],{"class":777},"// ✅ New reactive state pattern in Cientos\n",[77,1525,1526,1528,1530,1532,1534,1537,1539,1542,1544,1546,1548,1550,1552,1554,1557,1559,1562,1564,1566],{"class":489,"line":768},[77,1527,784],{"class":711},[77,1529,716],{"class":715},[77,1531,1219],{"class":719},[77,1533,994],{"class":715},[77,1535,1536],{"class":719}," nodes",[77,1538,994],{"class":715},[77,1540,1541],{"class":719}," materials",[77,1543,994],{"class":715},[77,1545,1229],{"class":719},[77,1547,994],{"class":715},[77,1549,1239],{"class":719},[77,1551,723],{"class":715},[77,1553,790],{"class":685},[77,1555,1556],{"class":493}," useGLTF",[77,1558,834],{"class":719},[77,1560,1561],{"class":497},"'/model.glb'",[77,1563,994],{"class":715},[77,1565,716],{"class":715},[77,1567,1259],{"class":719},[77,1569,1570,1573,1575,1577],{"class":489,"line":774},[77,1571,1572],{"class":719},"  draco",[77,1574,800],{"class":685},[77,1576,877],{"class":876},[77,1578,1259],{"class":719},[77,1580,1581,1583],{"class":489,"line":781},[77,1582,723],{"class":715},[77,1584,900],{"class":719},[77,1586,1587,1589,1591],{"class":489,"line":816},[77,1588,921],{"class":685},[77,1590,690],{"class":689},[77,1592,706],{"class":685},[77,1594,1595],{"class":489,"line":840},[77,1596,771],{"emptyLinePlaceholder":196},[77,1598,1599,1601,1603],{"class":489,"line":862},[77,1600,686],{"class":685},[77,1602,938],{"class":689},[77,1604,706],{"class":685},[77,1606,1607,1609,1611,1613,1615,1617,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638],{"class":489,"line":868},[77,1608,946],{"class":685},[77,1610,1423],{"class":689},[77,1612,1426],{"class":711},[77,1614,700],{"class":685},[77,1616,960],{"class":497},[77,1618,1619],{"class":719},"state",[77,1621,960],{"class":497},[77,1623,952],{"class":715},[77,1625,1440],{"class":693},[77,1627,700],{"class":685},[77,1629,960],{"class":497},[77,1631,1619],{"class":719},[77,1633,170],{"class":685},[77,1635,1451],{"class":719},[77,1637,960],{"class":497},[77,1639,1009],{"class":685},[77,1641,1642,1644,1646],{"class":489,"line":882},[77,1643,921],{"class":685},[77,1645,938],{"class":689},[77,1647,706],{"class":685},[14,1649,1650],{},"These Cientos composables now provide the same reactive benefits:",[241,1652,1653,1665,1682],{},[244,1654,1655,1658,1659,1479,1662],{},[33,1656,1657],{},"Reactive loading states"," with ",[233,1660,1661],{},"isLoading",[233,1663,1664],{},"progress",[244,1666,1667,1670,1671,1479,1674,1677,1678,1681],{},[33,1668,1669],{},"Structured access"," to ",[233,1672,1673],{},"nodes",[233,1675,1676],{},"materials"," based on ",[233,1679,1680],{},"useGraph"," composable",[244,1683,1684,1687],{},[33,1685,1686],{},"Consistent API"," across the TresJS ecosystem",[462,1689,1691],{"id":1690},"enhanced-event-system","Enhanced Event System",[14,1693,1694],{},"We've completely revamped the event system based on the pmndrs ecosystem standards, bringing significant improvements:",[1108,1696,1698],{"id":1697},"key-changes","Key Changes",[241,1700,1701,1711,1717,1731],{},[244,1702,1703,1706,1707,1710],{},[33,1704,1705],{},"New event system"," based on the ",[233,1708,1709],{},"@pmndrs/pointer-events"," package for battle-tested reliability",[244,1712,1713,1716],{},[33,1714,1715],{},"First-intersected-only behavior",": Only the first intersected element will trigger pointer events, improving performance with complex scenes.",[244,1718,1719,1722,1723,1726,1727,1730],{},[33,1720,1721],{},"Native DOM event names",": Pointer events now follow exact DOM standards (e.g., ",[233,1724,1725],{},"@pointerdown"," instead of ",[233,1728,1729],{},"@pointer-down",").",[244,1732,1733,1739],{},[33,1734,1735,1736],{},"Removed ",[233,1737,1738],{},"useTresEventManager",": The composable has been removed in favor of the new system.",[1108,1741,1743],{"id":1742},"migration-required","Migration Required",[14,1745,1746],{},[33,1747,1748],{},"Update pointer event names:",[479,1750,1752],{"className":675,"code":1751,"language":678,"meta":388,"style":388},"\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",[233,1753,1754,1759,1783,1788,1793,1801,1805,1810,1831,1835,1839],{"__ignoreMap":388},[77,1755,1756],{"class":489,"line":490},[77,1757,1758],{"class":777},"\u003C!-- ❌ Old v4 syntax -->\n",[77,1760,1761,1763,1766,1769,1772,1774,1776,1779,1781],{"class":489,"line":389},[77,1762,686],{"class":685},[77,1764,1765],{"class":689},"TresMesh",[77,1767,1768],{"class":715}," @",[77,1770,1771],{"class":693},"pointer-down",[77,1773,700],{"class":685},[77,1775,960],{"class":497},[77,1777,1778],{"class":719},"handlePointerDown",[77,1780,960],{"class":497},[77,1782,706],{"class":685},[77,1784,1785],{"class":489,"line":732},[77,1786,1787],{"class":719},"  \u003CTresBoxGeometry />\n",[77,1789,1790],{"class":489,"line":749},[77,1791,1792],{"class":719},"  \u003CTresMeshBasicMaterial />\n",[77,1794,1795,1797,1799],{"class":489,"line":768},[77,1796,921],{"class":685},[77,1798,1765],{"class":689},[77,1800,706],{"class":685},[77,1802,1803],{"class":489,"line":774},[77,1804,771],{"emptyLinePlaceholder":196},[77,1806,1807],{"class":489,"line":781},[77,1808,1809],{"class":777},"\u003C!-- ✅ New v5 syntax -->\n",[77,1811,1812,1814,1816,1818,1821,1823,1825,1827,1829],{"class":489,"line":816},[77,1813,686],{"class":685},[77,1815,1765],{"class":689},[77,1817,1768],{"class":715},[77,1819,1820],{"class":693},"pointerdown",[77,1822,700],{"class":685},[77,1824,960],{"class":497},[77,1826,1778],{"class":719},[77,1828,960],{"class":497},[77,1830,706],{"class":685},[77,1832,1833],{"class":489,"line":840},[77,1834,1787],{"class":719},[77,1836,1837],{"class":489,"line":862},[77,1838,1792],{"class":719},[77,1840,1841,1843,1845],{"class":489,"line":868},[77,1842,921],{"class":685},[77,1844,1765],{"class":689},[77,1846,706],{"class":685},[14,1848,1849],{},[33,1850,1851],{},"Overlapping elements are handled differently:",[479,1853,1855],{"className":675,"code":1854,"language":678,"meta":388,"style":388},"\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",[233,1856,1857,1862,1884,1888,1892,1900,1924,1928,1932,1940,1944,1949,1971,1976,1981,1986,1991,1995,1999,2003,2007],{"__ignoreMap":388},[77,1858,1859],{"class":489,"line":490},[77,1860,1861],{"class":777},"\u003C!-- ❌ Old behavior: multiple overlapping objects could trigger events -->\n",[77,1863,1864,1866,1868,1870,1873,1875,1877,1880,1882],{"class":489,"line":389},[77,1865,686],{"class":685},[77,1867,1765],{"class":689},[77,1869,1768],{"class":715},[77,1871,1872],{"class":693},"click",[77,1874,700],{"class":685},[77,1876,960],{"class":497},[77,1878,1879],{"class":719},"handleClick",[77,1881,960],{"class":497},[77,1883,706],{"class":685},[77,1885,1886],{"class":489,"line":732},[77,1887,1787],{"class":719},[77,1889,1890],{"class":489,"line":749},[77,1891,1792],{"class":719},[77,1893,1894,1896,1898],{"class":489,"line":768},[77,1895,921],{"class":685},[77,1897,1765],{"class":689},[77,1899,706],{"class":685},[77,1901,1902,1904,1906,1908,1910,1912,1914,1916,1918,1921],{"class":489,"line":774},[77,1903,686],{"class":685},[77,1905,1765],{"class":689},[77,1907,1768],{"class":715},[77,1909,1872],{"class":693},[77,1911,700],{"class":685},[77,1913,960],{"class":497},[77,1915,1879],{"class":719},[77,1917,960],{"class":497},[77,1919,1920],{"class":685},">",[77,1922,1923],{"class":719}," \u003C!-- This might not trigger if behind first mesh -->\n",[77,1925,1926],{"class":489,"line":781},[77,1927,1787],{"class":719},[77,1929,1930],{"class":489,"line":816},[77,1931,1792],{"class":719},[77,1933,1934,1936,1938],{"class":489,"line":840},[77,1935,921],{"class":685},[77,1937,1765],{"class":689},[77,1939,706],{"class":685},[77,1941,1942],{"class":489,"line":862},[77,1943,771],{"emptyLinePlaceholder":196},[77,1945,1946],{"class":489,"line":868},[77,1947,1948],{"class":777},"\u003C!-- ✅ New behavior: use parent handler for overlapping elements -->\n",[77,1950,1951,1953,1956,1958,1960,1962,1964,1967,1969],{"class":489,"line":882},[77,1952,686],{"class":685},[77,1954,1955],{"class":689},"TresGroup",[77,1957,1768],{"class":715},[77,1959,1872],{"class":693},[77,1961,700],{"class":685},[77,1963,960],{"class":497},[77,1965,1966],{"class":719},"handleGroupClick",[77,1968,960],{"class":497},[77,1970,706],{"class":685},[77,1972,1973],{"class":489,"line":894},[77,1974,1975],{"class":719},"  \u003CTresMesh>\n",[77,1977,1978],{"class":489,"line":903},[77,1979,1980],{"class":719},"    \u003CTresBoxGeometry />\n",[77,1982,1983],{"class":489,"line":912},[77,1984,1985],{"class":719},"    \u003CTresMeshBasicMaterial />\n",[77,1987,1988],{"class":489,"line":918},[77,1989,1990],{"class":719},"  \u003C/TresMesh>\n",[77,1992,1993],{"class":489,"line":928},[77,1994,1975],{"class":719},[77,1996,1997],{"class":489,"line":933},[77,1998,1980],{"class":719},[77,2000,2001],{"class":489,"line":943},[77,2002,1985],{"class":719},[77,2004,2005],{"class":489,"line":970},[77,2006,1990],{"class":719},[77,2008,2009,2011,2013],{"class":489,"line":1012},[77,2010,921],{"class":685},[77,2012,1955],{"class":689},[77,2014,706],{"class":685},[14,2016,2017,2018,359,2021,2024,2025,170],{},"This change brings ",[33,2019,2020],{},"better performance",[33,2022,2023],{},"more predictable event handling",", and ",[33,2026,2027],{},"consistency with web standards",[462,2029,2031],{"id":2030},"️-developer-experience-improvements","🛠️ Developer Experience Improvements",[18,2033,2035],{"id":2034},"breaking-changes-migration","💔 Breaking Changes & Migration",[462,2037,2039],{"id":2038},"removed-composables","Removed Composables",[14,2041,2042],{},"We've removed several composables that were either not true composables or have been replaced with better alternatives:",[241,2044,2045,2060,2070,2077,2085,2101,2109,2120],{},[244,2046,2047,2052,2053,2056,2057,2059],{},[33,2048,2049],{},[233,2050,2051],{},"useTresReady",": Use ",[233,2054,2055],{},"@ready"," event on ",[233,2058,949],{}," instead",[244,2061,2062,2052,2067,2069],{},[33,2063,2064],{},[233,2065,2066],{},"useSeek",[233,2068,1680],{}," or manual traversal functions",[244,2071,2072,2076],{},[33,2073,2074],{},[233,2075,1738],{},": Removed in favor of the new event system",[244,2078,2079,2084],{},[33,2080,2081],{},[233,2082,2083],{},"useRaycaster",": Use native Three.js raycasting or the new event system",[244,2086,2087,2052,2092,2095,2096,2056,2099],{},[33,2088,2089],{},[233,2090,2091],{},"useRenderLoop",[233,2093,2094],{},"useLoop"," composable or ",[233,2097,2098],{},"@loop",[233,2100,949],{},[244,2102,2103,2108],{},[33,2104,2105],{},[233,2106,2107],{},"useLogger",": Removed for simpler debugging approach",[244,2110,2111,2052,2116,2119],{},[33,2112,2113],{},[233,2114,2115],{},"useCamera",[233,2117,2118],{},"useTres()"," to access camera",[244,2121,2122,2127,2128,2130],{},[33,2123,2124],{},[233,2125,2126],{},"useTexture",": Moved to ",[233,2129,340],{}," for better organization",[1108,2132,2134],{"id":2133},"migration-examples","Migration Examples",[14,2136,2137],{},[33,2138,2139,2140,800],{},"Replace ",[233,2141,2051],{},[479,2143,2145],{"className":675,"code":2144,"language":678,"meta":388,"style":388},"\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",[233,2146,2147,2151,2161,2180,2188,2192,2196,2206,2226,2253,2257,2265,2269,2277,2299,2304,2312],{"__ignoreMap":388},[77,2148,2149],{"class":489,"line":490},[77,2150,1758],{"class":777},[77,2152,2153,2155,2157,2159],{"class":489,"line":389},[77,2154,686],{"class":685},[77,2156,690],{"class":689},[77,2158,694],{"class":693},[77,2160,706],{"class":685},[77,2162,2163,2165,2167,2170,2172,2174,2177],{"class":489,"line":732},[77,2164,784],{"class":711},[77,2166,716],{"class":715},[77,2168,2169],{"class":719}," isReady ",[77,2171,723],{"class":715},[77,2173,790],{"class":685},[77,2175,2176],{"class":493}," useTresReady",[77,2178,2179],{"class":719},"()\n",[77,2181,2182,2184,2186],{"class":489,"line":749},[77,2183,921],{"class":685},[77,2185,690],{"class":689},[77,2187,706],{"class":685},[77,2189,2190],{"class":489,"line":768},[77,2191,771],{"emptyLinePlaceholder":196},[77,2193,2194],{"class":489,"line":774},[77,2195,1809],{"class":777},[77,2197,2198,2200,2202,2204],{"class":489,"line":781},[77,2199,686],{"class":685},[77,2201,690],{"class":689},[77,2203,694],{"class":693},[77,2205,706],{"class":685},[77,2207,2208,2210,2213,2215,2217,2220,2222,2224],{"class":489,"line":816},[77,2209,784],{"class":711},[77,2211,2212],{"class":493}," onReady",[77,2214,790],{"class":685},[77,2216,793],{"class":715},[77,2218,2219],{"class":796},"context",[77,2221,807],{"class":715},[77,2223,810],{"class":711},[77,2225,813],{"class":715},[77,2227,2228,2230,2232,2234,2236,2239,2241,2244,2246,2248,2250],{"class":489,"line":840},[77,2229,1358],{"class":719},[77,2231,170],{"class":685},[77,2233,1311],{"class":493},[77,2235,834],{"class":719},[77,2237,2238],{"class":497},"'Renderer is ready:'",[77,2240,994],{"class":715},[77,2242,2243],{"class":719}," context",[77,2245,170],{"class":685},[77,2247,955],{"class":719},[77,2249,170],{"class":685},[77,2251,2252],{"class":719},"instance)\n",[77,2254,2255],{"class":489,"line":862},[77,2256,915],{"class":715},[77,2258,2259,2261,2263],{"class":489,"line":868},[77,2260,921],{"class":685},[77,2262,690],{"class":689},[77,2264,706],{"class":685},[77,2266,2267],{"class":489,"line":882},[77,2268,771],{"emptyLinePlaceholder":196},[77,2270,2271,2273,2275],{"class":489,"line":894},[77,2272,686],{"class":685},[77,2274,938],{"class":689},[77,2276,706],{"class":685},[77,2278,2279,2281,2283,2285,2288,2290,2292,2295,2297],{"class":489,"line":903},[77,2280,946],{"class":685},[77,2282,949],{"class":689},[77,2284,1768],{"class":715},[77,2286,2287],{"class":693},"ready",[77,2289,700],{"class":685},[77,2291,960],{"class":497},[77,2293,2294],{"class":719},"onReady",[77,2296,960],{"class":497},[77,2298,706],{"class":685},[77,2300,2301],{"class":489,"line":912},[77,2302,2303],{"class":777},"    \u003C!-- Your 3D scene -->\n",[77,2305,2306,2308,2310],{"class":489,"line":918},[77,2307,1076],{"class":685},[77,2309,949],{"class":689},[77,2311,706],{"class":685},[77,2313,2314,2316,2318],{"class":489,"line":928},[77,2315,921],{"class":685},[77,2317,938],{"class":689},[77,2319,706],{"class":685},[14,2321,2322],{},[33,2323,2139,2324,800],{},[233,2325,2066],{},[479,2327,2329],{"className":675,"code":2328,"language":678,"meta":388,"style":388},"\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",[233,2330,2331,2341,2346,2364,2391,2395,2400,2429,2461,2480,2507],{"__ignoreMap":388},[77,2332,2333,2335,2337,2339],{"class":489,"line":490},[77,2334,686],{"class":685},[77,2336,690],{"class":689},[77,2338,694],{"class":693},[77,2340,706],{"class":685},[77,2342,2343],{"class":489,"line":389},[77,2344,2345],{"class":777},"// ❌ Old v4 syntax\n",[77,2347,2348,2350,2352,2355,2357,2359,2362],{"class":489,"line":732},[77,2349,784],{"class":711},[77,2351,716],{"class":715},[77,2353,2354],{"class":719}," seek ",[77,2356,723],{"class":715},[77,2358,790],{"class":685},[77,2360,2361],{"class":493}," useSeek",[77,2363,2179],{"class":719},[77,2365,2366,2368,2371,2373,2376,2379,2381,2384,2386,2389],{"class":489,"line":749},[77,2367,784],{"class":711},[77,2369,2370],{"class":719}," body ",[77,2372,700],{"class":685},[77,2374,2375],{"class":493}," seek",[77,2377,2378],{"class":719},"(car",[77,2380,994],{"class":715},[77,2382,2383],{"class":497}," 'name'",[77,2385,994],{"class":715},[77,2387,2388],{"class":497}," 'Octane_Body_0'",[77,2390,900],{"class":719},[77,2392,2393],{"class":489,"line":768},[77,2394,771],{"emptyLinePlaceholder":196},[77,2396,2397],{"class":489,"line":774},[77,2398,2399],{"class":777},"// ✅ New v5 syntax - use useGraph\n",[77,2401,2402,2404,2406,2408,2410,2413,2415,2417,2419,2422,2424,2427],{"class":489,"line":781},[77,2403,784],{"class":711},[77,2405,716],{"class":715},[77,2407,1219],{"class":719},[77,2409,800],{"class":715},[77,2411,2412],{"class":719}," model ",[77,2414,723],{"class":715},[77,2416,790],{"class":685},[77,2418,1246],{"class":493},[77,2420,2421],{"class":719},"(GLTFLoader",[77,2423,994],{"class":715},[77,2425,2426],{"class":497}," '/model.glb'",[77,2428,900],{"class":719},[77,2430,2431,2433,2436,2438,2441,2443,2446,2448,2450,2452,2455,2458],{"class":489,"line":816},[77,2432,784],{"class":711},[77,2434,2435],{"class":719}," scene ",[77,2437,700],{"class":685},[77,2439,2440],{"class":493}," computed",[77,2442,834],{"class":719},[77,2444,2445],{"class":715},"()",[77,2447,810],{"class":711},[77,2449,1224],{"class":719},[77,2451,170],{"class":685},[77,2453,2454],{"class":719},"value",[77,2456,2457],{"class":685},"?.",[77,2459,2460],{"class":719},"scene)\n",[77,2462,2463,2465,2467,2470,2472,2474,2477],{"class":489,"line":840},[77,2464,784],{"class":711},[77,2466,716],{"class":715},[77,2468,2469],{"class":719}," nodes ",[77,2471,723],{"class":715},[77,2473,790],{"class":685},[77,2475,2476],{"class":493}," useGraph",[77,2478,2479],{"class":719},"(scene)\n",[77,2481,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502,2504],{"class":489,"line":862},[77,2483,784],{"class":711},[77,2485,2370],{"class":719},[77,2487,700],{"class":685},[77,2489,2440],{"class":493},[77,2491,834],{"class":719},[77,2493,2445],{"class":715},[77,2495,810],{"class":711},[77,2497,1536],{"class":719},[77,2499,170],{"class":685},[77,2501,2454],{"class":719},[77,2503,2457],{"class":685},[77,2505,2506],{"class":719},"Octane_Body_0)\n",[77,2508,2509,2511,2513],{"class":489,"line":868},[77,2510,921],{"class":685},[77,2512,690],{"class":689},[77,2514,706],{"class":685},[14,2516,2517],{},[33,2518,2139,2519,800],{},[233,2520,2091],{},[479,2522,2524],{"className":675,"code":2523,"language":678,"meta":388,"style":388},"\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",[233,2525,2526,2536,2540,2558,2583,2588,2594,2598,2603,2621,2642,2646,2652],{"__ignoreMap":388},[77,2527,2528,2530,2532,2534],{"class":489,"line":490},[77,2529,686],{"class":685},[77,2531,690],{"class":689},[77,2533,694],{"class":693},[77,2535,706],{"class":685},[77,2537,2538],{"class":489,"line":389},[77,2539,2345],{"class":777},[77,2541,2542,2544,2546,2549,2551,2553,2556],{"class":489,"line":732},[77,2543,784],{"class":711},[77,2545,716],{"class":715},[77,2547,2548],{"class":719}," onLoop ",[77,2550,723],{"class":715},[77,2552,790],{"class":685},[77,2554,2555],{"class":493}," useRenderLoop",[77,2557,2179],{"class":719},[77,2559,2560,2563,2565,2568,2571,2573,2576,2579,2581],{"class":489,"line":749},[77,2561,2562],{"class":493},"onLoop",[77,2564,834],{"class":719},[77,2566,2567],{"class":715},"({",[77,2569,2570],{"class":796}," delta",[77,2572,994],{"class":715},[77,2574,2575],{"class":796}," elapsedTime",[77,2577,2578],{"class":715}," })",[77,2580,810],{"class":711},[77,2582,813],{"class":715},[77,2584,2585],{"class":489,"line":768},[77,2586,2587],{"class":777},"  // Animation logic\n",[77,2589,2590,2592],{"class":489,"line":774},[77,2591,723],{"class":715},[77,2593,900],{"class":719},[77,2595,2596],{"class":489,"line":781},[77,2597,771],{"emptyLinePlaceholder":196},[77,2599,2600],{"class":489,"line":816},[77,2601,2602],{"class":777},"// ✅ New v5 syntax\n",[77,2604,2605,2607,2609,2612,2614,2616,2619],{"class":489,"line":840},[77,2606,784],{"class":711},[77,2608,716],{"class":715},[77,2610,2611],{"class":719}," onBeforeRender ",[77,2613,723],{"class":715},[77,2615,790],{"class":685},[77,2617,2618],{"class":493}," useLoop",[77,2620,2179],{"class":719},[77,2622,2623,2626,2628,2630,2632,2634,2636,2638,2640],{"class":489,"line":862},[77,2624,2625],{"class":493},"onBeforeRender",[77,2627,834],{"class":719},[77,2629,2567],{"class":715},[77,2631,2570],{"class":796},[77,2633,994],{"class":715},[77,2635,2575],{"class":796},[77,2637,2578],{"class":715},[77,2639,810],{"class":711},[77,2641,813],{"class":715},[77,2643,2644],{"class":489,"line":868},[77,2645,2587],{"class":777},[77,2647,2648,2650],{"class":489,"line":882},[77,2649,723],{"class":715},[77,2651,900],{"class":719},[77,2653,2654,2656,2658],{"class":489,"line":894},[77,2655,921],{"class":685},[77,2657,690],{"class":689},[77,2659,706],{"class":685},[462,2661,2663],{"id":2662},"trescanvas-event-renaming","TresCanvas Event Renaming",[14,2665,2666],{},"Update your event handlers:",[479,2668,2670],{"className":675,"code":2669,"language":678,"meta":388,"style":388},"\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",[233,2671,2672,2677,2685,2703,2719,2723,2727,2732,2737,2742,2747],{"__ignoreMap":388},[77,2673,2674],{"class":489,"line":490},[77,2675,2676],{"class":777},"\u003C!-- Before (v4) -->\n",[77,2678,2679,2681,2683],{"class":489,"line":389},[77,2680,686],{"class":685},[77,2682,949],{"class":689},[77,2684,1259],{"class":719},[77,2686,2687,2690,2693,2695,2697,2700],{"class":489,"line":732},[77,2688,2689],{"class":715},"  @",[77,2691,2692],{"class":693},"after-render",[77,2694,700],{"class":685},[77,2696,960],{"class":497},[77,2698,2699],{"class":719},"handleAfterRender",[77,2701,2702],{"class":497},"\"\n",[77,2704,2705,2707,2710,2712,2714,2717],{"class":489,"line":749},[77,2706,2689],{"class":715},[77,2708,2709],{"class":693},"before-render",[77,2711,700],{"class":685},[77,2713,960],{"class":497},[77,2715,2716],{"class":719},"handleBeforeRender",[77,2718,2702],{"class":497},[77,2720,2721],{"class":489,"line":768},[77,2722,706],{"class":685},[77,2724,2725],{"class":489,"line":774},[77,2726,771],{"emptyLinePlaceholder":196},[77,2728,2729],{"class":489,"line":781},[77,2730,2731],{"class":719},"\u003C!-- After (v5) -->\n",[77,2733,2734],{"class":489,"line":816},[77,2735,2736],{"class":719},"\u003CTresCanvas \n",[77,2738,2739],{"class":489,"line":840},[77,2740,2741],{"class":719},"  @render=\"handleRender\"\n",[77,2743,2744],{"class":489,"line":862},[77,2745,2746],{"class":719},"  @before-loop=\"handleBeforeLoop\"\n",[77,2748,2749],{"class":489,"line":868},[77,2750,706],{"class":719},[18,2752,2754],{"id":2753},"ready-for-nuxt-4-with-brand-new-devtools","Ready for Nuxt 4 with brand new devtools!",[14,2756,2757],{},"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.",[476,2759,2760,2781],{},[479,2761,2763],{"className":481,"code":2762,"filename":483,"language":484,"meta":388,"style":388},"npx nuxi@latest module add tresjs\n",[233,2764,2765],{"__ignoreMap":388},[77,2766,2767,2769,2772,2775,2778],{"class":489,"line":490},[77,2768,494],{"class":493},[77,2770,2771],{"class":497}," nuxi@latest",[77,2773,2774],{"class":497}," module",[77,2776,2777],{"class":497}," add",[77,2779,2780],{"class":497}," tresjs\n",[479,2782,2784],{"className":481,"code":2783,"filename":523,"language":484,"meta":388,"style":388},"pnpx nuxi@latest module add tresjs\n",[233,2785,2786],{"__ignoreMap":388},[77,2787,2788,2791,2793,2795,2797],{"class":489,"line":490},[77,2789,2790],{"class":493},"pnpx",[77,2792,2771],{"class":497},[77,2794,2774],{"class":497},[77,2796,2777],{"class":497},[77,2798,2780],{"class":497},[14,2800,2801],{},[25,2802],{"src":2803,"alt":2804},"/blog/tresjs-v5/tresjs-nuxt-devtools.png","TresJS Devtools for Nuxt 4",[462,2806,2808],{"id":2807},"inspect-and-debug-your-scene","Inspect and debug your scene",[241,2810,2811,2817,2823],{},[244,2812,2813,2816],{},[33,2814,2815],{},"Scene graph visualization",": Explore your 3D scene hierarchy",[244,2818,2819,2822],{},[33,2820,2821],{},"Real-time property editing",": Modify object properties on the fly",[244,2824,2825,2828],{},[33,2826,2827],{},"Copy values",": Easily copy object properties for use in your code",[14,2830,2831],{},[25,2832],{"src":2833,"alt":2834},"/blog/tresjs-v5/tresjs-devtools-scene-graph.png","TresJS Devtools Scene Graph",[462,2836,2838],{"id":2837},"real-time-performance-monitoring","Real-time performance monitoring",[241,2840,2841,2847,2853],{},[244,2842,2843,2846],{},[33,2844,2845],{},"FPS counter",": Monitor your application's frame rate",[244,2848,2849,2852],{},[33,2850,2851],{},"Memory usage",": Keep an eye on memory consumption",[244,2854,2855,2858],{},[33,2856,2857],{},"Draw calls",": Analyze rendering performance",[14,2860,2861],{},[25,2862],{"src":2863,"alt":2864},"/blog/tresjs-v5/tresjs-devtools-performance.png","TresJS Devtools Performance",[18,2866,2868],{"id":2867},"ecosystem-updates","🌐 Ecosystem Updates",[14,2870,2871],{},"With v5, the entire TresJS ecosystem is evolving:",[241,2873,2874,2882,2888],{},[244,2875,2876,2878,2879,2881],{},[33,2877,340],{}," will receive ",[233,2880,2126],{}," and other utility composables",[244,2883,2884,2887],{},[33,2885,2886],{},"Better modularization"," allows you to import only what you need",[244,2889,2890,2892],{},[33,2891,1686],{}," across all TresJS packages",[18,2894,2896],{"id":2895},"looking-forward","🔮 Looking Forward",[14,2898,2899],{},"TresJS v5 sets the foundation for exciting future developments:",[241,2901,2902,2908,2914,2920],{},[244,2903,2904,2907],{},[33,2905,2906],{},"Full WebGPU feature support"," as the specification stabilizes",[244,2909,2910,2913],{},[33,2911,2912],{},"Enhanced compute shader integration"," for advanced effects",[244,2915,2916,2919],{},[33,2917,2918],{},"Better Vue 3 Composition API integration"," with upcoming features",[244,2921,2922,2925],{},[33,2923,2924],{},"Expanded ecosystem"," with specialized packages for different use cases",[18,2927,2929],{"id":2928},"️-getting-started-with-v5","🛠️ Getting Started with v5",[14,2931,2932],{},"Ready to upgrade? Here's how:",[479,2934,2936],{"className":481,"code":2935,"language":484,"meta":388,"style":388},"# Update TresJS\npnpm add @tresjs/tres@latest\n\n# Update your dependencies\npnpm add @tresjs/cientos@latest # for useTexture and other utilities\n",[233,2937,2938,2943,2952,2956,2961],{"__ignoreMap":388},[77,2939,2940],{"class":489,"line":490},[77,2941,2942],{"class":777},"# Update TresJS\n",[77,2944,2945,2947,2949],{"class":489,"line":389},[77,2946,523],{"class":493},[77,2948,2777],{"class":497},[77,2950,2951],{"class":497}," @tresjs/tres@latest\n",[77,2953,2954],{"class":489,"line":732},[77,2955,771],{"emptyLinePlaceholder":196},[77,2957,2958],{"class":489,"line":749},[77,2959,2960],{"class":777},"# Update your dependencies\n",[77,2962,2963,2965,2967,2970],{"class":489,"line":768},[77,2964,523],{"class":493},[77,2966,2777],{"class":497},[77,2968,2969],{"class":497}," @tresjs/cientos@latest",[77,2971,2972],{"class":777}," # for useTexture and other utilities\n",[14,2974,2975,2976,2981],{},"Check out our ",[38,2977,2980],{"href":2978,"rel":2979},"https://docs.tresjs.org/getting-started/upgrade-guide",[42],"migration guide"," for step-by-step instructions on updating your existing projects.",[18,2983,2985],{"id":2984},"community-contributors","🙏 Community & Contributors",[14,2987,2988],{},"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.",[14,2990,2991,2992,2997],{},"Join our ",[38,2993,2996],{"href":2994,"rel":2995},"https://discord.gg/UCr96AQmWn",[42],"Discord community"," to share your v5 creations and get help with migration!",[2999,3000],"hr",{},[14,3002,3003],{},[3004,3005,3006,3007,3012],"em",{},"Ready to build the future of web 3D with TresJS v5? ",[38,3008,3011],{"href":3009,"rel":3010},"https://docs.tresjs.org/guide/getting-started",[42],"Get started today"," and experience the next generation of declarative Three.js development!",[2999,3014],{},[3016,3017,3019,3032],"card",{"variant":3018},"subtle",[46,3020,3023],{"className":3021},[3022],"w-2/3",[14,3024,3025,3026,3031],{},"In the loving memory of our friend ",[38,3027,3030],{"href":3028,"rel":3029},"https://github.com/justserdar",[42],"Serdar Yerdelen",", we want to dedicate this release to him, the most genuine and gentle soul in our community, you will be deeply missed.",[25,3033],{"src":3034,"className":3035},"/blog/tresjs-v5/serdar.png",[3036,3037,3038],"rounded-full","w-12","h-12",[3040,3041,3042],"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":388,"searchDepth":389,"depth":389,"links":3044},[3045,3053,3057,3061,3062,3063,3064],{"id":420,"depth":389,"text":421,"children":3046},[3047,3048,3049,3050,3051,3052],{"id":464,"depth":732,"text":465},{"id":588,"depth":732,"text":589},{"id":633,"depth":732,"text":634},{"id":1092,"depth":732,"text":1093},{"id":1690,"depth":732,"text":1691},{"id":2030,"depth":732,"text":2031},{"id":2034,"depth":389,"text":2035,"children":3054},[3055,3056],{"id":2038,"depth":732,"text":2039},{"id":2662,"depth":732,"text":2663},{"id":2753,"depth":389,"text":2754,"children":3058},[3059,3060],{"id":2807,"depth":732,"text":2808},{"id":2837,"depth":732,"text":2838},{"id":2867,"depth":389,"text":2868},{"id":2895,"depth":389,"text":2896},{"id":2928,"depth":389,"text":2929},{"id":2984,"depth":389,"text":2985},"release","2025-09-22","Introducing Tres 5.0 with experimentalWebGPU support, reimagined event system and enhanced developer experience",{},"/blog/tresjs-v5",{"title":411,"description":3067},"blog/tresjs-v5","/blog/tresjs-v5/tresjs-v5-thumbnail.png","L2oVIaaDomz_1ZbjtxyS2xN2as7fOChD2smiCCxbh2o",{"id":3075,"title":3076,"author":3077,"body":3079,"category":3065,"date":3755,"description":3756,"draft":401,"extension":402,"meta":3757,"navigation":196,"path":3758,"seo":3759,"stem":3760,"thumbnail":3761,"url":407,"__hash__":3762},"blog/blog/tresjs-post-processing-v1.md","Post-processing v1",[9,3078,8],"damien-montastier",{"type":11,"value":3080,"toc":3746},[3081,3084,3091,3095,3138,3141,3310,3314,3320,3330,3333,3339,3358,3362,3365,3373,3377,3384,3405,3412,3550,3554,3563,3581,3587,3710,3713,3721,3725,3732,3740,3743],[14,3082,3083],{},"We are happy to announce that the post-processing library for TresJS just hit stable v1! 🥳🥳🥳🥳🥳.",[14,3085,3086,3087,3090],{},"This new library allows you to add post-processing effects to your TresJS scenes with ease. It is built on top of the core ",[233,3088,3089],{},"@tresjs/core"," and it is fully compatible with the latest version v4 and three.js.",[18,3092,3094],{"id":3093},"how-to-use","How to use",[476,3096,3097,3112,3125],{},[479,3098,3100],{"className":481,"code":3099,"filename":483,"language":484,"meta":388,"style":388},"npm install @tresjs/post-processing\n",[233,3101,3102],{"__ignoreMap":388},[77,3103,3104,3106,3109],{"class":489,"line":490},[77,3105,483],{"class":493},[77,3107,3108],{"class":497}," install",[77,3110,3111],{"class":497}," @tresjs/post-processing\n",[479,3113,3115],{"className":481,"code":3114,"filename":505,"language":484,"meta":388,"style":388},"yarn add @tresjs/post-processing\n",[233,3116,3117],{"__ignoreMap":388},[77,3118,3119,3121,3123],{"class":489,"line":490},[77,3120,505],{"class":493},[77,3122,2777],{"class":497},[77,3124,3111],{"class":497},[479,3126,3128],{"className":481,"code":3127,"filename":523,"language":484,"meta":388,"style":388},"pnpm add @tresjs/post-processing\n",[233,3129,3130],{"__ignoreMap":388},[77,3131,3132,3134,3136],{"class":489,"line":490},[77,3133,523],{"class":493},[77,3135,2777],{"class":497},[77,3137,3111],{"class":497},[14,3139,3140],{},"And then you can start using the effects in your TresJS components:",[479,3142,3146],{"className":3143,"code":3144,"language":3145,"meta":388,"style":388},"language-html shiki shiki-themes catppuccin-latte catppuccin-latte catppuccin-frappe","\u003Cscript setup lang=\"ts\">\n  import { EffectComposer, UnrealBloom, Glitch } from '@tresjs/post-processing/three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera \n      :args=\"[45,\" 1, 0.1, 1000] />\n    \u003CEffectComposer>\n      \u003CUnrealBloom />\n      \u003CGlitch />\n    \u003C/EffectComposer>\n  \u003C/TresCanvas>\n\u003C/template>\n","html",[233,3147,3148,3164,3191,3202,3206,3214,3228,3236,3257,3266,3276,3285,3294,3302],{"__ignoreMap":388},[77,3149,3150,3152,3154,3156,3158,3160,3162],{"class":489,"line":490},[77,3151,686],{"class":685},[77,3153,690],{"class":689},[77,3155,694],{"class":693},[77,3157,697],{"class":693},[77,3159,700],{"class":685},[77,3161,703],{"class":497},[77,3163,706],{"class":685},[77,3165,3166,3169,3171,3174,3176,3179,3181,3184,3186,3188],{"class":489,"line":389},[77,3167,3168],{"class":711},"  import",[77,3170,716],{"class":715},[77,3172,3173],{"class":719}," EffectComposer",[77,3175,994],{"class":715},[77,3177,3178],{"class":719}," UnrealBloom",[77,3180,994],{"class":715},[77,3182,3183],{"class":719}," Glitch ",[77,3185,723],{"class":715},[77,3187,726],{"class":711},[77,3189,3190],{"class":497}," '@tresjs/post-processing/three'\n",[77,3192,3193,3195,3198,3200],{"class":489,"line":732},[77,3194,686],{"class":719},[77,3196,3197],{"class":685},"/",[77,3199,690],{"class":689},[77,3201,706],{"class":685},[77,3203,3204],{"class":489,"line":749},[77,3205,771],{"emptyLinePlaceholder":196},[77,3207,3208,3210,3212],{"class":489,"line":768},[77,3209,686],{"class":685},[77,3211,938],{"class":689},[77,3213,706],{"class":685},[77,3215,3216,3218,3220,3223,3226],{"class":489,"line":774},[77,3217,946],{"class":685},[77,3219,949],{"class":689},[77,3221,3222],{"class":693}," shadows",[77,3224,3225],{"class":693}," alpha",[77,3227,706],{"class":685},[77,3229,3230,3232,3234],{"class":489,"line":781},[77,3231,973],{"class":685},[77,3233,976],{"class":689},[77,3235,1259],{"class":719},[77,3237,3238,3241,3243,3246,3249,3252,3255],{"class":489,"line":816},[77,3239,3240],{"class":693},"      :args",[77,3242,700],{"class":685},[77,3244,3245],{"class":497},"\"[45,\"",[77,3247,3248],{"class":693}," 1,",[77,3250,3251],{"class":693}," 0.1,",[77,3253,3254],{"class":693}," 1000]",[77,3256,1009],{"class":685},[77,3258,3259,3261,3264],{"class":489,"line":840},[77,3260,973],{"class":685},[77,3262,3263],{"class":689},"EffectComposer",[77,3265,706],{"class":685},[77,3267,3268,3271,3274],{"class":489,"line":862},[77,3269,3270],{"class":685},"      \u003C",[77,3272,3273],{"class":689},"UnrealBloom",[77,3275,1009],{"class":685},[77,3277,3278,3280,3283],{"class":489,"line":868},[77,3279,3270],{"class":685},[77,3281,3282],{"class":689},"Glitch",[77,3284,1009],{"class":685},[77,3286,3287,3290,3292],{"class":489,"line":882},[77,3288,3289],{"class":685},"    \u003C/",[77,3291,3263],{"class":689},[77,3293,706],{"class":685},[77,3295,3296,3298,3300],{"class":489,"line":894},[77,3297,1076],{"class":685},[77,3299,949],{"class":689},[77,3301,706],{"class":685},[77,3303,3304,3306,3308],{"class":489,"line":903},[77,3305,921],{"class":685},[77,3307,938],{"class":689},[77,3309,706],{"class":685},[18,3311,3313],{"id":3312},"what-in-earth-is-post-processing","What in earth is post-processing?",[3315,3316,3317],"blockquote",{},[14,3318,3319],{},"Post-processing is about adding effects on the final image (the render). People mostly use this technique in filmmaking, but we can do it in WebGL too.",[14,3321,3322],{},[3004,3323,3324,3325],{},"Source: ",[38,3326,3329],{"href":3327,"rel":3328},"https://threejs-journey.com/lessons/post-processing#introduction",[42],"Three.js Journey - Post-processing",[14,3331,3332],{},"These effects can be anything from simple color corrections to complex effects like bloom, depth of field, visual glitches and more elaborate fancy effects (like pixelating the whole scene).",[14,3334,3335],{},[25,3336],{"alt":3337,"src":3338},"Post-processing","/blog/tresjs-post-processing-v1/tresjs-post-processing-banner.png",[14,3340,3341,3342,3345,3346,3351,3352,3357],{},"The TresJS ",[233,3343,3344],{},"post-processing"," package leverages both the excellent work done by the pmndrs ",[38,3347,3350],{"href":3348,"rel":3349},"https://github.com/pmndrs/postprocessing",[42],"postprocessing"," package and native ",[38,3353,3356],{"href":3354,"rel":3355},"https://threejs.org/examples/?q=postprocessing#webgl_postprocessing",[42],"Three.js post-processing effects",". Providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful.",[18,3359,3361],{"id":3360},"available-effects","Available effects",[14,3363,3364],{},"The library comes with a set of built-in effects that you can use out of the box, they divide into two groups:",[241,3366,3367,3370],{},[244,3368,3369],{},"Pmndrs effects",[244,3371,3372],{},"Three.js \"native\" efects",[462,3374,3376],{"id":3375},"pmndrs","Pmndrs",[14,3378,3379,3380,3383],{},"Based on Poimandres incredible ",[38,3381,3350],{"href":3348,"rel":3382},[42]," library, the Pmndrs effects are a set of high-quality post-processing effects that you can use in your TresJS scenes. Some of the available effects in this first version are:",[241,3385,3386,3389,3392,3394,3397,3399,3402],{},[244,3387,3388],{},"Bloom",[244,3390,3391],{},"DepthOfField",[244,3393,3282],{},[244,3395,3396],{},"Noise",[244,3398,3282],{},[244,3400,3401],{},"Outline",[244,3403,3404],{},"Pixelation",[14,3406,3407,3408,3411],{},"Poimandres effects can be used by importing them from the ",[233,3409,3410],{},"@tresjs/post-processing/pmndrs"," namespace:",[479,3413,3415],{"className":3143,"code":3414,"language":3145,"meta":388,"style":388},"\u003Cscript setup lang=\"ts\">\n  import { EffectComposer, Glitch, Noise, Vignette } from '@tresjs/post-processing/pmndrs'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CEffectComposer>\n      \u003CGlitch />\n      \u003CNoise />\n      \u003CVignette />\n    \u003C/EffectComposer>\n  \u003C/TresCanvas>\n\u003C/template>\n",[233,3416,3417,3433,3463,3473,3477,3485,3493,3501,3509,3517,3526,3534,3542],{"__ignoreMap":388},[77,3418,3419,3421,3423,3425,3427,3429,3431],{"class":489,"line":490},[77,3420,686],{"class":685},[77,3422,690],{"class":689},[77,3424,694],{"class":693},[77,3426,697],{"class":693},[77,3428,700],{"class":685},[77,3430,703],{"class":497},[77,3432,706],{"class":685},[77,3434,3435,3437,3439,3441,3443,3446,3448,3451,3453,3456,3458,3460],{"class":489,"line":389},[77,3436,3168],{"class":711},[77,3438,716],{"class":715},[77,3440,3173],{"class":719},[77,3442,994],{"class":715},[77,3444,3445],{"class":719}," Glitch",[77,3447,994],{"class":715},[77,3449,3450],{"class":719}," Noise",[77,3452,994],{"class":715},[77,3454,3455],{"class":719}," Vignette ",[77,3457,723],{"class":715},[77,3459,726],{"class":711},[77,3461,3462],{"class":497}," '@tresjs/post-processing/pmndrs'\n",[77,3464,3465,3467,3469,3471],{"class":489,"line":732},[77,3466,686],{"class":719},[77,3468,3197],{"class":685},[77,3470,690],{"class":689},[77,3472,706],{"class":685},[77,3474,3475],{"class":489,"line":749},[77,3476,771],{"emptyLinePlaceholder":196},[77,3478,3479,3481,3483],{"class":489,"line":768},[77,3480,686],{"class":685},[77,3482,938],{"class":689},[77,3484,706],{"class":685},[77,3486,3487,3489,3491],{"class":489,"line":774},[77,3488,946],{"class":685},[77,3490,949],{"class":689},[77,3492,706],{"class":685},[77,3494,3495,3497,3499],{"class":489,"line":781},[77,3496,973],{"class":685},[77,3498,3263],{"class":689},[77,3500,706],{"class":685},[77,3502,3503,3505,3507],{"class":489,"line":816},[77,3504,3270],{"class":685},[77,3506,3282],{"class":689},[77,3508,1009],{"class":685},[77,3510,3511,3513,3515],{"class":489,"line":840},[77,3512,3270],{"class":685},[77,3514,3396],{"class":689},[77,3516,1009],{"class":685},[77,3518,3519,3521,3524],{"class":489,"line":862},[77,3520,3270],{"class":685},[77,3522,3523],{"class":689},"Vignette",[77,3525,1009],{"class":685},[77,3527,3528,3530,3532],{"class":489,"line":868},[77,3529,3289],{"class":685},[77,3531,3263],{"class":689},[77,3533,706],{"class":685},[77,3535,3536,3538,3540],{"class":489,"line":882},[77,3537,1076],{"class":685},[77,3539,949],{"class":689},[77,3541,706],{"class":685},[77,3543,3544,3546,3548],{"class":489,"line":894},[77,3545,921],{"class":685},[77,3547,938],{"class":689},[77,3549,706],{"class":685},[462,3551,3553],{"id":3552},"threejs","Three.js",[14,3555,3556,3557,3562],{},"The native Three.js effects are the post-processing effects based on the official Three.js ",[38,3558,3561],{"href":3559,"rel":3560},"https://threejs.org/examples/?q=postprocessing#webgl_postprocessing_glitch",[42],"examples",". They are a set of effects that you can use in your TresJS scenes. Some of the available effects are:",[241,3564,3565,3567,3570,3573,3575,3578],{},[244,3566,3282],{},[244,3568,3569],{},"Halftone",[244,3571,3572],{},"Output",[244,3574,3404],{},[244,3576,3577],{},"SMAA (antialiasing)",[244,3579,3580],{},"Unreal Bloom",[14,3582,3583,3584,3411],{},"Three.js effects can be used by importing them from the ",[233,3585,3586],{},"@tresjs/post-processing/three",[479,3588,3590],{"className":3143,"code":3589,"language":3145,"meta":388,"style":388},"\u003Cscript setup lang=\"ts\">\n  import { EffectComposer, UnrealBloom, SMAA } from '@tresjs/post-processing/three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CEffectComposer>\n      \u003CUnrealBloom />\n      \u003CSMAA />\n    \u003C/EffectComposer>\n  \u003C/TresCanvas>\n\u003C/template>\n",[233,3591,3592,3608,3631,3641,3645,3653,3661,3669,3677,3686,3694,3702],{"__ignoreMap":388},[77,3593,3594,3596,3598,3600,3602,3604,3606],{"class":489,"line":490},[77,3595,686],{"class":685},[77,3597,690],{"class":689},[77,3599,694],{"class":693},[77,3601,697],{"class":693},[77,3603,700],{"class":685},[77,3605,703],{"class":497},[77,3607,706],{"class":685},[77,3609,3610,3612,3614,3616,3618,3620,3622,3625,3627,3629],{"class":489,"line":389},[77,3611,3168],{"class":711},[77,3613,716],{"class":715},[77,3615,3173],{"class":719},[77,3617,994],{"class":715},[77,3619,3178],{"class":719},[77,3621,994],{"class":715},[77,3623,3624],{"class":719}," SMAA ",[77,3626,723],{"class":715},[77,3628,726],{"class":711},[77,3630,3190],{"class":497},[77,3632,3633,3635,3637,3639],{"class":489,"line":732},[77,3634,686],{"class":719},[77,3636,3197],{"class":685},[77,3638,690],{"class":689},[77,3640,706],{"class":685},[77,3642,3643],{"class":489,"line":749},[77,3644,771],{"emptyLinePlaceholder":196},[77,3646,3647,3649,3651],{"class":489,"line":768},[77,3648,686],{"class":685},[77,3650,938],{"class":689},[77,3652,706],{"class":685},[77,3654,3655,3657,3659],{"class":489,"line":774},[77,3656,946],{"class":685},[77,3658,949],{"class":689},[77,3660,706],{"class":685},[77,3662,3663,3665,3667],{"class":489,"line":781},[77,3664,973],{"class":685},[77,3666,3263],{"class":689},[77,3668,706],{"class":685},[77,3670,3671,3673,3675],{"class":489,"line":816},[77,3672,3270],{"class":685},[77,3674,3273],{"class":689},[77,3676,1009],{"class":685},[77,3678,3679,3681,3684],{"class":489,"line":840},[77,3680,3270],{"class":685},[77,3682,3683],{"class":689},"SMAA",[77,3685,1009],{"class":685},[77,3687,3688,3690,3692],{"class":489,"line":862},[77,3689,3289],{"class":685},[77,3691,3263],{"class":689},[77,3693,706],{"class":685},[77,3695,3696,3698,3700],{"class":489,"line":868},[77,3697,1076],{"class":685},[77,3699,949],{"class":689},[77,3701,706],{"class":685},[77,3703,3704,3706,3708],{"class":489,"line":882},[77,3705,921],{"class":685},[77,3707,938],{"class":689},[77,3709,706],{"class":685},[14,3711,3712],{},"You might find some of the effects duplicated in both namespaces, while the effects are similar, they might have different implementations and features. We recommend you to try both and see which one fits better your needs 😊.",[14,3714,3715,3716,170],{},"Too see a full list of the props and methods available for each effect, please refer to the ",[38,3717,3720],{"href":3718,"rel":3719},"https://post-processing.tresjs.org/guide/",[42],"official documentation",[18,3722,3724],{"id":3723},"give-it-a-try","Give it a try!",[188,3726,3728,3729],{"className":3727,"controls":196},[193],"\n  ",[199,3730],{"src":3731,"type":202},"/blog/tresjs-post-processing-v1/tresjs-post-processing-promo.mp4",[14,3733,3734,3735,3739],{},"We are excited to see what you can create with the new post-processing library for TresJS. If you have any questions, feedback, or just want to share your creations, feel free to join our ",[38,3736,364],{"href":3737,"rel":3738},"https://discord.gg/tresjs",[42]," community.",[14,3741,3742],{},"Happy coding! 🚀🚀🚀🚀🚀",[3040,3744,3745],{},"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}",{"title":388,"searchDepth":389,"depth":389,"links":3747},[3748,3749,3750,3754],{"id":3093,"depth":389,"text":3094},{"id":3312,"depth":389,"text":3313},{"id":3360,"depth":389,"text":3361,"children":3751},[3752,3753],{"id":3375,"depth":732,"text":3376},{"id":3552,"depth":732,"text":3553},{"id":3723,"depth":389,"text":3724},"2024-11-26","The post-processing library for TresJS is finally here!",{},"/blog/tresjs-post-processing-v1",{"title":3076,"description":3756},"blog/tresjs-post-processing-v1","/blog/tresjs-post-processing-v1/tresjs-post-processing.png","4i3NsbSeeEAymjRZ15hHD8vMU174C6s0OA6wLuHINhc",{"id":3764,"title":3765,"author":8,"body":3766,"category":3065,"date":4668,"description":4669,"draft":401,"extension":402,"meta":4670,"navigation":196,"path":4671,"seo":4672,"stem":4673,"thumbnail":4674,"url":407,"__hash__":4675},"blog/blog/tresjs-cientos-v4.md","Cientos v4 is here! 💛",{"type":11,"value":3767,"toc":4648},[3768,3774,3782,3786,3828,3832,3836,3842,3853,3861,3869,3875,3890,3898,4121,4132,4139,4144,4151,4178,4188,4196,4213,4416,4419,4429,4460,4464,4479,4482,4509,4512,4536,4551,4558,4564,4574,4582,4589,4594,4600,4611,4614,4620,4625,4630,4634,4642,4645],[14,3769,3770,3771,3773],{},"We launched the v4 of the core ",[233,3772,3089],{}," on May 2024, 2.5 months after: we are happy to announce that the compatibility version of Cientos v4 is finally here! 🥳🥳🥳🥳🥳.",[14,3775,3776,3777,3781],{},"This new version not only brings the power of the new core but also a lot of improvements and new features to make your development experience even better. Also it contain a couple of breaking changes, so make sure to check the ",[38,3778,2980],{"href":3779,"rel":3780},"https://docs.tresjs.org/cientos/migration-guide",[42]," before updating.",[18,3783,3785],{"id":3784},"how-to-update","How to update",[476,3787,3788,3802,3815],{},[479,3789,3791],{"className":481,"code":3790,"filename":483,"language":484,"meta":388,"style":388},"npm install @tresjs/cientos@latest\n",[233,3792,3793],{"__ignoreMap":388},[77,3794,3795,3797,3799],{"class":489,"line":490},[77,3796,483],{"class":493},[77,3798,3108],{"class":497},[77,3800,3801],{"class":497}," @tresjs/cientos@latest\n",[479,3803,3805],{"className":481,"code":3804,"filename":505,"language":484,"meta":388,"style":388},"yarn add @tresjs/cientos@latest\n",[233,3806,3807],{"__ignoreMap":388},[77,3808,3809,3811,3813],{"class":489,"line":490},[77,3810,505],{"class":493},[77,3812,2777],{"class":497},[77,3814,3801],{"class":497},[479,3816,3818],{"className":481,"code":3817,"filename":523,"language":484,"meta":388,"style":388},"pnpm add @tresjs/cientos@latest\n",[233,3819,3820],{"__ignoreMap":388},[77,3821,3822,3824,3826],{"class":489,"line":490},[77,3823,523],{"class":493},[77,3825,2777],{"class":497},[77,3827,3801],{"class":497},[18,3829,3831],{"id":3830},"whats-hot-in-cientos-v4-️","What's hot in Cientos v4 🌶️ ?",[462,3833,3835],{"id":3834},"updated-to-the-latest-core-version","Updated to the latest core version",[14,3837,3838,3839,3841],{},"Cientos v4 is now compatible with the latest version of the core ",[233,3840,3089],{}," v4. This means that you can now enjoy all the new features and improvements of the core while using Cientos.",[14,3843,3844,3845,3848,3849,3852],{},"We also included full ",[233,3846,3847],{},"on-demand"," rendering support to all components, so you can now have a better control over the rendering process. For example, ",[233,3850,3851],{},"OrbitControls"," will automatically invalidate the frame when the camera moves.",[14,3854,3855,3856,170],{},"For more information about the new features of the core, check out the ",[38,3857,3860],{"href":3858,"rel":3859},"https://tresjs.org/blog/whats-hot-on-tresjs-v4/",[42],"official blog post",[462,3862,3864,3865,3868],{"id":3863},"new-animatedsprite-component","New ",[233,3866,3867],{},"AnimatedSprite"," component",[188,3870,3728,3872],{"className":3871,"controls":196},[193],[199,3873],{"src":3874,"type":202},"/blog/tresjs-cientos-v4/animated-sprite.mp4",[14,3876,3877,3880,3881,3886,3887,3889],{},[233,3878,3879],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[38,3882,3885],{"href":3883,"rel":3884},"https://en.wikipedia.org/wiki/Texture_atlas",[42],"texture atlas",". A typical ",[233,3888,3879],{}," will use:",[241,3891,3892,3895],{},[244,3893,3894],{},"an image containing multiple sprites",[244,3896,3897],{},"a JSON atlas containing the individual sprite coordinates in the image",[479,3899,3901],{"className":3143,"code":3900,"language":3145,"meta":388,"style":388},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { AnimatedSprite } from '@tresjs/cientos'\n\nconst ASSETS_URL = 'https://raw.githubusercontent.com/Tresjs/'\n  + 'assets/main/textures/animated-sprite/'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#FBB03B\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 15]\" />\n    \u003CSuspense>\n      \u003CAnimatedSprite\n        :image=\"`${ASSETS_URL}cientosTexture.png`\"\n        :atlas=\"`${ASSETS_URL}cientosAtlas.json`\"\n        animation=\"cientosIdle\"\n        :fps=\"15\"\n        :loop=\"true\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[233,3902,3903,3919,3933,3948,3952,3964,3972,3982,3986,3994,4010,4026,4035,4042,4052,4062,4072,4082,4092,4097,4105,4113],{"__ignoreMap":388},[77,3904,3905,3907,3909,3911,3913,3915,3917],{"class":489,"line":490},[77,3906,686],{"class":685},[77,3908,690],{"class":689},[77,3910,694],{"class":693},[77,3912,697],{"class":693},[77,3914,700],{"class":685},[77,3916,703],{"class":497},[77,3918,706],{"class":685},[77,3920,3921,3923,3925,3927,3929,3931],{"class":489,"line":389},[77,3922,712],{"class":711},[77,3924,716],{"class":715},[77,3926,720],{"class":719},[77,3928,723],{"class":715},[77,3930,726],{"class":711},[77,3932,729],{"class":497},[77,3934,3935,3937,3939,3942,3944,3946],{"class":489,"line":732},[77,3936,712],{"class":711},[77,3938,716],{"class":715},[77,3940,3941],{"class":719}," AnimatedSprite ",[77,3943,723],{"class":715},[77,3945,726],{"class":711},[77,3947,1514],{"class":497},[77,3949,3950],{"class":489,"line":749},[77,3951,771],{"emptyLinePlaceholder":196},[77,3953,3954,3956,3959,3961],{"class":489,"line":768},[77,3955,784],{"class":711},[77,3957,3958],{"class":719}," ASSETS_URL ",[77,3960,700],{"class":685},[77,3962,3963],{"class":497}," 'https://raw.githubusercontent.com/Tresjs/'\n",[77,3965,3966,3969],{"class":489,"line":774},[77,3967,3968],{"class":685},"  +",[77,3970,3971],{"class":497}," 'assets/main/textures/animated-sprite/'\n",[77,3973,3974,3976,3978,3980],{"class":489,"line":781},[77,3975,686],{"class":719},[77,3977,3197],{"class":685},[77,3979,690],{"class":689},[77,3981,706],{"class":685},[77,3983,3984],{"class":489,"line":816},[77,3985,771],{"emptyLinePlaceholder":196},[77,3987,3988,3990,3992],{"class":489,"line":840},[77,3989,686],{"class":685},[77,3991,938],{"class":689},[77,3993,706],{"class":685},[77,3995,3996,3998,4000,4003,4005,4008],{"class":489,"line":862},[77,3997,946],{"class":685},[77,3999,949],{"class":689},[77,4001,4002],{"class":693}," clear-color",[77,4004,700],{"class":685},[77,4006,4007],{"class":497},"\"#FBB03B\"",[77,4009,706],{"class":685},[77,4011,4012,4014,4016,4019,4021,4024],{"class":489,"line":868},[77,4013,973],{"class":685},[77,4015,976],{"class":689},[77,4017,4018],{"class":693}," :position",[77,4020,700],{"class":685},[77,4022,4023],{"class":497},"\"[0, 0, 15]\"",[77,4025,1009],{"class":685},[77,4027,4028,4030,4033],{"class":489,"line":882},[77,4029,973],{"class":685},[77,4031,4032],{"class":689},"Suspense",[77,4034,706],{"class":685},[77,4036,4037,4039],{"class":489,"line":894},[77,4038,3270],{"class":685},[77,4040,4041],{"class":689},"AnimatedSprite\n",[77,4043,4044,4047,4049],{"class":489,"line":903},[77,4045,4046],{"class":693},"        :image",[77,4048,700],{"class":685},[77,4050,4051],{"class":497},"\"`${ASSETS_URL}cientosTexture.png`\"\n",[77,4053,4054,4057,4059],{"class":489,"line":912},[77,4055,4056],{"class":693},"        :atlas",[77,4058,700],{"class":685},[77,4060,4061],{"class":497},"\"`${ASSETS_URL}cientosAtlas.json`\"\n",[77,4063,4064,4067,4069],{"class":489,"line":918},[77,4065,4066],{"class":693},"        animation",[77,4068,700],{"class":685},[77,4070,4071],{"class":497},"\"cientosIdle\"\n",[77,4073,4074,4077,4079],{"class":489,"line":928},[77,4075,4076],{"class":693},"        :fps",[77,4078,700],{"class":685},[77,4080,4081],{"class":497},"\"15\"\n",[77,4083,4084,4087,4089],{"class":489,"line":933},[77,4085,4086],{"class":693},"        :loop",[77,4088,700],{"class":685},[77,4090,4091],{"class":497},"\"true\"\n",[77,4093,4094],{"class":489,"line":943},[77,4095,4096],{"class":685},"      />\n",[77,4098,4099,4101,4103],{"class":489,"line":970},[77,4100,3289],{"class":685},[77,4102,4032],{"class":689},[77,4104,706],{"class":685},[77,4106,4107,4109,4111],{"class":489,"line":1012},[77,4108,1076],{"class":685},[77,4110,949],{"class":689},[77,4112,706],{"class":685},[77,4114,4115,4117,4119],{"class":489,"line":1049},[77,4116,921],{"class":685},[77,4118,938],{"class":689},[77,4120,706],{"class":685},[14,4122,4123,4124,4128,4129,4131],{},"Checkout the ",[38,4125,3720],{"href":4126,"rel":4127},"https://cientos.tresjs.org/guide/abstractions/animated-sprite.html",[42]," to learn more about the posibilities of the ",[233,4130,3879],{}," component.",[462,4133,1735,4135,4138],{"id":4134},"removed-tweakpane-dependency-breaking-change",[233,4136,4137],{},"tweakpane"," dependency (breaking change)",[14,4140,4141],{},[25,4142],{"alt":4137,"src":4143},"/blog/tresjs-cientos-v4/tweakpane-bundle-size.png",[14,4145,4146,4147,4150],{},"After some iteration, we decided to drop the instance of ",[233,4148,4149],{},"useTweakPane",". Some of the reasons are:",[241,4152,4153,4161,4164,4167,4170],{},[244,4154,4155,4156],{},"No compatibility with the v4 of ",[38,4157,4160],{"href":4158,"rel":4159},"https://tweakpane.github.io/docs/",[42],"TweakPane",[244,4162,4163],{},"Reduce the bundle size",[244,4165,4166],{},"No real value added",[244,4168,4169],{},"Not so intuitive, lots of code repetition",[244,4171,4172,4173],{},"Support for the upcoming pkg ",[38,4174,4177],{"href":4175,"rel":4176},"https://tresleches.tresjs.org/",[42],"Leches",[14,4179,4180,4181,4183,4184],{},"You can check this recipe on the tres docs on how to use ",[233,4182,4137],{}," directly with tres: ",[38,4185,4160],{"href":4186,"rel":4187},"https://docs.tresjs.org/cookbook/tweakpane.html",[42],[462,4189,4191,4192,4195],{"id":4190},"updated-defineexport-properties","Updated ",[233,4193,4194],{},"defineExport"," properties",[14,4197,4198,4199,4201,4202,4204,4205,4208,4209,4212],{},"Since the beginning we exported our components' underlying ",[233,4200,3553],{}," instances using the name ",[233,4203,2454],{},". This created a very ambiguos situation with some components. When we access them using a ",[233,4206,4207],{},"ref"," in ",[233,4210,4211],{},"\u003Ctemplate>",", we ended up with something like:",[479,4214,4216],{"className":3143,"code":4215,"language":3145,"meta":388,"style":388},"\u003Cscript>\nimport { shallowRef, watch } from 'vue'\nimport { TresCanvas } from '@tresjs/core'\nimport { Stars } from '@tresjs/cientos'\n\nconst starsRef = shallowRef()\n\nwatch(starsRef, () => {\n  // to access the instance we have a nested `value.value`\n  console.log(starsRef.value.value)\n  // Wrong in v4 ❌\n})\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas>\n    ...\n    \u003CStars ref=\"starsRef\" />\n    ...\n  \u003C/TresCanvas>\n\u003C/template>\n",[233,4217,4218,4226,4247,4261,4276,4280,4293,4297,4313,4318,4337,4342,4348,4358,4366,4374,4379,4396,4400,4408],{"__ignoreMap":388},[77,4219,4220,4222,4224],{"class":489,"line":490},[77,4221,686],{"class":685},[77,4223,690],{"class":689},[77,4225,706],{"class":685},[77,4227,4228,4230,4232,4235,4237,4240,4242,4244],{"class":489,"line":389},[77,4229,712],{"class":711},[77,4231,716],{"class":715},[77,4233,4234],{"class":719}," shallowRef",[77,4236,994],{"class":715},[77,4238,4239],{"class":719}," watch ",[77,4241,723],{"class":715},[77,4243,726],{"class":711},[77,4245,4246],{"class":497}," 'vue'\n",[77,4248,4249,4251,4253,4255,4257,4259],{"class":489,"line":732},[77,4250,712],{"class":711},[77,4252,716],{"class":715},[77,4254,720],{"class":719},[77,4256,723],{"class":715},[77,4258,726],{"class":711},[77,4260,729],{"class":497},[77,4262,4263,4265,4267,4270,4272,4274],{"class":489,"line":749},[77,4264,712],{"class":711},[77,4266,716],{"class":715},[77,4268,4269],{"class":719}," Stars ",[77,4271,723],{"class":715},[77,4273,726],{"class":711},[77,4275,1514],{"class":497},[77,4277,4278],{"class":489,"line":768},[77,4279,771],{"emptyLinePlaceholder":196},[77,4281,4282,4284,4287,4289,4291],{"class":489,"line":774},[77,4283,784],{"class":711},[77,4285,4286],{"class":719}," starsRef ",[77,4288,700],{"class":685},[77,4290,4234],{"class":493},[77,4292,2179],{"class":719},[77,4294,4295],{"class":489,"line":781},[77,4296,771],{"emptyLinePlaceholder":196},[77,4298,4299,4301,4304,4306,4309,4311],{"class":489,"line":816},[77,4300,1282],{"class":493},[77,4302,4303],{"class":719},"(starsRef",[77,4305,994],{"class":715},[77,4307,4308],{"class":715}," ()",[77,4310,810],{"class":711},[77,4312,813],{"class":715},[77,4314,4315],{"class":489,"line":840},[77,4316,4317],{"class":777},"  // to access the instance we have a nested `value.value`\n",[77,4319,4320,4322,4324,4326,4328,4330,4332,4334],{"class":489,"line":862},[77,4321,1358],{"class":719},[77,4323,170],{"class":685},[77,4325,1311],{"class":493},[77,4327,4303],{"class":719},[77,4329,170],{"class":685},[77,4331,2454],{"class":719},[77,4333,170],{"class":685},[77,4335,4336],{"class":719},"value)\n",[77,4338,4339],{"class":489,"line":868},[77,4340,4341],{"class":777},"  // Wrong in v4 ❌\n",[77,4343,4344,4346],{"class":489,"line":882},[77,4345,723],{"class":715},[77,4347,900],{"class":719},[77,4349,4350,4352,4354,4356],{"class":489,"line":894},[77,4351,686],{"class":719},[77,4353,3197],{"class":685},[77,4355,690],{"class":689},[77,4357,706],{"class":685},[77,4359,4360,4362,4364],{"class":489,"line":903},[77,4361,686],{"class":685},[77,4363,938],{"class":689},[77,4365,706],{"class":685},[77,4367,4368,4370,4372],{"class":489,"line":912},[77,4369,946],{"class":685},[77,4371,949],{"class":689},[77,4373,706],{"class":685},[77,4375,4376],{"class":489,"line":918},[77,4377,4378],{"class":719},"    ...\n",[77,4380,4381,4383,4386,4389,4391,4394],{"class":489,"line":928},[77,4382,973],{"class":685},[77,4384,4385],{"class":689},"Stars",[77,4387,4388],{"class":693}," ref",[77,4390,700],{"class":685},[77,4392,4393],{"class":497},"\"starsRef\"",[77,4395,1009],{"class":685},[77,4397,4398],{"class":489,"line":933},[77,4399,4378],{"class":719},[77,4401,4402,4404,4406],{"class":489,"line":943},[77,4403,1076],{"class":685},[77,4405,949],{"class":689},[77,4407,706],{"class":685},[77,4409,4410,4412,4414],{"class":489,"line":970},[77,4411,921],{"class":685},[77,4413,938],{"class":689},[77,4415,706],{"class":685},[14,4417,4418],{},"This created confusion and was not good DX. Unfortunately, to fix this, a breaking change needed to be introduced, and we felt this was the right moment.",[14,4420,4421,4422,4424,4425,4428],{},"The new implementation is very similar, but instead of two confusing ",[233,4423,2454],{},"s we have standardized all our components with ",[233,4426,4427],{},"instance",", so to access the components now use:",[479,4430,4434],{"className":4431,"code":4432,"language":4433,"meta":388,"style":388},"language-js shiki shiki-themes catppuccin-latte catppuccin-latte catppuccin-frappe","// Correct in v4 ✅\nconsole.log(starsRef.value.instance)\n","js",[233,4435,4436,4441],{"__ignoreMap":388},[77,4437,4438],{"class":489,"line":490},[77,4439,4440],{"class":777},"// Correct in v4 ✅\n",[77,4442,4443,4446,4448,4450,4452,4454,4456,4458],{"class":489,"line":389},[77,4444,4445],{"class":719},"console",[77,4447,170],{"class":685},[77,4449,1311],{"class":493},[77,4451,4303],{"class":719},[77,4453,170],{"class":685},[77,4455,2454],{"class":719},[77,4457,170],{"class":685},[77,4459,2252],{"class":719},[462,4461,4463],{"id":4462},"move-directives-to-core","Move directives to core",[14,4465,4466,4467,4470,4471,4473,4474,170],{},"The use of ",[233,4468,4469],{},"directives"," started as a experiment to see how valuable it would be for the ecosystem. Since it has had a good reception, we have decided that it is appropriate for the ",[233,4472,4469],{}," to live under the core pkg ",[38,4475,4478],{"href":4476,"rel":4477},"https://docs.tresjs.org/directives/v-log.html",[42],"Directives section",[14,4480,4481],{},"So now you have to import your directives from the core:",[479,4483,4487],{"className":4484,"code":4485,"language":4486,"meta":388,"style":388},"language-ts shiki shiki-themes catppuccin-latte catppuccin-latte catppuccin-frappe","// Correct ✅\nimport { vLog } from '@tresjs/core'\n","ts",[233,4488,4489,4494],{"__ignoreMap":388},[77,4490,4491],{"class":489,"line":490},[77,4492,4493],{"class":777},"// Correct ✅\n",[77,4495,4496,4498,4500,4503,4505,4507],{"class":489,"line":389},[77,4497,712],{"class":711},[77,4499,716],{"class":715},[77,4501,4502],{"class":719}," vLog ",[77,4504,723],{"class":715},[77,4506,726],{"class":711},[77,4508,729],{"class":497},[14,4510,4511],{},"Instead of:",[479,4513,4515],{"className":4484,"code":4514,"language":4486,"meta":388,"style":388},"// Wrong ❌\nimport { vLog } from '@tresjs/cientos'\n",[233,4516,4517,4522],{"__ignoreMap":388},[77,4518,4519],{"class":489,"line":490},[77,4520,4521],{"class":777},"// Wrong ❌\n",[77,4523,4524,4526,4528,4530,4532,4534],{"class":489,"line":389},[77,4525,712],{"class":711},[77,4527,716],{"class":715},[77,4529,4502],{"class":719},[77,4531,723],{"class":715},[77,4533,726],{"class":711},[77,4535,1514],{"class":497},[623,4537,4538],{},[14,4539,4540,4541,4543,4544,1479,4547,4550],{},"Since the addition of the new ",[233,4542,2094],{}," method, ",[233,4545,4546],{},"vAlwaysLookAt",[233,4548,4549],{},"vRotate"," have been temporarily removed.",[462,4552,4554,4555],{"id":4553},"changes-in-keyboardcontrols","Changes in ",[233,4556,4557],{},"KeyboardControls",[14,4559,4560,4561,4563],{},"The implementation of ",[233,4562,4557],{}," has been changed, since this component doesn't provide the right setup for what was originally developed. We took the decision to adopt floating controls similar to Unreal Engine 5, which make more sense given the name of this component.",[14,4565,4566,4567,4570,4571,4573],{},"We have also brought the ",[233,4568,4569],{},"PointerLockControls"," inside ",[233,4572,4557],{},", so you don't have to set it up manually.",[14,4575,4576,4577,170],{},"Learn more about it ",[38,4578,4581],{"href":4579,"rel":4580},"https://cientos.tresjs.org/guide/controls/keyboard-controls.html",[42],"here",[462,4583,4585,4586],{"id":4584},"refactor-meshreflectionmaterial","Refactor ",[233,4587,4588],{},"MeshReflectionMaterial",[14,4590,4591],{},[25,4592],{"alt":4588,"src":4593},"/blog/tresjs-cientos-v4/mesh-reflection-material.png",[14,4595,4596,4597,4599],{},"In the latest update to the ",[233,4598,4588],{},", several bug fixes and new features were introduced to enhance the user experience.",[14,4601,4602,4603,4606,4607,4610],{},"A key issue was ",[33,4604,4605],{},"broken blur features",", which have now been repaired, allowing for smoother and more realistic reflections. The update also addresses memory leaks by adding proper resource disposal for ",[233,4608,4609],{},"blurPass",", improving performance in long-running scenes.",[14,4612,4613],{},"Additionally, the reorganization of material properties allows for more precise control over visual fidelity, giving developers greater flexibility when creating reflections in their scenes. These improvements result in smoother, more efficient rendering.",[462,4615,4585,4617],{"id":4616},"refactor-contactshadows",[233,4618,4619],{},"ContactShadows",[14,4621,4622],{},[25,4623],{"alt":4619,"src":4624},"/blog/tresjs-cientos-v4/contact-shadows.png",[14,4626,1117,4627,4629],{},[233,4628,4619],{}," component has been refactored to improve performance and stability. The new implementation provides more accurate shadow rendering, reducing artifacts and improving visual quality.",[18,4631,4633],{"id":4632},"give-us-your-feedback","Give us your feedback!",[14,4635,4636,4637],{},"We are very excited about this new version of Cientos and we hope you are too! We would love to hear your feedback, so please feel free to reach out to us on the ",[38,4638,4641],{"href":4639,"rel":4640},"https://discord.gg/V8ZPvGHSQd",[42],"Discord channel",[14,4643,4644],{},"Give some love to the contributors that make it happen. 🙌 💛",[3040,4646,4647],{},"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}",{"title":388,"searchDepth":389,"depth":389,"links":4649},[4650,4651,4667],{"id":3784,"depth":389,"text":3785},{"id":3830,"depth":389,"text":3831,"children":4652},[4653,4654,4656,4658,4660,4661,4663,4665],{"id":3834,"depth":732,"text":3835},{"id":3863,"depth":732,"text":4655},"New AnimatedSprite component",{"id":4134,"depth":732,"text":4657},"Removed tweakpane dependency (breaking change)",{"id":4190,"depth":732,"text":4659},"Updated defineExport properties",{"id":4462,"depth":732,"text":4463},{"id":4553,"depth":732,"text":4662},"Changes in KeyboardControls",{"id":4584,"depth":732,"text":4664},"Refactor MeshReflectionMaterial",{"id":4616,"depth":732,"text":4666},"Refactor ContactShadows",{"id":4632,"depth":389,"text":4633},"2024-08-20","The compatibility version of Cientos for the core v4 is finally here!",{},"/blog/tresjs-cientos-v4",{"title":3765,"description":4669},"blog/tresjs-cientos-v4","/blog/tresjs-cientos-v4/tresjs-cientos-v4.png","0d15TQJdpm0UTckEM1PJ0Il8Lbz7Ln8kZd4AAXzhxNg",{"id":4677,"title":4678,"author":8,"body":4679,"category":3065,"date":6640,"description":6641,"draft":401,"extension":402,"meta":6642,"navigation":196,"path":6643,"seo":6644,"stem":6645,"thumbnail":6646,"url":407,"__hash__":6647},"blog/blog/whats-hot-on-tresjs-v4.md","What's hot in TresJS v4 🔥",{"type":11,"value":4680,"toc":6624},[4681,4684,4687,4690,4720,4723,4728,4753,4756,4763,4769,4787,4833,4839,4850,4964,4968,4971,5005,5014,5104,5107,5114,5135,5142,5174,5178,5183,5190,5232,5238,5242,5245,5415,5422,5510,5514,5521,5619,5623,5645,5649,5662,5682,5691,5883,5886,5890,5897,5972,5977,5981,5987,6040,6044,6054,6138,6142,6145,6230,6234,6244,6362,6366,6374,6480,6484,6495,6583,6587,6592,6607,6611,6618,6621],[14,4682,4683],{},"TresJS v4 is the biggest version of TresJS yet! 🎉 We are super excited to show you all the new features we have stored for you in this new major version",[14,4685,4686],{},"The truth is, after 1 year of life, TresJS has grown a lot and we have learned a lot from the community and the users.",[14,4688,4689],{},"We recollected feedback, A LOT of it:",[241,4691,4692,4695,4698,4701,4704,4707,4714,4717],{},[244,4693,4694],{},"Performance issues 😅",[244,4696,4697],{},"On-demand rendering 👀",[244,4699,4700],{},"Type issues after ThreeJS v156 🥲",[244,4702,4703],{},"Memory Leak on route change 🫠",[244,4705,4706],{},"Events propagation issues 🤯",[244,4708,4709,4710,4713],{},"Event handlers on ",[233,4711,4712],{},"primitives"," 🫣",[244,4715,4716],{},"Please add a take-over render loop mode",[244,4718,4719],{},"Lot of issues with current loop approach.",[14,4721,4722],{},"And we have been working hard to solve all of them.",[4724,4725,4727],"h1",{"id":4726},"whats-hot-in-tresjs-v4","What's hot in TresJS v4",[241,4729,4730,4733,4736,4739,4744,4747,4750],{},[244,4731,4732],{},"On-demand Rendering",[244,4734,4735],{},"Refactored Event Store and Propagation logic",[244,4737,4738],{},"Added event handlers to primitives",[244,4740,4741,4743],{},[233,4742,1440],{}," prop on primitives is now reactive.",[244,4745,4746],{},"Better disposal of resources for memory management",[244,4748,4749],{},"New approach for the render and update loops",[244,4751,4752],{},"A LOT of bug fixes and improvements",[18,4754,4732],{"id":4755},"on-demand-rendering",[14,4757,4758,4759,4762],{},"Until now, the render loops ",[33,4760,4761],{},"always"," render.",[14,4764,1117,4765,4768],{},[233,4766,4767],{},"renderMode"," prop has been added:",[241,4770,4771],{},[244,4772,4773,4775,4776],{},[233,4774,3847],{}," will automatically invalidate the frame on:\n",[241,4777,4778,4781,4784],{},[244,4779,4780],{},"Instances prop changes",[244,4782,4783],{},"Context state change (resize, clearColor etc)",[244,4785,4786],{},"remove nodes (v-if)",[479,4788,4790],{"className":3143,"code":4789,"language":3145,"meta":388,"style":388},"\u003CTresCanvas\n  render-mode=\"on-demand\"\n  clear-color=\"#82DBC5\"\n  @render=\"onRender\"\n>\n",[233,4791,4792,4799,4809,4819,4829],{"__ignoreMap":388},[77,4793,4794,4796],{"class":489,"line":490},[77,4795,686],{"class":685},[77,4797,4798],{"class":689},"TresCanvas\n",[77,4800,4801,4804,4806],{"class":489,"line":389},[77,4802,4803],{"class":693},"  render-mode",[77,4805,700],{"class":685},[77,4807,4808],{"class":497},"\"on-demand\"\n",[77,4810,4811,4814,4816],{"class":489,"line":732},[77,4812,4813],{"class":693},"  clear-color",[77,4815,700],{"class":685},[77,4817,4818],{"class":497},"\"#82DBC5\"\n",[77,4820,4821,4824,4826],{"class":489,"line":749},[77,4822,4823],{"class":693},"  @render",[77,4825,700],{"class":685},[77,4827,4828],{"class":497},"\"onRender\"\n",[77,4830,4831],{"class":489,"line":768},[77,4832,706],{"class":685},[188,4834,3728,4836],{"className":4835,"controls":196},[193],[199,4837],{"src":4838,"type":202},"/blog/whats-hot-v4/on-demand-rendering.mp4",[14,4840,4841,4842,4845,4846,4849],{},"Since it is not really possible to observe all the possible changes in your application, you can also manually invalidate the frame by calling the ",[233,4843,4844],{},"invalidate()"," method from the ",[233,4847,4848],{},"useTres"," composable:",[479,4851,4853],{"className":4484,"code":4852,"language":4486,"meta":388,"style":388},"import { useTres } from '@tresjs/core'\n\nconst boxRef = ref()\nconst { invalidate } = useTres()\n\nwatch(boxRef.value, () => {\n  boxRef.value.position.x = 1\n  invalidate()\n})\n",[233,4854,4855,4870,4874,4887,4905,4909,4928,4951,4958],{"__ignoreMap":388},[77,4856,4857,4859,4861,4864,4866,4868],{"class":489,"line":490},[77,4858,712],{"class":711},[77,4860,716],{"class":715},[77,4862,4863],{"class":719}," useTres ",[77,4865,723],{"class":715},[77,4867,726],{"class":711},[77,4869,729],{"class":497},[77,4871,4872],{"class":489,"line":389},[77,4873,771],{"emptyLinePlaceholder":196},[77,4875,4876,4878,4881,4883,4885],{"class":489,"line":732},[77,4877,784],{"class":711},[77,4879,4880],{"class":719}," boxRef ",[77,4882,700],{"class":685},[77,4884,4388],{"class":493},[77,4886,2179],{"class":719},[77,4888,4889,4891,4893,4896,4898,4900,4903],{"class":489,"line":749},[77,4890,784],{"class":711},[77,4892,716],{"class":715},[77,4894,4895],{"class":719}," invalidate ",[77,4897,723],{"class":715},[77,4899,790],{"class":685},[77,4901,4902],{"class":493}," useTres",[77,4904,2179],{"class":719},[77,4906,4907],{"class":489,"line":768},[77,4908,771],{"emptyLinePlaceholder":196},[77,4910,4911,4913,4916,4918,4920,4922,4924,4926],{"class":489,"line":774},[77,4912,1282],{"class":493},[77,4914,4915],{"class":719},"(boxRef",[77,4917,170],{"class":685},[77,4919,2454],{"class":719},[77,4921,994],{"class":715},[77,4923,4308],{"class":715},[77,4925,810],{"class":685},[77,4927,813],{"class":715},[77,4929,4930,4933,4935,4937,4939,4941,4943,4946,4948],{"class":489,"line":781},[77,4931,4932],{"class":719},"  boxRef",[77,4934,170],{"class":685},[77,4936,2454],{"class":719},[77,4938,170],{"class":685},[77,4940,981],{"class":719},[77,4942,170],{"class":685},[77,4944,4945],{"class":719},"x ",[77,4947,700],{"class":685},[77,4949,4950],{"class":876}," 1\n",[77,4952,4953,4956],{"class":489,"line":816},[77,4954,4955],{"class":493},"  invalidate",[77,4957,2179],{"class":719},[77,4959,4960,4962],{"class":489,"line":840},[77,4961,723],{"class":715},[77,4963,900],{"class":719},[18,4965,4967],{"id":4966},"mode-manual","Mode manual",[14,4969,4970],{},"If you want to have full control of when the scene is rendered, you can set the render-mode prop to manual:",[479,4972,4974],{"className":3143,"code":4973,"language":3145,"meta":388,"style":388},"\u003CTresCanvas render-mode=\"manual\">\n  \u003C!-- Your scene goes here -->\n\u003C/TresCanvas>\n",[233,4975,4976,4992,4997],{"__ignoreMap":388},[77,4977,4978,4980,4982,4985,4987,4990],{"class":489,"line":490},[77,4979,686],{"class":685},[77,4981,949],{"class":689},[77,4983,4984],{"class":693}," render-mode",[77,4986,700],{"class":685},[77,4988,4989],{"class":497},"\"manual\"",[77,4991,706],{"class":685},[77,4993,4994],{"class":489,"line":389},[77,4995,4996],{"class":777},"  \u003C!-- Your scene goes here -->\n",[77,4998,4999,5001,5003],{"class":489,"line":732},[77,5000,921],{"class":685},[77,5002,949],{"class":689},[77,5004,706],{"class":685},[14,5006,5007,5008,4845,5011,5013],{},"In this mode, Tres will not render the scene automatically. You will need to call the ",[233,5009,5010],{},"advance()",[233,5012,4848],{}," composable to render the scene:",[479,5015,5017],{"className":3143,"code":5016,"language":3145,"meta":388,"style":388},"\u003Cscript setup>\nimport { useTres } from '@tresjs/core'\n\nconst { advance } = useTres()\n\nonMounted(() => {\n  advance()\n})\n\u003C/script>\n",[233,5018,5019,5029,5043,5047,5064,5068,5081,5088,5094],{"__ignoreMap":388},[77,5020,5021,5023,5025,5027],{"class":489,"line":490},[77,5022,686],{"class":685},[77,5024,690],{"class":689},[77,5026,694],{"class":693},[77,5028,706],{"class":685},[77,5030,5031,5033,5035,5037,5039,5041],{"class":489,"line":389},[77,5032,712],{"class":711},[77,5034,716],{"class":715},[77,5036,4863],{"class":719},[77,5038,723],{"class":715},[77,5040,726],{"class":711},[77,5042,729],{"class":497},[77,5044,5045],{"class":489,"line":732},[77,5046,771],{"emptyLinePlaceholder":196},[77,5048,5049,5051,5053,5056,5058,5060,5062],{"class":489,"line":749},[77,5050,784],{"class":711},[77,5052,716],{"class":715},[77,5054,5055],{"class":719}," advance ",[77,5057,723],{"class":715},[77,5059,790],{"class":685},[77,5061,4902],{"class":493},[77,5063,2179],{"class":719},[77,5065,5066],{"class":489,"line":768},[77,5067,771],{"emptyLinePlaceholder":196},[77,5069,5070,5073,5075,5077,5079],{"class":489,"line":774},[77,5071,5072],{"class":493},"onMounted",[77,5074,834],{"class":719},[77,5076,2445],{"class":715},[77,5078,810],{"class":711},[77,5080,813],{"class":715},[77,5082,5083,5086],{"class":489,"line":781},[77,5084,5085],{"class":493},"  advance",[77,5087,2179],{"class":719},[77,5089,5090,5092],{"class":489,"line":816},[77,5091,723],{"class":715},[77,5093,900],{"class":719},[77,5095,5096,5098,5100,5102],{"class":489,"line":840},[77,5097,686],{"class":719},[77,5099,3197],{"class":685},[77,5101,690],{"class":689},[77,5103,706],{"class":685},[18,5105,4735],{"id":5106},"refactored-event-store-and-propagation-logic",[14,5108,5109,5110,5113],{},"We have refactored the event store and propagation logic to make it more efficient and reliable.The following pointer events are available on ",[233,5111,5112],{},"v3"," and previous:",[241,5115,5116,5120,5125,5130],{},[244,5117,5118],{},[233,5119,1872],{},[244,5121,5122],{},[233,5123,5124],{},"pointer-move",[244,5126,5127],{},[233,5128,5129],{},"pointer-enter",[244,5131,5132],{},[233,5133,5134],{},"pointer-leave",[14,5136,5137,5138,5141],{},"From ",[233,5139,5140],{},"v4.x"," on, the following pointer events are been added to the list:",[241,5143,5144,5150,5155,5159,5164,5169],{},[244,5145,5146,5149],{},[233,5147,5148],{},"context-menu"," (right click)",[244,5151,5152],{},[233,5153,5154],{},"double-click",[244,5156,5157],{},[233,5158,1771],{},[244,5160,5161],{},[233,5162,5163],{},"pointer-up",[244,5165,5166],{},[233,5167,5168],{},"wheel",[244,5170,5171],{},[233,5172,5173],{},"pointer-missed",[462,5175,5177],{"id":5176},"event-bubbling","Event bubbling 🫧",[14,5179,5180],{},[25,5181],{"alt":388,"src":5182},"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmdlajBqejNiNDNtbDJvOWh6MjBsZDR2OGJoZ2x2Zjd3b3VwZ3AzNyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l3q2P2l54336ew5iM/giphy.gif",[14,5184,5185,5186,5189],{},"The event bubbling is now available in TresJS. You can stop the event propagation by calling the ",[233,5187,5188],{},"stopPropagation"," method from the event object:",[479,5191,5193],{"className":3143,"code":5192,"language":3145,"meta":388,"style":388},"\u003CTresMesh\n  @click=\"(event) => {\n    console.log('click')\n    event.stopPropagation()\n  }\"\n/>\n",[233,5194,5195,5202,5212,5217,5222,5227],{"__ignoreMap":388},[77,5196,5197,5199],{"class":489,"line":490},[77,5198,686],{"class":685},[77,5200,5201],{"class":689},"TresMesh\n",[77,5203,5204,5207,5209],{"class":489,"line":389},[77,5205,5206],{"class":693},"  @click",[77,5208,700],{"class":685},[77,5210,5211],{"class":497},"\"(event) => {\n",[77,5213,5214],{"class":489,"line":732},[77,5215,5216],{"class":497},"    console.log('click')\n",[77,5218,5219],{"class":489,"line":749},[77,5220,5221],{"class":497},"    event.stopPropagation()\n",[77,5223,5224],{"class":489,"line":768},[77,5225,5226],{"class":497},"  }\"\n",[77,5228,5229],{"class":489,"line":774},[77,5230,5231],{"class":685},"/>\n",[188,5233,3728,5235],{"className":5234,"controls":196},[193],[199,5236],{"src":5237,"type":202},"/blog/whats-hot-v4/event-bubbling.mp4",[18,5239,5241],{"id":5240},"primitives-enhancements","Primitives enhancements",[14,5243,5244],{},"You can now add event handlers to primitives, specially usefull to add pointer events to models:",[479,5246,5248],{"className":3143,"code":5247,"language":3145,"meta":388,"style":388},"\u003Cscript setup>\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { scene: model } = await useGLTF(\n  'models/ugly-bunny.gltf',\n)\nfunction handleClick(ev) {\n  console.log('clicked', ev)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive \n    :object=\"model\"\n    @click=\"handleClick\"\n  />\n\u003C/template>\n",[233,5249,5250,5260,5274,5278,5302,5309,5313,5330,5348,5352,5362,5366,5374,5382,5392,5402,5407],{"__ignoreMap":388},[77,5251,5252,5254,5256,5258],{"class":489,"line":490},[77,5253,686],{"class":685},[77,5255,690],{"class":689},[77,5257,694],{"class":693},[77,5259,706],{"class":685},[77,5261,5262,5264,5266,5268,5270,5272],{"class":489,"line":389},[77,5263,712],{"class":711},[77,5265,716],{"class":715},[77,5267,1507],{"class":719},[77,5269,723],{"class":715},[77,5271,726],{"class":711},[77,5273,1514],{"class":497},[77,5275,5276],{"class":489,"line":732},[77,5277,771],{"emptyLinePlaceholder":196},[77,5279,5280,5282,5284,5287,5289,5291,5293,5295,5298,5300],{"class":489,"line":749},[77,5281,784],{"class":711},[77,5283,716],{"class":715},[77,5285,5286],{"class":719}," scene",[77,5288,800],{"class":715},[77,5290,2412],{"class":719},[77,5292,723],{"class":715},[77,5294,790],{"class":685},[77,5296,5297],{"class":711}," await",[77,5299,1556],{"class":493},[77,5301,1249],{"class":719},[77,5303,5304,5307],{"class":489,"line":768},[77,5305,5306],{"class":497},"  'models/ugly-bunny.gltf'",[77,5308,859],{"class":715},[77,5310,5311],{"class":489,"line":774},[77,5312,900],{"class":719},[77,5314,5315,5318,5321,5323,5326,5328],{"class":489,"line":781},[77,5316,5317],{"class":711},"function",[77,5319,5320],{"class":493}," handleClick",[77,5322,834],{"class":715},[77,5324,5325],{"class":796},"ev",[77,5327,807],{"class":715},[77,5329,813],{"class":715},[77,5331,5332,5334,5336,5338,5340,5343,5345],{"class":489,"line":816},[77,5333,1358],{"class":719},[77,5335,170],{"class":685},[77,5337,1311],{"class":493},[77,5339,834],{"class":719},[77,5341,5342],{"class":497},"'clicked'",[77,5344,994],{"class":715},[77,5346,5347],{"class":719}," ev)\n",[77,5349,5350],{"class":489,"line":840},[77,5351,915],{"class":715},[77,5353,5354,5356,5358,5360],{"class":489,"line":862},[77,5355,686],{"class":719},[77,5357,3197],{"class":685},[77,5359,690],{"class":689},[77,5361,706],{"class":685},[77,5363,5364],{"class":489,"line":868},[77,5365,771],{"emptyLinePlaceholder":196},[77,5367,5368,5370,5372],{"class":489,"line":882},[77,5369,686],{"class":685},[77,5371,938],{"class":689},[77,5373,706],{"class":685},[77,5375,5376,5378,5380],{"class":489,"line":894},[77,5377,946],{"class":685},[77,5379,1423],{"class":689},[77,5381,1259],{"class":719},[77,5383,5384,5387,5389],{"class":489,"line":903},[77,5385,5386],{"class":693},"    :object",[77,5388,700],{"class":685},[77,5390,5391],{"class":497},"\"model\"\n",[77,5393,5394,5397,5399],{"class":489,"line":912},[77,5395,5396],{"class":693},"    @click",[77,5398,700],{"class":685},[77,5400,5401],{"class":497},"\"handleClick\"\n",[77,5403,5404],{"class":489,"line":918},[77,5405,5406],{"class":685},"  />\n",[77,5408,5409,5411,5413],{"class":489,"line":928},[77,5410,921],{"class":685},[77,5412,938],{"class":689},[77,5414,706],{"class":685},[462,5416,5418,5419,5421],{"id":5417},"reactive-object-prop","Reactive ",[233,5420,1440],{}," prop",[479,5423,5427],{"className":3143,"code":5424,"highlights":5425,"language":3145,"meta":388,"style":388},"\u003Cscript setup>\nconst isCube = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive \n    :object=\"isCube ? CubeModel : AkuAkuModel\" \n  />\n\u003C/template>\n",[5426],0,[233,5428,5429,5439,5457,5467,5471,5479,5487,5498,5502],{"__ignoreMap":388},[77,5430,5431,5433,5435,5437],{"class":489,"line":490},[77,5432,686],{"class":685},[77,5434,690],{"class":689},[77,5436,694],{"class":693},[77,5438,706],{"class":685},[77,5440,5441,5443,5446,5448,5450,5452,5455],{"class":489,"line":389},[77,5442,784],{"class":711},[77,5444,5445],{"class":719}," isCube ",[77,5447,700],{"class":685},[77,5449,4388],{"class":493},[77,5451,834],{"class":719},[77,5453,5454],{"class":876},"false",[77,5456,900],{"class":719},[77,5458,5459,5461,5463,5465],{"class":489,"line":732},[77,5460,686],{"class":719},[77,5462,3197],{"class":685},[77,5464,690],{"class":689},[77,5466,706],{"class":685},[77,5468,5469],{"class":489,"line":749},[77,5470,771],{"emptyLinePlaceholder":196},[77,5472,5473,5475,5477],{"class":489,"line":768},[77,5474,686],{"class":685},[77,5476,938],{"class":689},[77,5478,706],{"class":685},[77,5480,5481,5483,5485],{"class":489,"line":774},[77,5482,946],{"class":685},[77,5484,1423],{"class":689},[77,5486,1259],{"class":719},[77,5488,5489,5491,5493,5496],{"class":489,"line":781},[77,5490,5386],{"class":693},[77,5492,700],{"class":685},[77,5494,5495],{"class":497},"\"isCube ? CubeModel : AkuAkuModel\"",[77,5497,1259],{"class":719},[77,5499,5500],{"class":489,"line":816},[77,5501,5406],{"class":685},[77,5503,5504,5506,5508],{"class":489,"line":840},[77,5505,921],{"class":685},[77,5507,938],{"class":689},[77,5509,706],{"class":685},[462,5511,5513],{"id":5512},"conditionally-render-primitives","Conditionally render primitives",[14,5515,5516,5517,5520],{},"You can now conditionally render primitives using vue ",[233,5518,5519],{},"v-if"," directive.",[479,5522,5525],{"className":3143,"code":5523,"highlights":5524,"language":3145,"meta":388,"style":388},"\u003Cscript setup>\nconst isVisible = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive \n    v-if=\"isVisible\" \n    :object=\"CubeModel\" \n  />\n\u003C/template>\n",[5426],[233,5526,5527,5537,5554,5564,5568,5576,5584,5596,5607,5611],{"__ignoreMap":388},[77,5528,5529,5531,5533,5535],{"class":489,"line":490},[77,5530,686],{"class":685},[77,5532,690],{"class":689},[77,5534,694],{"class":693},[77,5536,706],{"class":685},[77,5538,5539,5541,5544,5546,5548,5550,5552],{"class":489,"line":389},[77,5540,784],{"class":711},[77,5542,5543],{"class":719}," isVisible ",[77,5545,700],{"class":685},[77,5547,4388],{"class":493},[77,5549,834],{"class":719},[77,5551,5454],{"class":876},[77,5553,900],{"class":719},[77,5555,5556,5558,5560,5562],{"class":489,"line":732},[77,5557,686],{"class":719},[77,5559,3197],{"class":685},[77,5561,690],{"class":689},[77,5563,706],{"class":685},[77,5565,5566],{"class":489,"line":749},[77,5567,771],{"emptyLinePlaceholder":196},[77,5569,5570,5572,5574],{"class":489,"line":768},[77,5571,686],{"class":685},[77,5573,938],{"class":689},[77,5575,706],{"class":685},[77,5577,5578,5580,5582],{"class":489,"line":774},[77,5579,946],{"class":685},[77,5581,1423],{"class":689},[77,5583,1259],{"class":719},[77,5585,5586,5589,5591,5594],{"class":489,"line":781},[77,5587,5588],{"class":693},"    v-if",[77,5590,700],{"class":685},[77,5592,5593],{"class":497},"\"isVisible\"",[77,5595,1259],{"class":719},[77,5597,5598,5600,5602,5605],{"class":489,"line":816},[77,5599,5386],{"class":693},[77,5601,700],{"class":685},[77,5603,5604],{"class":497},"\"CubeModel\"",[77,5606,1259],{"class":719},[77,5608,5609],{"class":489,"line":840},[77,5610,5406],{"class":685},[77,5612,5613,5615,5617],{"class":489,"line":862},[77,5614,921],{"class":685},[77,5616,938],{"class":689},[77,5618,706],{"class":685},[18,5620,5622],{"id":5621},"memory-management","Memory management",[241,5624,5625,5628,5635],{},[244,5626,5627],{},"Automatic disposal of resources when the component is unmounted.",[244,5629,5630,5631,5634],{},"Manual ",[233,5632,5633],{},"dispose"," utility method to dispose of resources manually (primitives)",[244,5636,5637,5638,1479,5641,5644],{},"Frees ",[233,5639,5640],{},"CPU",[233,5642,5643],{},"GPU"," memory.",[18,5646,5648],{"id":5647},"render-and-update-loops","Render and Update loops",[14,5650,5651,5652,5655,5656,5661],{},"Until ",[233,5653,5654],{},"v4"," the render and update loops were managed by the ",[38,5657,5660],{"href":5658,"rel":5659},"https://docs.tresjs.org/api/composables.html#userenderloop",[42],"useRenderLoop composable",". This approach covered most of the basic usecases but it was not enough for more complex scenarios:",[241,5663,5664,5667,5670,5673,5676,5679],{},[244,5665,5666],{},"Since is a global composable, multiple canvas would share the same loop.",[244,5668,5669],{},"The loop was not bounded to the context of the canvas.",[244,5671,5672],{},"Pause and resume was availablle but not working as expected.",[244,5674,5675],{},"No way to control the loop from the outside.",[244,5677,5678],{},"No way to have multiple loops in the same canvas. No posibility to prioritize order of execution.",[244,5680,5681],{},"No take-over mode for the render loop.",[14,5683,5684,5685,5687,5688,5690],{},"In ",[233,5686,5654],{}," we have introduce a new composable called ",[233,5689,2094],{}," that will allow you to have full control of the loop:",[479,5692,5694],{"className":3143,"code":5693,"language":3145,"meta":388,"style":388},"\u003Cscript setup>\nimport { useLoop } from '@tresjs/core'\n\nconst boxRef = ref()\n\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(({ delta }) => {\n  boxRef.value.rotation.y += delta\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh ref=\"boxRef\">\n    \u003CTresBoxGeometry />\n    \u003CTresMeshBasicMaterial color=\"teal\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[233,5695,5696,5706,5721,5725,5737,5741,5757,5761,5777,5801,5807,5817,5821,5829,5844,5852,5867,5875],{"__ignoreMap":388},[77,5697,5698,5700,5702,5704],{"class":489,"line":490},[77,5699,686],{"class":685},[77,5701,690],{"class":689},[77,5703,694],{"class":693},[77,5705,706],{"class":685},[77,5707,5708,5710,5712,5715,5717,5719],{"class":489,"line":389},[77,5709,712],{"class":711},[77,5711,716],{"class":715},[77,5713,5714],{"class":719}," useLoop ",[77,5716,723],{"class":715},[77,5718,726],{"class":711},[77,5720,729],{"class":497},[77,5722,5723],{"class":489,"line":732},[77,5724,771],{"emptyLinePlaceholder":196},[77,5726,5727,5729,5731,5733,5735],{"class":489,"line":749},[77,5728,784],{"class":711},[77,5730,4880],{"class":719},[77,5732,700],{"class":685},[77,5734,4388],{"class":493},[77,5736,2179],{"class":719},[77,5738,5739],{"class":489,"line":768},[77,5740,771],{"emptyLinePlaceholder":196},[77,5742,5743,5745,5747,5749,5751,5753,5755],{"class":489,"line":774},[77,5744,784],{"class":711},[77,5746,716],{"class":715},[77,5748,2611],{"class":719},[77,5750,723],{"class":715},[77,5752,790],{"class":685},[77,5754,2618],{"class":493},[77,5756,2179],{"class":719},[77,5758,5759],{"class":489,"line":781},[77,5760,771],{"emptyLinePlaceholder":196},[77,5762,5763,5765,5767,5769,5771,5773,5775],{"class":489,"line":816},[77,5764,2625],{"class":493},[77,5766,834],{"class":719},[77,5768,2567],{"class":715},[77,5770,2570],{"class":796},[77,5772,2578],{"class":715},[77,5774,810],{"class":711},[77,5776,813],{"class":715},[77,5778,5779,5781,5783,5785,5787,5790,5792,5795,5798],{"class":489,"line":840},[77,5780,4932],{"class":719},[77,5782,170],{"class":685},[77,5784,2454],{"class":719},[77,5786,170],{"class":685},[77,5788,5789],{"class":719},"rotation",[77,5791,170],{"class":685},[77,5793,5794],{"class":719},"y ",[77,5796,5797],{"class":685},"+=",[77,5799,5800],{"class":719}," delta\n",[77,5802,5803,5805],{"class":489,"line":862},[77,5804,723],{"class":715},[77,5806,900],{"class":719},[77,5808,5809,5811,5813,5815],{"class":489,"line":868},[77,5810,686],{"class":719},[77,5812,3197],{"class":685},[77,5814,690],{"class":689},[77,5816,706],{"class":685},[77,5818,5819],{"class":489,"line":882},[77,5820,771],{"emptyLinePlaceholder":196},[77,5822,5823,5825,5827],{"class":489,"line":894},[77,5824,686],{"class":685},[77,5826,938],{"class":689},[77,5828,706],{"class":685},[77,5830,5831,5833,5835,5837,5839,5842],{"class":489,"line":903},[77,5832,946],{"class":685},[77,5834,1765],{"class":689},[77,5836,4388],{"class":693},[77,5838,700],{"class":685},[77,5840,5841],{"class":497},"\"boxRef\"",[77,5843,706],{"class":685},[77,5845,5846,5848,5850],{"class":489,"line":912},[77,5847,973],{"class":685},[77,5849,1017],{"class":689},[77,5851,1009],{"class":685},[77,5853,5854,5856,5858,5860,5862,5865],{"class":489,"line":918},[77,5855,973],{"class":685},[77,5857,1054],{"class":689},[77,5859,1057],{"class":693},[77,5861,700],{"class":685},[77,5863,5864],{"class":497},"\"teal\"",[77,5866,1009],{"class":685},[77,5868,5869,5871,5873],{"class":489,"line":928},[77,5870,1076],{"class":685},[77,5872,1765],{"class":689},[77,5874,706],{"class":685},[77,5876,5877,5879,5881],{"class":489,"line":933},[77,5878,921],{"class":685},[77,5880,938],{"class":689},[77,5882,706],{"class":685},[14,5884,5885],{},"The callback function will be triggered just before a frame is rendered and it will be deregistered automatically when the component is destroyed.",[1108,5887,5889],{"id":5888},"take-over-the-render-loop","Take over the render loop",[14,5891,5892,5893,5896],{},"You can take over the render call by using the ",[233,5894,5895],{},"render"," method.",[479,5898,5900],{"className":4484,"code":5899,"language":4486,"meta":388,"style":388},"const { render } = useLoop()\n\nrender(({ renderer, scene, camera }) => {\n  renderer.render(scene, camera)\n})\n",[233,5901,5902,5919,5923,5949,5966],{"__ignoreMap":388},[77,5903,5904,5906,5908,5911,5913,5915,5917],{"class":489,"line":490},[77,5905,784],{"class":711},[77,5907,716],{"class":715},[77,5909,5910],{"class":719}," render ",[77,5912,723],{"class":715},[77,5914,790],{"class":685},[77,5916,2618],{"class":493},[77,5918,2179],{"class":719},[77,5920,5921],{"class":489,"line":389},[77,5922,771],{"emptyLinePlaceholder":196},[77,5924,5925,5927,5929,5931,5934,5936,5938,5940,5943,5945,5947],{"class":489,"line":732},[77,5926,5895],{"class":493},[77,5928,834],{"class":719},[77,5930,2567],{"class":715},[77,5932,5933],{"class":796}," renderer",[77,5935,994],{"class":715},[77,5937,5286],{"class":796},[77,5939,994],{"class":715},[77,5941,5942],{"class":796}," camera",[77,5944,2578],{"class":715},[77,5946,810],{"class":685},[77,5948,813],{"class":715},[77,5950,5951,5954,5956,5958,5961,5963],{"class":489,"line":749},[77,5952,5953],{"class":719},"  renderer",[77,5955,170],{"class":685},[77,5957,5895],{"class":493},[77,5959,5960],{"class":719},"(scene",[77,5962,994],{"class":715},[77,5964,5965],{"class":719}," camera)\n",[77,5967,5968,5970],{"class":489,"line":768},[77,5969,723],{"class":715},[77,5971,900],{"class":719},[623,5973,5974],{},[14,5975,5976],{},"Consider that if you take over the render loop, you will need to manually render the scene and take care of features like the conditional rendering yourself.",[1108,5978,5980],{"id":5979},"register-after-render-callbacks-ex-physics-calculations","Register after render callbacks (ex physics calculations)",[14,5982,5983,5984,5896],{},"You can also register callbacks which are invoked after rendring by using the ",[233,5985,5986],{},"onAfterRender",[479,5988,5990],{"className":4484,"code":5989,"language":4486,"meta":388,"style":388},"const { onAfterRender } = useLoop()\n\nonAfterRender(({ renderer }) => {\n  // Calculations\n})\n",[233,5991,5992,6009,6013,6029,6034],{"__ignoreMap":388},[77,5993,5994,5996,5998,6001,6003,6005,6007],{"class":489,"line":490},[77,5995,784],{"class":711},[77,5997,716],{"class":715},[77,5999,6000],{"class":719}," onAfterRender ",[77,6002,723],{"class":715},[77,6004,790],{"class":685},[77,6006,2618],{"class":493},[77,6008,2179],{"class":719},[77,6010,6011],{"class":489,"line":389},[77,6012,771],{"emptyLinePlaceholder":196},[77,6014,6015,6017,6019,6021,6023,6025,6027],{"class":489,"line":732},[77,6016,5986],{"class":493},[77,6018,834],{"class":719},[77,6020,2567],{"class":715},[77,6022,5933],{"class":796},[77,6024,2578],{"class":715},[77,6026,810],{"class":685},[77,6028,813],{"class":715},[77,6030,6031],{"class":489,"line":749},[77,6032,6033],{"class":777},"  // Calculations\n",[77,6035,6036,6038],{"class":489,"line":768},[77,6037,723],{"class":715},[77,6039,900],{"class":719},[1108,6041,6043],{"id":6042},"render-priority","Render priority",[14,6045,6046,6047,1670,6050,6053],{},"Both useBeforeRender and useAfteRender provide an optional priority number. This number could be anything from ",[233,6048,6049],{},"Number.NEGATIVE_INFINITY",[233,6051,6052],{},"Number.POSITIVE_INFINITY"," being the 0 by default. The lower the number, the earlier the callback will be executed.",[479,6055,6057],{"className":4484,"code":6056,"language":4486,"meta":388,"style":388},"onBeforeRender(() => {\n  console.count('triggered first')\n}, -1)\n\nonBeforeRender(() => {\n  console.count('triggered second')\n}, 1)\n",[233,6058,6059,6071,6087,6099,6103,6115,6130],{"__ignoreMap":388},[77,6060,6061,6063,6065,6067,6069],{"class":489,"line":490},[77,6062,2625],{"class":493},[77,6064,834],{"class":719},[77,6066,2445],{"class":715},[77,6068,810],{"class":685},[77,6070,813],{"class":715},[77,6072,6073,6075,6077,6080,6082,6085],{"class":489,"line":389},[77,6074,1358],{"class":719},[77,6076,170],{"class":685},[77,6078,6079],{"class":493},"count",[77,6081,834],{"class":719},[77,6083,6084],{"class":497},"'triggered first'",[77,6086,900],{"class":719},[77,6088,6089,6092,6095,6097],{"class":489,"line":732},[77,6090,6091],{"class":715},"},",[77,6093,6094],{"class":685}," -",[77,6096,1031],{"class":876},[77,6098,900],{"class":719},[77,6100,6101],{"class":489,"line":749},[77,6102,771],{"emptyLinePlaceholder":196},[77,6104,6105,6107,6109,6111,6113],{"class":489,"line":768},[77,6106,2625],{"class":493},[77,6108,834],{"class":719},[77,6110,2445],{"class":715},[77,6112,810],{"class":685},[77,6114,813],{"class":715},[77,6116,6117,6119,6121,6123,6125,6128],{"class":489,"line":774},[77,6118,1358],{"class":719},[77,6120,170],{"class":685},[77,6122,6079],{"class":493},[77,6124,834],{"class":719},[77,6126,6127],{"class":497},"'triggered second'",[77,6129,900],{"class":719},[77,6131,6132,6134,6136],{"class":489,"line":781},[77,6133,6091],{"class":715},[77,6135,1036],{"class":876},[77,6137,900],{"class":719},[1108,6139,6141],{"id":6140},"params-of-the-callback","Params of the callback",[14,6143,6144],{},"All callbacks receive an object with the following properties:",[241,6146,6147,6153,6159,6171,6181,6189,6195,6201,6207,6219],{},[244,6148,6149,6152],{},[233,6150,6151],{},"delta",": The delta time between the current and the last frame. This is the time in miliseconds since the last frame.",[244,6154,6155,6158],{},[233,6156,6157],{},"elapsed",": The elapsed time since the start of the render loop.",[244,6160,6161,6164,6165,6170],{},[233,6162,6163],{},"clock",": The ",[38,6166,6169],{"href":6167,"rel":6168},"https://threejs.org/docs/?q=clock#api/en/core/Clock",[42],"THREE clock"," instance.",[244,6172,6173,6164,6175,6180],{},[233,6174,955],{},[38,6176,6179],{"href":6177,"rel":6178},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[42],"WebGLRenderer"," of your scene.",[244,6182,6183,6164,6185,6180],{},[233,6184,1451],{},[38,6186,1451],{"href":6187,"rel":6188},"https://threejs.org/docs/?q=sce#api/en/scenes/Scene",[42],[244,6190,6191,6194],{},[233,6192,6193],{},"camera",": The currently active camera.",[244,6196,6197,6200],{},[233,6198,6199],{},"raycaster",": The global raycaster used for pointer events.",[244,6202,6203,6206],{},[233,6204,6205],{},"controls",": The controls of your scene.",[244,6208,6209,6212,6213,6216,6217,170],{},[233,6210,6211],{},"invalidate",": A method to invalidate the render loop. This is only required if you set the ",[233,6214,6215],{},"render-mode"," prop to ",[233,6218,3847],{},[244,6220,6221,6224,6225,6216,6227,170],{},[233,6222,6223],{},"advance",": A method to advance the render loop. This is only required if you set the ",[233,6226,6215],{},[233,6228,6229],{},"manual",[1108,6231,6233],{"id":6232},"pausing-and-resuming-the-update-loop","Pausing and resuming the update loop",[14,6235,6236,6237,1479,6240,6243],{},"You can use ",[233,6238,6239],{},"pause",[233,6241,6242],{},"resume"," methods:",[479,6245,6247],{"className":4484,"code":6246,"language":4486,"meta":388,"style":388},"const { onBeforeRender, pause, resume } = useLoop()\n\nonBeforeRender(({ elapsed }) => {\n  sphereRef.value.position.y += Math.sin(elapsed) * 0.01\n})\n\npause() // This will pause the loop\nresume() // This will resume the loop\n",[233,6248,6249,6276,6280,6297,6333,6339,6343,6353],{"__ignoreMap":388},[77,6250,6251,6253,6255,6258,6260,6263,6265,6268,6270,6272,6274],{"class":489,"line":490},[77,6252,784],{"class":711},[77,6254,716],{"class":715},[77,6256,6257],{"class":719}," onBeforeRender",[77,6259,994],{"class":715},[77,6261,6262],{"class":719}," pause",[77,6264,994],{"class":715},[77,6266,6267],{"class":719}," resume ",[77,6269,723],{"class":715},[77,6271,790],{"class":685},[77,6273,2618],{"class":493},[77,6275,2179],{"class":719},[77,6277,6278],{"class":489,"line":389},[77,6279,771],{"emptyLinePlaceholder":196},[77,6281,6282,6284,6286,6288,6291,6293,6295],{"class":489,"line":732},[77,6283,2625],{"class":493},[77,6285,834],{"class":719},[77,6287,2567],{"class":715},[77,6289,6290],{"class":796}," elapsed",[77,6292,2578],{"class":715},[77,6294,810],{"class":685},[77,6296,813],{"class":715},[77,6298,6299,6302,6304,6306,6308,6310,6312,6314,6316,6319,6321,6324,6327,6330],{"class":489,"line":749},[77,6300,6301],{"class":719},"  sphereRef",[77,6303,170],{"class":685},[77,6305,2454],{"class":719},[77,6307,170],{"class":685},[77,6309,981],{"class":719},[77,6311,170],{"class":685},[77,6313,5794],{"class":719},[77,6315,5797],{"class":685},[77,6317,6318],{"class":719}," Math",[77,6320,170],{"class":685},[77,6322,6323],{"class":493},"sin",[77,6325,6326],{"class":719},"(elapsed) ",[77,6328,6329],{"class":685},"*",[77,6331,6332],{"class":876}," 0.01\n",[77,6334,6335,6337],{"class":489,"line":768},[77,6336,723],{"class":715},[77,6338,900],{"class":719},[77,6340,6341],{"class":489,"line":774},[77,6342,771],{"emptyLinePlaceholder":196},[77,6344,6345,6347,6350],{"class":489,"line":781},[77,6346,6239],{"class":493},[77,6348,6349],{"class":719},"() ",[77,6351,6352],{"class":777},"// This will pause the loop\n",[77,6354,6355,6357,6359],{"class":489,"line":816},[77,6356,6242],{"class":493},[77,6358,6349],{"class":719},[77,6360,6361],{"class":777},"// This will resume the loop\n",[1108,6363,6365],{"id":6364},"pausing-and-resuming-the-render","Pausing and resuming the render",[14,6367,6236,6368,1479,6371,6243],{},[233,6369,6370],{},"pauseRender",[233,6372,6373],{},"resumeRender",[479,6375,6377],{"className":4484,"code":6376,"language":4486,"meta":388,"style":388},"const { pauseRender, resumeRender } = useLoop()\n\nonBeforeRender(({ elapse }) => {\n  sphereRef.value.position.y += Math.sin(elapsed) * 0.01\n})\n\npauseRender() // This will pause the renderer\nresumeRender() // This will resume the renderer\n",[233,6378,6379,6401,6405,6422,6452,6458,6462,6471],{"__ignoreMap":388},[77,6380,6381,6383,6385,6388,6390,6393,6395,6397,6399],{"class":489,"line":490},[77,6382,784],{"class":711},[77,6384,716],{"class":715},[77,6386,6387],{"class":719}," pauseRender",[77,6389,994],{"class":715},[77,6391,6392],{"class":719}," resumeRender ",[77,6394,723],{"class":715},[77,6396,790],{"class":685},[77,6398,2618],{"class":493},[77,6400,2179],{"class":719},[77,6402,6403],{"class":489,"line":389},[77,6404,771],{"emptyLinePlaceholder":196},[77,6406,6407,6409,6411,6413,6416,6418,6420],{"class":489,"line":732},[77,6408,2625],{"class":493},[77,6410,834],{"class":719},[77,6412,2567],{"class":715},[77,6414,6415],{"class":796}," elapse",[77,6417,2578],{"class":715},[77,6419,810],{"class":685},[77,6421,813],{"class":715},[77,6423,6424,6426,6428,6430,6432,6434,6436,6438,6440,6442,6444,6446,6448,6450],{"class":489,"line":749},[77,6425,6301],{"class":719},[77,6427,170],{"class":685},[77,6429,2454],{"class":719},[77,6431,170],{"class":685},[77,6433,981],{"class":719},[77,6435,170],{"class":685},[77,6437,5794],{"class":719},[77,6439,5797],{"class":685},[77,6441,6318],{"class":719},[77,6443,170],{"class":685},[77,6445,6323],{"class":493},[77,6447,6326],{"class":719},[77,6449,6329],{"class":685},[77,6451,6332],{"class":876},[77,6453,6454,6456],{"class":489,"line":768},[77,6455,723],{"class":715},[77,6457,900],{"class":719},[77,6459,6460],{"class":489,"line":774},[77,6461,771],{"emptyLinePlaceholder":196},[77,6463,6464,6466,6468],{"class":489,"line":781},[77,6465,6370],{"class":493},[77,6467,6349],{"class":719},[77,6469,6470],{"class":777},"// This will pause the renderer\n",[77,6472,6473,6475,6477],{"class":489,"line":816},[77,6474,6373],{"class":493},[77,6476,6349],{"class":719},[77,6478,6479],{"class":777},"// This will resume the renderer\n",[1108,6481,6483],{"id":6482},"unregistering-callbacks","Unregistering callbacks",[14,6485,6486,6487,6490,6491,365,6493,5896],{},"You can unregister a callback by calling the method ",[233,6488,6489],{},"off"," returned by the ",[233,6492,2625],{},[233,6494,5986],{},[479,6496,6498],{"className":4484,"code":6497,"language":4486,"meta":388,"style":388},"const { onBeforeRender } = useLoop()\n\nconst { off } = onBeforeRender(({ elapsed }) => {\n  sphereRef.value.position.y += Math.sin(elapsed) * 0.01\n})\n",[233,6499,6500,6516,6520,6547,6577],{"__ignoreMap":388},[77,6501,6502,6504,6506,6508,6510,6512,6514],{"class":489,"line":490},[77,6503,784],{"class":711},[77,6505,716],{"class":715},[77,6507,2611],{"class":719},[77,6509,723],{"class":715},[77,6511,790],{"class":685},[77,6513,2618],{"class":493},[77,6515,2179],{"class":719},[77,6517,6518],{"class":489,"line":389},[77,6519,771],{"emptyLinePlaceholder":196},[77,6521,6522,6524,6526,6529,6531,6533,6535,6537,6539,6541,6543,6545],{"class":489,"line":732},[77,6523,784],{"class":711},[77,6525,716],{"class":715},[77,6527,6528],{"class":719}," off ",[77,6530,723],{"class":715},[77,6532,790],{"class":685},[77,6534,6257],{"class":493},[77,6536,834],{"class":719},[77,6538,2567],{"class":715},[77,6540,6290],{"class":796},[77,6542,2578],{"class":715},[77,6544,810],{"class":685},[77,6546,813],{"class":715},[77,6548,6549,6551,6553,6555,6557,6559,6561,6563,6565,6567,6569,6571,6573,6575],{"class":489,"line":749},[77,6550,6301],{"class":719},[77,6552,170],{"class":685},[77,6554,2454],{"class":719},[77,6556,170],{"class":685},[77,6558,981],{"class":719},[77,6560,170],{"class":685},[77,6562,5794],{"class":719},[77,6564,5797],{"class":685},[77,6566,6318],{"class":719},[77,6568,170],{"class":685},[77,6570,6323],{"class":493},[77,6572,6326],{"class":719},[77,6574,6329],{"class":685},[77,6576,6332],{"class":876},[77,6578,6579,6581],{"class":489,"line":768},[77,6580,723],{"class":715},[77,6582,900],{"class":719},[18,6584,6586],{"id":6585},"devtools-improvements","Devtools improvements",[14,6588,6589],{},[25,6590],{"alt":388,"src":6591},"/blog/whats-hot-v4/devtools.png",[241,6593,6594,6601,6604],{},[244,6595,6596,6597,6600],{},"Renderer ",[233,6598,6599],{},"info"," available when inspecting the scene",[244,6602,6603],{},"All the shaders programs (materials) are available to inspect",[244,6605,6606],{},"Search scene three objects by name",[18,6608,6610],{"id":6609},"conclusion","Conclusion",[14,6612,6613,6614,6617],{},"We are super excited about this new version of TresJS. Please give it a try and let us know what you think on the ",[38,6615,4641],{"href":4639,"rel":6616},[42],". We are always looking for feedback to improve the library.",[14,6619,6620],{},"Give some love to the contributors that make it happen. 🙌 💚",[3040,6622,6623],{},"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 .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 .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 .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 .sREMW, html code.shiki .sREMW{--shiki-light:#FE640B;--shiki-default:#FE640B;--shiki-dark:#EF9F76}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}",{"title":388,"searchDepth":389,"depth":389,"links":6625},[6626,6627,6628,6631,6636,6637,6638,6639],{"id":4755,"depth":389,"text":4732},{"id":4966,"depth":389,"text":4967},{"id":5106,"depth":389,"text":4735,"children":6629},[6630],{"id":5176,"depth":732,"text":5177},{"id":5240,"depth":389,"text":5241,"children":6632},[6633,6635],{"id":5417,"depth":732,"text":6634},"Reactive object prop",{"id":5512,"depth":732,"text":5513},{"id":5621,"depth":389,"text":5622},{"id":5647,"depth":389,"text":5648},{"id":6585,"depth":389,"text":6586},{"id":6609,"depth":389,"text":6610},"2024-05-29","The biggest version of TresJS is here! 🎉",{},"/blog/whats-hot-on-tresjs-v4",{"title":4678,"description":6641},"blog/whats-hot-on-tresjs-v4","/blog/whats-hot-v4/tresjs-v4.png","kaoZzVWDSSLjNGrxaF1oovIr-Sb8yuSiIqH77eXzYPo",{"id":6649,"title":6650,"author":8,"body":6651,"category":398,"date":6878,"description":6879,"draft":401,"extension":402,"meta":6880,"navigation":196,"path":6881,"seo":6882,"stem":6883,"thumbnail":6884,"url":407,"__hash__":6885},"blog/blog/whats-new-march-2024.md","What's new in TresJS - March 2024",{"type":11,"value":6652,"toc":6872},[6653,6656,6660,6665,6672,6682,6694,6699,6717,6722,6725,6729,6736,6766,6769,6772,6777,6790,6793,6800,6807,6811,6820,6823,6860,6866,6869],[14,6654,6655],{},"Yo! We already on March 2024 and the first two months of the year have been quite busy for the TresJS ecosystem. We have been working on a lot of new features and improvements to make your development experience even better. Let's dive into the latest updates on TresJS ecosystem.",[18,6657,6659],{"id":6658},"vuejs-amsterdam-2024","VueJS Amsterdam 2024",[14,6661,6662],{},[25,6663],{"alt":388,"src":6664},"/blog/whats-new-march-2024/tresjs-vuejsamsterdam-talk.jpg",[14,6666,6667,6668,6671],{},"We had the opportunity to present a talk at VueJS Amsterdam stage titled ",[33,6669,6670],{},"\"The Subtle art of 3D Scrolly-telling and Product-Customisation with TresJS\""," to show real-world usecases of TresJS. Our goal was to show the audience how easy is to create 3D scenes with Vue, which previously was a intimidating task, now something available for everyone to try 😊.",[46,6673,3728,6676,3728,6679],{"className":6674},[49,6675,278],"grid-cols-2",[25,6677],{"src":6678},"/blog/whats-new-march-2024/tres-stickers.jpeg",[25,6680],{"src":6681},"/blog/whats-new-march-2024/tres-stickers-2.jpeg",[14,6683,6684,6685,6688,6689],{},"And guess what, ",[33,6686,6687],{},"NEW TRESJS STICKERS"," thanks to ",[38,6690,6693],{"href":6691,"rel":6692},"https://twitter.com/timbenniks",[42],"Tim Benniks 🥑",[14,6695,6696],{},[25,6697],{"alt":388,"src":6698},"/blog/whats-new-march-2024/evan-bust.jpeg",[14,6700,6701,6702,6707,6708,6711,6712,807],{},"We even raffle with ",[38,6703,6706],{"href":6704,"rel":6705},"https://www.storyblok.com/",[42],"Storyblok"," a 3D printed version of ",[33,6709,6710],{},"Evan You"," as a surprise. (Thanks to ",[38,6713,6716],{"href":6714,"rel":6715},"https://twitter.com/dawntraoz",[42],"Alba Silvente",[14,6718,6719],{},[25,6720],{"alt":388,"src":6721},"/blog/whats-new-march-2024/tres-team.jpeg",[14,6723,6724],{},"We had a blast at VueJS Amsterdam 2024. It was great to meet the community and share our latest updates. We also had the opportunity to meet some of our contributors and users. We are very grateful for the support and feedback we received. We are looking forward to the next edition.",[18,6726,6728],{"id":6727},"playground-is-now-lab-and","Playground is now Lab and..",[14,6730,6731,6732,6735],{},"Sandbox is now the actual Playground LOL 😂. I know, naming things can be hard, and we realized that what we used to call ",[233,6733,6734],{},"playground.tresjs.org"," was actually more like a showcase of what you can achieve with Tres rather than a playground were users could create small scenes, issue reproductions or just try out stuff so thats why now:",[241,6737,6738,6752],{},[244,6739,6740,6747,6748],{},[6741,6742,6743],"del",{},[38,6744,6745],{"href":6745,"rel":6746},"https://playground.tresjs.org/",[42]," is now --> ",[38,6749,6750],{"href":6750,"rel":6751},"https://lab.tresjs.org/",[42],[244,6753,6754,6760,6761],{},[6741,6755,6756],{},[38,6757,6758],{"href":6758,"rel":6759},"https://sandbox.tresjs.org/",[42]," is now ",[38,6762,6765],{"href":6763,"rel":6764},"https://play.tresjs.org",[42],"https://play.tresjs.org/",[14,6767,6768],{},"Now things make more sense, kinda 😅, sorry about the confusion.",[18,6770,296],{"id":6771},"cookbook",[14,6773,6774],{},[25,6775],{"alt":388,"src":6776},"/blog/whats-new-march-2024/cookbook.png",[14,6778,6779,6780,6785,6786,6789],{},"It's time to cook some recipes with Tres. Following the naming changes, we decided to rename ",[6741,6781,6782],{},[33,6783,6784],{},"Examples"," into a proper ",[33,6787,6788],{},"Cookbook"," section.",[14,6791,6792],{},"Each recipe is designed to help you understand the core concepts of Tres and how to use them in your projects.",[14,6794,6795,6796,170],{},"Checkout the Tres official ",[38,6797,6788],{"href":6798,"rel":6799},"https://docs.tresjs.org/cookbook/",[42],[14,6801,6802,6803],{},"Do you have an specific recipe request in mind? Let us know ",[38,6804,4581],{"href":6805,"rel":6806},"https://github.com/Tresjs/tres/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.yml",[42],[18,6808,6810],{"id":6809},"docs-are-being-translated","Docs are being translated",[14,6812,6813,6814,6819],{},"At the beginning of February we started the task ",[38,6815,6818],{"href":6816,"rel":6817},"https://github.com/Tresjs/tres/issues/540",[42],"Translate docs to multiple languages"," to provide translated documents to all the community. This is huge for us because will enable more and more devs to use Tres by following guides on their native language.",[14,6821,6822],{},"At this very moment we are translating to",[241,6824,6827,6836,6842,6848,6854],{"className":6825},[6826],"contains-task-list",[244,6828,6831,6835],{"className":6829},[6830],"task-list-item",[6832,6833],"input",{"checked":196,"disabled":196,"type":6834},"checkbox"," Spanish 🇪🇸",[244,6837,6839,6841],{"className":6838},[6830],[6832,6840],{"checked":196,"disabled":196,"type":6834}," German 🇩🇪",[244,6843,6845,6847],{"className":6844},[6830],[6832,6846],{"disabled":196,"type":6834}," Chinese 🇨🇳",[244,6849,6851,6853],{"className":6850},[6830],[6832,6852],{"disabled":196,"type":6834}," French 🇫🇷",[244,6855,6857,6859],{"className":6856},[6830],[6832,6858],{"disabled":196,"type":6834}," Polish 🇵🇱",[14,6861,6862,6863,170],{},"If your language is not in the list and you would like to contribute to make it available, let us know in a comment ",[38,6864,4581],{"href":6816,"rel":6865},[42],[14,6867,6868],{},"And thats pretty much for this update, hope you are as excited as ourselves.",[14,6870,6871],{},"Happy 3D ✌️.",{"title":388,"searchDepth":389,"depth":389,"links":6873},[6874,6875,6876,6877],{"id":6658,"depth":389,"text":6659},{"id":6727,"depth":389,"text":6728},{"id":6771,"depth":389,"text":296},{"id":6809,"depth":389,"text":6810},"2024-03-04","Leap into the latest updates on TresJS ecosystem.",{},"/blog/whats-new-march-2024",{"title":6650,"description":6879},"blog/whats-new-march-2024","/blog/whats-new-march-2024/vuejsamsterdam.jpeg","MAHWJypjB3LT6LrM5kB8Ak__Xrur5wMpCOG37enQoJg",{"id":6887,"title":6888,"author":8,"body":6889,"category":7739,"date":7740,"description":7741,"draft":401,"extension":402,"meta":7742,"navigation":196,"path":7743,"seo":7744,"stem":7745,"thumbnail":7746,"url":407,"__hash__":7747},"blog/blog/what-is-new-3-7-devtools.md","TresJS 3.7 - Devtools",{"type":11,"value":6890,"toc":7724},[6891,6897,6899,6946,6950,6957,6963,6966,6972,6976,6980,6983,6989,6993,6996,7002,7005,7013,7017,7029,7037,7047,7053,7057,7065,7072,7075,7081,7262,7269,7272,7278,7459,7467,7470,7476,7612,7619,7621,7627,7633,7713,7722],[14,6892,6893,6894,170],{},"TresJS 3.7 is now available! 🎉 This release includes the highly anticipated TresJS custom inspector view for Vue Devtools, as well as some new handy features like native directives like ",[233,6895,6896],{},"v-distance-to",[18,6898,3785],{"id":3784},[476,6900,6901,6915,6928],{},[479,6902,6904],{"className":481,"code":6903,"filename":483,"language":484,"meta":388,"style":388},"npm install @tresjs/core@latest\n",[233,6905,6906],{"__ignoreMap":388},[77,6907,6908,6910,6912],{"class":489,"line":490},[77,6909,483],{"class":493},[77,6911,3108],{"class":497},[77,6913,6914],{"class":497}," @tresjs/core@latest\n",[479,6916,6918],{"className":481,"code":6917,"filename":505,"language":484,"meta":388,"style":388},"yarn add @tresjs/core@latest\n",[233,6919,6920],{"__ignoreMap":388},[77,6921,6922,6924,6926],{"class":489,"line":490},[77,6923,505],{"class":493},[77,6925,2777],{"class":497},[77,6927,6914],{"class":497},[479,6929,6931],{"className":481,"code":6930,"filename":523,"language":484,"meta":388,"style":388},"pnpm upgrade @tresjs/core --latest\n",[233,6932,6933],{"__ignoreMap":388},[77,6934,6935,6937,6940,6943],{"class":489,"line":490},[77,6936,523],{"class":493},[77,6938,6939],{"class":497}," upgrade",[77,6941,6942],{"class":497}," @tresjs/core",[77,6944,6945],{"class":497}," --latest\n",[18,6947,6949],{"id":6948},"vue-devtools","Vue Devtools",[14,6951,6952,6953,6956],{},"One of the most difficult things a developer faces when creating 3D experiences on the browser is debugging. The browser canvas is a black box, and it's hard to know what's going on inside. The imperative nature of ThreeJS makes it incredibly difficult to debug, having to depend on ",[233,6954,6955],{},"console.log"," to see what's going on, or third party to fine-tune and inspect the scene.",[14,6958,6959],{},[25,6960],{"alt":6961,"src":6962},"debugging","../assets/blog/what-is-new-3-7-devtools/debug-3D.png",[14,6964,6965],{},"TresJS now has a custom inspector view for Vue Devtools. This means that you can now inspect your 3D scene and components with the same ease as you would inspect a Vue component. You can see the properties of your components, as well as the scene graph and the state of the scene.",[188,6967,3728,6969],{"className":6968,"controls":196},[193],[199,6970],{"src":6971,"type":202},"/blog/what-is-new-3-7-devtools/official-vue-chrome-devtools.mp4",[18,6973,6975],{"id":6974},"features","Features",[462,6977,6979],{"id":6978},"scene-graph","Scene Graph",[14,6981,6982],{},"The scene inspector is a tree view of the scene graph. You can see the hierarchy of the scene, as well as the components attached to each object. You can also see the memory allocation of each component.",[14,6984,6985],{},[25,6986],{"alt":6987,"src":6988},"scene graph","../assets/blog/what-is-new-3-7-devtools/scene-graph.png",[462,6990,6992],{"id":6991},"component-inspector","Component Inspector",[14,6994,6995],{},"The component inspector shows the properties of the 3D instance, it will also highlight the object in the 3D rendering. You can also see the component's state, and the component's children.",[14,6997,6998],{},[25,6999],{"alt":7000,"src":7001},"component inspector","../assets/blog/what-is-new-3-7-devtools/component-inspector.png",[14,7003,7004],{},"And guess what? You can also edit the properties of the component in real time! This is a great way to fine-tune your scene. 🤭",[14,7006,7007,7008,7012],{},"You can check the ",[38,7009,3720],{"href":7010,"rel":7011},"https://docs.tresjs.org/debug/devtools.html",[42]," to learn more about the Vue Devtools for TresJS.",[462,7014,7016],{"id":7015},"future","Future",[14,7018,7019,7020,223,7025],{},"This is just the beginning of the TresJS Devtools. We have a lot of ideas for the future, like a timeline, a profiler, and a lot more. This version is compatible with ",[38,7021,7024],{"href":7022,"rel":7023},"https://devtools.vuejs.org/",[42],"the chrome extension of Vue Devtools",[7026,7027,170],"badge",{"text":7028},"^6.x.x",[14,7030,7031,7032],{},"We are currently developing a better TreJS devtools as a custom tab for the brand new ",[38,7033,7036],{"href":7034,"rel":7035},"https://devtools-next.vuejs.org/guide/getting-started",[42],"Vue Devtools Next",[14,7038,7039,7040,7042,7043],{},"This is planned to be released in the next major version ",[233,7041,5654],{}," of TresJS and will be similar in functionality to the current ",[38,7044,7046],{"href":7045},"/blog/tres-nuxt-devtools","Nuxt Devtools",[188,7048,3728,7050],{"className":7049,"controls":196},[193],[199,7051],{"src":7052,"type":202},"/blog/what-is-new-3-7-devtools/tresjs-vue-devtools-next.mp4",[18,7054,7056],{"id":7055},"native-directives","Native Directives",[14,7058,7059,7064],{},[38,7060,7063],{"href":7061,"rel":7062},"https://vuejs.org/guide/reusability/custom-directives.html#introduction",[42],"Directives in Vue"," are a great way to add reusable functionality to your components. TresJS now has some native directives that you can use in your components.",[14,7066,7067,7068,7071],{},"So now we have 4 Directives that we migrated from ",[233,7069,7070],{},"cientos"," to the core package:",[462,7073,7074],{"id":7074},"v-log",[14,7076,7077,7078,7080],{},"With ",[233,7079,7074],{}," you can inspect your instance without the need to use template ref and watch... Just import the directive, and log what you need.",[479,7082,7084],{"className":3143,"code":7083,"language":3145,"meta":388,"style":388},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sphere, vLog } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas >\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CSphere\n      ref=\"sphereRef\"\n      :scale=\"0.5\"\n      v-log:material  \u003C!-- will print just the material 🎉 -->\n    />\n    \u003COrbitControls v-log />\n  \u003C/TresCanvas>\n\u003C/template>\n",[233,7085,7086,7102,7126,7136,7140,7148,7157,7172,7179,7189,7199,7230,7235,7246,7254],{"__ignoreMap":388},[77,7087,7088,7090,7092,7094,7096,7098,7100],{"class":489,"line":490},[77,7089,686],{"class":685},[77,7091,690],{"class":689},[77,7093,694],{"class":693},[77,7095,697],{"class":693},[77,7097,700],{"class":685},[77,7099,703],{"class":497},[77,7101,706],{"class":685},[77,7103,7104,7106,7108,7111,7113,7116,7118,7120,7122,7124],{"class":489,"line":389},[77,7105,712],{"class":711},[77,7107,716],{"class":715},[77,7109,7110],{"class":719}," OrbitControls",[77,7112,994],{"class":715},[77,7114,7115],{"class":719}," Sphere",[77,7117,994],{"class":715},[77,7119,4502],{"class":719},[77,7121,723],{"class":715},[77,7123,726],{"class":711},[77,7125,1514],{"class":497},[77,7127,7128,7130,7132,7134],{"class":489,"line":732},[77,7129,686],{"class":719},[77,7131,3197],{"class":685},[77,7133,690],{"class":689},[77,7135,706],{"class":685},[77,7137,7138],{"class":489,"line":749},[77,7139,771],{"emptyLinePlaceholder":196},[77,7141,7142,7144,7146],{"class":489,"line":768},[77,7143,686],{"class":685},[77,7145,938],{"class":689},[77,7147,706],{"class":685},[77,7149,7150,7152,7154],{"class":489,"line":774},[77,7151,946],{"class":685},[77,7153,949],{"class":689},[77,7155,7156],{"class":685}," >\n",[77,7158,7159,7161,7163,7165,7167,7170],{"class":489,"line":781},[77,7160,973],{"class":685},[77,7162,976],{"class":689},[77,7164,4018],{"class":693},[77,7166,700],{"class":685},[77,7168,7169],{"class":497},"\"[0, 2, 5]\"",[77,7171,1009],{"class":685},[77,7173,7174,7176],{"class":489,"line":816},[77,7175,973],{"class":685},[77,7177,7178],{"class":689},"Sphere\n",[77,7180,7181,7184,7186],{"class":489,"line":840},[77,7182,7183],{"class":693},"      ref",[77,7185,700],{"class":685},[77,7187,7188],{"class":497},"\"sphereRef\"\n",[77,7190,7191,7194,7196],{"class":489,"line":862},[77,7192,7193],{"class":693},"      :scale",[77,7195,700],{"class":685},[77,7197,7198],{"class":497},"\"0.5\"\n",[77,7200,7201,7204,7207,7210,7213,7216,7219,7222,7225,7228],{"class":489,"line":868},[77,7202,7203],{"class":693},"      v-log:material",[77,7205,7206],{"class":719},"  \u003C!-- ",[77,7208,7209],{"class":693},"will",[77,7211,7212],{"class":693}," print",[77,7214,7215],{"class":693}," just",[77,7217,7218],{"class":693}," the",[77,7220,7221],{"class":693}," material",[77,7223,7224],{"class":693}," 🎉",[77,7226,7227],{"class":693}," --",[77,7229,706],{"class":685},[77,7231,7232],{"class":489,"line":882},[77,7233,7234],{"class":719},"    />\n",[77,7236,7237,7239,7241,7244],{"class":489,"line":894},[77,7238,973],{"class":685},[77,7240,3851],{"class":689},[77,7242,7243],{"class":693}," v-log",[77,7245,1009],{"class":685},[77,7247,7248,7250,7252],{"class":489,"line":903},[77,7249,1076],{"class":685},[77,7251,949],{"class":689},[77,7253,706],{"class":685},[77,7255,7256,7258,7260],{"class":489,"line":912},[77,7257,921],{"class":685},[77,7259,938],{"class":689},[77,7261,706],{"class":685},[14,7263,7264,7265,7268],{},"Check ",[38,7266,4581],{"href":4476,"rel":7267},[42]," for more info.",[462,7270,7271],{"id":7271},"v-light-helper",[14,7273,7274,7275,7277],{},"Also for debug purposes, ",[233,7276,7271],{}," aims to add the current helper for the light, this way you don't have to worry about any reference or bloated code, just import and use it with a light, and you'll get the right helper.",[479,7279,7281],{"className":3143,"code":7280,"language":3145,"meta":388,"style":388},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, vLightHelper } from '@tresjs/core'\nimport { OrbitControls, Sphere } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas >\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CTresDirectionalLight\n      v-light-helper\n    />\n    \u003CTresPointLight\n      v-light-helper\n    />\n    \u003CTresSpotLight\n      v-light-helper\n    />\n    \u003CTresHemisphereLight\n      v-light-helper\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[233,7282,7283,7299,7319,7338,7348,7352,7360,7368,7382,7389,7394,7398,7405,7409,7413,7420,7424,7428,7435,7439,7443,7451],{"__ignoreMap":388},[77,7284,7285,7287,7289,7291,7293,7295,7297],{"class":489,"line":490},[77,7286,686],{"class":685},[77,7288,690],{"class":689},[77,7290,694],{"class":693},[77,7292,697],{"class":693},[77,7294,700],{"class":685},[77,7296,703],{"class":497},[77,7298,706],{"class":685},[77,7300,7301,7303,7305,7308,7310,7313,7315,7317],{"class":489,"line":389},[77,7302,712],{"class":711},[77,7304,716],{"class":715},[77,7306,7307],{"class":719}," TresCanvas",[77,7309,994],{"class":715},[77,7311,7312],{"class":719}," vLightHelper ",[77,7314,723],{"class":715},[77,7316,726],{"class":711},[77,7318,729],{"class":497},[77,7320,7321,7323,7325,7327,7329,7332,7334,7336],{"class":489,"line":732},[77,7322,712],{"class":711},[77,7324,716],{"class":715},[77,7326,7110],{"class":719},[77,7328,994],{"class":715},[77,7330,7331],{"class":719}," Sphere ",[77,7333,723],{"class":715},[77,7335,726],{"class":711},[77,7337,1514],{"class":497},[77,7339,7340,7342,7344,7346],{"class":489,"line":749},[77,7341,686],{"class":719},[77,7343,3197],{"class":685},[77,7345,690],{"class":689},[77,7347,706],{"class":685},[77,7349,7350],{"class":489,"line":768},[77,7351,771],{"emptyLinePlaceholder":196},[77,7353,7354,7356,7358],{"class":489,"line":774},[77,7355,686],{"class":685},[77,7357,938],{"class":689},[77,7359,706],{"class":685},[77,7361,7362,7364,7366],{"class":489,"line":781},[77,7363,946],{"class":685},[77,7365,949],{"class":689},[77,7367,7156],{"class":685},[77,7369,7370,7372,7374,7376,7378,7380],{"class":489,"line":816},[77,7371,973],{"class":685},[77,7373,976],{"class":689},[77,7375,4018],{"class":693},[77,7377,700],{"class":685},[77,7379,7169],{"class":497},[77,7381,1009],{"class":685},[77,7383,7384,7386],{"class":489,"line":840},[77,7385,973],{"class":685},[77,7387,7388],{"class":689},"TresDirectionalLight\n",[77,7390,7391],{"class":489,"line":862},[77,7392,7393],{"class":693},"      v-light-helper\n",[77,7395,7396],{"class":489,"line":868},[77,7397,7234],{"class":685},[77,7399,7400,7402],{"class":489,"line":882},[77,7401,973],{"class":685},[77,7403,7404],{"class":689},"TresPointLight\n",[77,7406,7407],{"class":489,"line":894},[77,7408,7393],{"class":693},[77,7410,7411],{"class":489,"line":903},[77,7412,7234],{"class":685},[77,7414,7415,7417],{"class":489,"line":912},[77,7416,973],{"class":685},[77,7418,7419],{"class":689},"TresSpotLight\n",[77,7421,7422],{"class":489,"line":918},[77,7423,7393],{"class":693},[77,7425,7426],{"class":489,"line":928},[77,7427,7234],{"class":685},[77,7429,7430,7432],{"class":489,"line":933},[77,7431,973],{"class":685},[77,7433,7434],{"class":689},"TresHemisphereLight\n",[77,7436,7437],{"class":489,"line":943},[77,7438,7393],{"class":693},[77,7440,7441],{"class":489,"line":970},[77,7442,7234],{"class":685},[77,7444,7445,7447,7449],{"class":489,"line":1012},[77,7446,1076],{"class":685},[77,7448,949],{"class":689},[77,7450,706],{"class":685},[77,7452,7453,7455,7457],{"class":489,"line":1049},[77,7454,921],{"class":685},[77,7456,938],{"class":689},[77,7458,706],{"class":685},[14,7460,7461,7462,7466],{},"Visit the ",[38,7463,3720],{"href":7464,"rel":7465},"https://docs.tresjs.org/directives/v-light-helper.html",[42]," to learn more.",[462,7468,7469],{"id":7469},"v-always-look-at",[14,7471,7472,7473,7475],{},"With the ",[233,7474,7469],{}," as the name suggest you can force the element to always look at a point (even if this is in movement).",[479,7477,7479],{"className":3143,"code":7478,"language":3145,"meta":388,"style":388},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, vAlwaysLookAt } from '@tresjs/core'\nimport { Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CBox\n      v-always-look-at=\"new Vector3(0, 0, 0)\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[233,7480,7481,7497,7516,7531,7541,7545,7553,7561,7575,7582,7592,7596,7604],{"__ignoreMap":388},[77,7482,7483,7485,7487,7489,7491,7493,7495],{"class":489,"line":490},[77,7484,686],{"class":685},[77,7486,690],{"class":689},[77,7488,694],{"class":693},[77,7490,697],{"class":693},[77,7492,700],{"class":685},[77,7494,703],{"class":497},[77,7496,706],{"class":685},[77,7498,7499,7501,7503,7505,7507,7510,7512,7514],{"class":489,"line":389},[77,7500,712],{"class":711},[77,7502,716],{"class":715},[77,7504,7307],{"class":719},[77,7506,994],{"class":715},[77,7508,7509],{"class":719}," vAlwaysLookAt ",[77,7511,723],{"class":715},[77,7513,726],{"class":711},[77,7515,729],{"class":497},[77,7517,7518,7520,7522,7525,7527,7529],{"class":489,"line":732},[77,7519,712],{"class":711},[77,7521,716],{"class":715},[77,7523,7524],{"class":719}," Box ",[77,7526,723],{"class":715},[77,7528,726],{"class":711},[77,7530,1514],{"class":497},[77,7532,7533,7535,7537,7539],{"class":489,"line":749},[77,7534,686],{"class":719},[77,7536,3197],{"class":685},[77,7538,690],{"class":689},[77,7540,706],{"class":685},[77,7542,7543],{"class":489,"line":768},[77,7544,771],{"emptyLinePlaceholder":196},[77,7546,7547,7549,7551],{"class":489,"line":774},[77,7548,686],{"class":685},[77,7550,938],{"class":689},[77,7552,706],{"class":685},[77,7554,7555,7557,7559],{"class":489,"line":781},[77,7556,946],{"class":685},[77,7558,949],{"class":689},[77,7560,706],{"class":685},[77,7562,7563,7565,7567,7569,7571,7573],{"class":489,"line":816},[77,7564,973],{"class":685},[77,7566,976],{"class":689},[77,7568,4018],{"class":693},[77,7570,700],{"class":685},[77,7572,7169],{"class":497},[77,7574,1009],{"class":685},[77,7576,7577,7579],{"class":489,"line":840},[77,7578,973],{"class":685},[77,7580,7581],{"class":689},"Box\n",[77,7583,7584,7587,7589],{"class":489,"line":862},[77,7585,7586],{"class":693},"      v-always-look-at",[77,7588,700],{"class":685},[77,7590,7591],{"class":497},"\"new Vector3(0, 0, 0)\"\n",[77,7593,7594],{"class":489,"line":868},[77,7595,7234],{"class":685},[77,7597,7598,7600,7602],{"class":489,"line":882},[77,7599,1076],{"class":685},[77,7601,949],{"class":689},[77,7603,706],{"class":685},[77,7605,7606,7608,7610],{"class":489,"line":894},[77,7607,921],{"class":685},[77,7609,938],{"class":689},[77,7611,706],{"class":685},[14,7613,7614,7615],{},"Learn more ",[38,7616,4581],{"href":7617,"rel":7618},"https://docs.tresjs.org/directives/v-always-look-at.html",[42],[462,7620,6896],{"id":6896},[14,7622,7623],{},[25,7624],{"alt":7625,"src":7626},"v-distance-to directive tresjs","../assets/blog/what-is-new-3-7-devtools/v-distance-to.png",[14,7628,7629,7630,7632],{},"Have you ever tried to measure the distance between objects in threejs? Well now it's easier than ever. Just use the ",[233,7631,6896],{}," and you'll get the exact distance. Example:",[479,7634,7636],{"className":3143,"code":7635,"language":3145,"meta":388,"style":388},"\u003CSphere\n  ref=\"sphere1Ref\"\n  :position=\"[-2, slider, 0]\"\n  :scale=\"0.5\"\n/>\n\u003CSphere\n  v-distance-to=\"sphere1Ref\"\n  :position=\"[2, 0, 0]\"\n  :scale=\"0.5\"\n/>\n",[233,7637,7638,7644,7654,7664,7673,7677,7683,7692,7701,7709],{"__ignoreMap":388},[77,7639,7640,7642],{"class":489,"line":490},[77,7641,686],{"class":685},[77,7643,7178],{"class":689},[77,7645,7646,7649,7651],{"class":489,"line":389},[77,7647,7648],{"class":693},"  ref",[77,7650,700],{"class":685},[77,7652,7653],{"class":497},"\"sphere1Ref\"\n",[77,7655,7656,7659,7661],{"class":489,"line":732},[77,7657,7658],{"class":693},"  :position",[77,7660,700],{"class":685},[77,7662,7663],{"class":497},"\"[-2, slider, 0]\"\n",[77,7665,7666,7669,7671],{"class":489,"line":749},[77,7667,7668],{"class":693},"  :scale",[77,7670,700],{"class":685},[77,7672,7198],{"class":497},[77,7674,7675],{"class":489,"line":768},[77,7676,5231],{"class":685},[77,7678,7679,7681],{"class":489,"line":774},[77,7680,686],{"class":685},[77,7682,7178],{"class":689},[77,7684,7685,7688,7690],{"class":489,"line":781},[77,7686,7687],{"class":693},"  v-distance-to",[77,7689,700],{"class":685},[77,7691,7653],{"class":497},[77,7693,7694,7696,7698],{"class":489,"line":816},[77,7695,7658],{"class":693},[77,7697,700],{"class":685},[77,7699,7700],{"class":497},"\"[2, 0, 0]\"\n",[77,7702,7703,7705,7707],{"class":489,"line":840},[77,7704,7668],{"class":693},[77,7706,700],{"class":685},[77,7708,7198],{"class":497},[77,7710,7711],{"class":489,"line":862},[77,7712,5231],{"class":685},[14,7714,7715,7716,7721],{},"Hope you like this new release, and stay tuned for more updates! 🚀. Tell us what do you think about this new features on ",[38,7717,7720],{"href":7718,"rel":7719},"https://twitter.com/tresjs_dev",[42],"@tresjs_dev"," 😊",[3040,7723,3745],{},{"title":388,"searchDepth":389,"depth":389,"links":7725},[7726,7727,7728,7733],{"id":3784,"depth":389,"text":3785},{"id":6948,"depth":389,"text":6949},{"id":6974,"depth":389,"text":6975,"children":7729},[7730,7731,7732],{"id":6978,"depth":732,"text":6979},{"id":6991,"depth":732,"text":6992},{"id":7015,"depth":732,"text":7016},{"id":7055,"depth":389,"text":7056,"children":7734},[7735,7736,7737,7738],{"id":7074,"depth":732,"text":7074},{"id":7271,"depth":732,"text":7271},{"id":7469,"depth":732,"text":7469},{"id":6896,"depth":732,"text":6896},"Release","2024-01-30","Check out the new features of TresjS 3.7, including the highly anticipated Vue Devtools",{},"/blog/what-is-new-3-7-devtools",{"title":6888,"description":7741},"blog/what-is-new-3-7-devtools","/blog/what-is-new-3-7-devtools/what-is-new-3-7-devtools.png","ugs489ZqYm3ZEJCgQtb7gAYMYSJjKDEHHg5eXXCZShU",{"id":7749,"title":7750,"author":8,"body":7751,"category":398,"date":9030,"description":9031,"draft":401,"extension":402,"meta":9032,"navigation":196,"path":9033,"seo":9034,"stem":9035,"thumbnail":9036,"url":407,"__hash__":9037},"blog/blog/tresjs-1-year-anniversary.md","TresJS 1 Year Anniversary",{"type":11,"value":7752,"toc":9016},[7753,7756,7759,7762,7768,7771,7777,7780,7785,7788,7802,7810,7814,7820,7826,7832,7859,7875,8016,8023,8194,8208,8621,8625,8630,8652,8663,8671,8674,8678,8686,8689,8698,8702,8705,8709,8744,8750,8752,8755,8766,8772,8783,8899,8908,8915,8926,8931,8943,8947,8950,8969,8977,8981,8984,9010,9013],[14,7754,7755],{},"/* import StatusQuo from '../../components/StatusQuo.vue';\nimport TresLechesDemo from '../../components/TresLechesDemo.vue';\nimport { YouTube } from '@astro-community/astro-embed-youtube'; */",[14,7757,7758],{},"A year ago, I was learning how to use React Three Fiber, a custom renderer with the power of creating 3D scenes declarately with React components and it blowed my mind 🤯.",[14,7760,7761],{},"Then, I did what I do best, complain in twitter 😅 😂:",[14,7763,7764],{},[25,7765],{"alt":7766,"src":7767},"Tweet complaining about the lack of a 3D framework on VueJS","../assets/blog/first-anniversary-post/the-spark.png",[14,7769,7770],{},"Yep, that was the panorama for VueJS developers like me back then. There were some initiatives like TroisJS, a manual wrapper of ThreeJS for VueJS that became unmantained and Lunchbox, who were the firsts to try to create a renderer. But, it was not enough for me, inspired by Pmndrs work and Thretle for Svelte I decided to create a renderer for VueJS, and that's how TresJS was born.",[14,7772,7773],{},[25,7774],{"alt":7775,"src":7776},"First commits of TresJS","../assets/blog/first-anniversary-post/first-commits.png",[14,7778,7779],{},"I started with a simple idea, provide the vue community with a ecosystem that would allow you to create 3D scenes declaratively with VueJS components and that was easy to mantain and extend.",[14,7781,7782],{},[25,7783],{"alt":388,"src":7784},"../assets/blog/first-anniversary-post/the-confirmation-tweet.png",[14,7786,7787],{},"For us it was important to solve the biggest problems of previous solutions:",[241,7789,7790,7793,7796,7799],{},[244,7791,7792],{},"Keep it up to date with ThreeJS which constantly updates",[244,7794,7795],{},"A good DX, we wanted to make it easy to use and learn",[244,7797,7798],{},"Performant, even with reactivity.",[244,7800,7801],{},"Extendable, we wanted to make it easy to create new components and extend the core library with community-driven packages.",[14,7803,7804,7805,170],{},"Although v1 was a decent solution 😄 and we managed to achieve some of the goals, it has some limitations that would only be solved by using ",[38,7806,7809],{"href":7807,"rel":7808},"https://vuejs.org/api/custom-renderer.html",[42],"Vue's Custom Renderer API",[18,7811,7813],{"id":7812},"roadmap-to-v2","Roadmap to v2",[7815,7816],"iframe",{"src":7817,"className":7818,"frameBorder":7819,"allowFullScreen":196},"https://giphy.com/embed/AXorq76Tg3Vte",[193,194],"0",[14,7821,7822],{},[38,7823,7825],{"href":7824},"https://giphy.com/gifs/classic-film-leslie-caron-AXorq76Tg3Vte","via GIPHY",[14,7827,7828,7829,170],{},"Getting started with the Custom Renderer API was not easy, it's a very powerful API but it's not completly documented and it's not easy to find examples. We had to learn how to use it by reading the source code of VueJS and how the framework uses it internally to render the DOM ",[233,7830,7831],{},"@vue/runtime-dom",[14,7833,7834,7835,7840,7841,7846,7847,7852,7853,7858],{},"Thats when ",[38,7836,7839],{"href":7837,"rel":7838},"https://twitter.com/verekia",[42],"Verekia"," author of ",[38,7842,7845],{"href":7843,"rel":7844},"https://www.webgamedev.com/",[42],"WebGameDev"," and one of our earliest supporters, put me in contact with ",[38,7848,7851],{"href":7849,"rel":7850},"https://twitter.com/Cody_J_Bennett",[42],"Cody Bennet"," and Paul Henschel (",[38,7854,7857],{"href":7855,"rel":7856},"https://twitter.com/0xca0a",[42],"0xca0a",") who are not more no less than the creators of React Three Fiber. They were very kind and helped me a lot with the fundations of the project and Cody did a small PoC replicating the React Three Fiber custom renderer but with the VueJS API.",[14,7860,7861,7864,7865,359,7868,1479,7871,7874],{},[3004,7862,7863],{},"Voilà","! We had a working prototype of a custom renderer for VueJS, thanks to that example, I was able to understand how the API works and how to develop it further to assemble the scene graph based on nodes using ",[233,7866,7867],{},"insert",[233,7869,7870],{},"patchProp",[233,7872,7873],{},"createElement"," methods.",[479,7876,7878],{"className":4484,"code":7877,"language":4486,"meta":388,"style":388},"// core/renderer.ts\nimport * as THREE from 'three'\n\nimport { createRenderer } from 'vue'\nimport { extend } from './catalogue'\nimport { nodeOps } from './nodeOps'\n\nexport const { render } = createRenderer(nodeOps)\n\n// Creates the catalogue of components based on THREE namespace\nextend(THREE)\n\nexport default { extend }\n",[233,7879,7880,7885,7905,7909,7924,7940,7956,7960,7982,7986,7991,7999,8003],{"__ignoreMap":388},[77,7881,7882],{"class":489,"line":490},[77,7883,7884],{"class":777},"// core/renderer.ts\n",[77,7886,7887,7889,7893,7896,7899,7902],{"class":489,"line":389},[77,7888,712],{"class":711},[77,7890,7892],{"class":7891},"sa5fG"," *",[77,7894,7895],{"class":711}," as",[77,7897,7898],{"class":719}," THREE ",[77,7900,7901],{"class":711},"from",[77,7903,7904],{"class":497}," 'three'\n",[77,7906,7907],{"class":489,"line":732},[77,7908,771],{"emptyLinePlaceholder":196},[77,7910,7911,7913,7915,7918,7920,7922],{"class":489,"line":749},[77,7912,712],{"class":711},[77,7914,716],{"class":715},[77,7916,7917],{"class":719}," createRenderer ",[77,7919,723],{"class":715},[77,7921,726],{"class":711},[77,7923,4246],{"class":497},[77,7925,7926,7928,7930,7933,7935,7937],{"class":489,"line":768},[77,7927,712],{"class":711},[77,7929,716],{"class":715},[77,7931,7932],{"class":719}," extend ",[77,7934,723],{"class":715},[77,7936,726],{"class":711},[77,7938,7939],{"class":497}," './catalogue'\n",[77,7941,7942,7944,7946,7949,7951,7953],{"class":489,"line":774},[77,7943,712],{"class":711},[77,7945,716],{"class":715},[77,7947,7948],{"class":719}," nodeOps ",[77,7950,723],{"class":715},[77,7952,726],{"class":711},[77,7954,7955],{"class":497}," './nodeOps'\n",[77,7957,7958],{"class":489,"line":781},[77,7959,771],{"emptyLinePlaceholder":196},[77,7961,7962,7965,7968,7970,7972,7974,7976,7979],{"class":489,"line":816},[77,7963,7964],{"class":711},"export",[77,7966,7967],{"class":711}," const",[77,7969,716],{"class":715},[77,7971,5910],{"class":719},[77,7973,723],{"class":715},[77,7975,790],{"class":685},[77,7977,7978],{"class":493}," createRenderer",[77,7980,7981],{"class":719},"(nodeOps)\n",[77,7983,7984],{"class":489,"line":840},[77,7985,771],{"emptyLinePlaceholder":196},[77,7987,7988],{"class":489,"line":862},[77,7989,7990],{"class":777},"// Creates the catalogue of components based on THREE namespace\n",[77,7992,7993,7996],{"class":489,"line":868},[77,7994,7995],{"class":493},"extend",[77,7997,7998],{"class":719},"(THREE)\n",[77,8000,8001],{"class":489,"line":882},[77,8002,771],{"emptyLinePlaceholder":196},[77,8004,8005,8007,8010,8012,8014],{"class":489,"line":894},[77,8006,7964],{"class":711},[77,8008,8009],{"class":711}," default",[77,8011,716],{"class":715},[77,8013,7932],{"class":719},[77,8015,915],{"class":715},[14,8017,8018,8019,8022],{},"where the ",[233,8020,8021],{},"nodeOps"," are the methods that the renderer uses to create the scene graph and patch the props of the nodes.",[479,8024,8026],{"className":4484,"code":8025,"language":4486,"meta":388,"style":388},"// core/nodeOps.ts\nexport const nodeOps: RendererOptions\u003CTresObject, TresObject> = {\n  createElement(tag, _isSVG, _anchor, props) {\n    // Matches tags with the catalogue of THREE constructors with arguments and returns the instance\n  },\n  insert(child, parent) {\n    // Adds the instance to the scene graph\n  },\n  remove(node) {\n    // Removes the instance from the scene graph and dispose it from memory\n  },\n  patchProp(node, prop, _prevValue, nextValue) {\n    // Handles props\n  },\n}\n",[233,8027,8028,8033,8064,8093,8098,8103,8122,8127,8131,8145,8150,8154,8181,8186,8190],{"__ignoreMap":388},[77,8029,8030],{"class":489,"line":490},[77,8031,8032],{"class":777},"// core/nodeOps.ts\n",[77,8034,8035,8037,8039,8042,8044,8047,8050,8053,8055,8058,8060,8062],{"class":489,"line":389},[77,8036,7964],{"class":711},[77,8038,7967],{"class":711},[77,8040,8041],{"class":719}," nodeOps",[77,8043,800],{"class":685},[77,8045,8046],{"class":803}," RendererOptions",[77,8048,686],{"class":8049},"spb_d",[77,8051,8052],{"class":803},"TresObject",[77,8054,994],{"class":715},[77,8056,8057],{"class":803}," TresObject",[77,8059,1920],{"class":8049},[77,8061,790],{"class":685},[77,8063,813],{"class":715},[77,8065,8066,8069,8071,8074,8076,8079,8081,8084,8086,8089,8091],{"class":489,"line":732},[77,8067,8068],{"class":493},"  createElement",[77,8070,834],{"class":715},[77,8072,8073],{"class":796},"tag",[77,8075,994],{"class":715},[77,8077,8078],{"class":796}," _isSVG",[77,8080,994],{"class":715},[77,8082,8083],{"class":796}," _anchor",[77,8085,994],{"class":715},[77,8087,8088],{"class":796}," props",[77,8090,807],{"class":715},[77,8092,813],{"class":715},[77,8094,8095],{"class":489,"line":749},[77,8096,8097],{"class":777},"    // Matches tags with the catalogue of THREE constructors with arguments and returns the instance\n",[77,8099,8100],{"class":489,"line":768},[77,8101,8102],{"class":715},"  },\n",[77,8104,8105,8108,8110,8113,8115,8118,8120],{"class":489,"line":774},[77,8106,8107],{"class":493},"  insert",[77,8109,834],{"class":715},[77,8111,8112],{"class":796},"child",[77,8114,994],{"class":715},[77,8116,8117],{"class":796}," parent",[77,8119,807],{"class":715},[77,8121,813],{"class":715},[77,8123,8124],{"class":489,"line":781},[77,8125,8126],{"class":777},"    // Adds the instance to the scene graph\n",[77,8128,8129],{"class":489,"line":816},[77,8130,8102],{"class":715},[77,8132,8133,8136,8138,8141,8143],{"class":489,"line":840},[77,8134,8135],{"class":493},"  remove",[77,8137,834],{"class":715},[77,8139,8140],{"class":796},"node",[77,8142,807],{"class":715},[77,8144,813],{"class":715},[77,8146,8147],{"class":489,"line":862},[77,8148,8149],{"class":777},"    // Removes the instance from the scene graph and dispose it from memory\n",[77,8151,8152],{"class":489,"line":868},[77,8153,8102],{"class":715},[77,8155,8156,8159,8161,8163,8165,8167,8169,8172,8174,8177,8179],{"class":489,"line":882},[77,8157,8158],{"class":493},"  patchProp",[77,8160,834],{"class":715},[77,8162,8140],{"class":796},[77,8164,994],{"class":715},[77,8166,5421],{"class":796},[77,8168,994],{"class":715},[77,8170,8171],{"class":796}," _prevValue",[77,8173,994],{"class":715},[77,8175,8176],{"class":796}," nextValue",[77,8178,807],{"class":715},[77,8180,813],{"class":715},[77,8182,8183],{"class":489,"line":894},[77,8184,8185],{"class":777},"    // Handles props\n",[77,8187,8188],{"class":489,"line":903},[77,8189,8102],{"class":715},[77,8191,8192],{"class":489,"line":912},[77,8193,915],{"class":715},[14,8195,8196,8197,8200,8201,1479,8204,8207],{},"With a ",[233,8198,8199],{},"\u003CTresCanvas />"," component, we were able to provide a context for the custom renderer, a catalogue of instances from Three namespace, a state and a scene graph that would be shared across the ecosystem using ",[233,8202,8203],{},"provide",[233,8205,8206],{},"inject"," API.",[479,8209,8211],{"className":4484,"code":8210,"language":4486,"meta":388,"style":388},"// TresCanvas.vue\n\nconst createInternalComponent = (context: TresContext) =>\n  defineComponent({\n    setup() {\n      const ctx = getCurrentInstance()?.appContext\n      if (ctx) ctx.app = instance as App\n      provide('useTres', context)\n      provide('extend', extend)\n      return () => h(Fragment, null, slots?.default ? slots.default() : [])\n    },\n  })\n\nconst mountCustomRenderer = (context: TresContext) => {\n  const InternalComponent = createInternalComponent(context)\n  render(h(InternalComponent), scene.value as unknown as TresObject)\n}\n\nonMounted(() => {\n  const existingCanvas = canvas as Ref\u003CHTMLCanvasElement>\n\n  context.value = useTresContextProvider({\n    scene: scene.value,\n    canvas: existingCanvas,\n    windowSize: props.windowSize,\n    disableRender,\n    rendererOptions: props,\n  })\n  mountCustomRenderer(context.value)\n})\n",[233,8212,8213,8218,8222,8245,8254,8263,8283,8307,8322,8336,8383,8388,8394,8398,8421,8435,8468,8472,8476,8488,8512,8516,8534,8549,8560,8576,8583,8594,8601,8614],{"__ignoreMap":388},[77,8214,8215],{"class":489,"line":490},[77,8216,8217],{"class":777},"// TresCanvas.vue\n",[77,8219,8220],{"class":489,"line":389},[77,8221,771],{"emptyLinePlaceholder":196},[77,8223,8224,8226,8229,8231,8233,8235,8237,8240,8242],{"class":489,"line":732},[77,8225,784],{"class":711},[77,8227,8228],{"class":493}," createInternalComponent",[77,8230,790],{"class":685},[77,8232,793],{"class":715},[77,8234,2219],{"class":796},[77,8236,800],{"class":685},[77,8238,8239],{"class":803}," TresContext",[77,8241,807],{"class":715},[77,8243,8244],{"class":685}," =>\n",[77,8246,8247,8250,8252],{"class":489,"line":749},[77,8248,8249],{"class":493},"  defineComponent",[77,8251,834],{"class":719},[77,8253,837],{"class":715},[77,8255,8256,8259,8261],{"class":489,"line":768},[77,8257,8258],{"class":493},"    setup",[77,8260,2445],{"class":715},[77,8262,813],{"class":715},[77,8264,8265,8268,8271,8273,8276,8278,8280],{"class":489,"line":774},[77,8266,8267],{"class":711},"      const",[77,8269,8270],{"class":719}," ctx ",[77,8272,700],{"class":685},[77,8274,8275],{"class":493}," getCurrentInstance",[77,8277,2445],{"class":719},[77,8279,2457],{"class":685},[77,8281,8282],{"class":719},"appContext\n",[77,8284,8285,8288,8291,8293,8296,8298,8301,8304],{"class":489,"line":781},[77,8286,8287],{"class":711},"      if",[77,8289,8290],{"class":719}," (ctx) ctx",[77,8292,170],{"class":685},[77,8294,8295],{"class":719},"app ",[77,8297,700],{"class":685},[77,8299,8300],{"class":719}," instance ",[77,8302,8303],{"class":711},"as",[77,8305,8306],{"class":803}," App\n",[77,8308,8309,8312,8314,8317,8319],{"class":489,"line":816},[77,8310,8311],{"class":493},"      provide",[77,8313,834],{"class":719},[77,8315,8316],{"class":497},"'useTres'",[77,8318,994],{"class":715},[77,8320,8321],{"class":719}," context)\n",[77,8323,8324,8326,8328,8331,8333],{"class":489,"line":840},[77,8325,8311],{"class":493},[77,8327,834],{"class":719},[77,8329,8330],{"class":497},"'extend'",[77,8332,994],{"class":715},[77,8334,8335],{"class":719}," extend)\n",[77,8337,8338,8341,8343,8345,8348,8351,8353,8356,8358,8361,8363,8366,8369,8371,8373,8376,8378,8380],{"class":489,"line":862},[77,8339,8340],{"class":711},"      return",[77,8342,4308],{"class":715},[77,8344,810],{"class":685},[77,8346,8347],{"class":493}," h",[77,8349,8350],{"class":719},"(Fragment",[77,8352,994],{"class":715},[77,8354,8355],{"class":711}," null",[77,8357,994],{"class":715},[77,8359,8360],{"class":719}," slots",[77,8362,2457],{"class":685},[77,8364,8365],{"class":719},"default ",[77,8367,8368],{"class":685},"?",[77,8370,8360],{"class":719},[77,8372,170],{"class":685},[77,8374,8375],{"class":493},"default",[77,8377,6349],{"class":719},[77,8379,800],{"class":685},[77,8381,8382],{"class":719}," [])\n",[77,8384,8385],{"class":489,"line":868},[77,8386,8387],{"class":715},"    },\n",[77,8389,8390,8392],{"class":489,"line":882},[77,8391,897],{"class":715},[77,8393,900],{"class":719},[77,8395,8396],{"class":489,"line":894},[77,8397,771],{"emptyLinePlaceholder":196},[77,8399,8400,8402,8405,8407,8409,8411,8413,8415,8417,8419],{"class":489,"line":903},[77,8401,784],{"class":711},[77,8403,8404],{"class":493}," mountCustomRenderer",[77,8406,790],{"class":685},[77,8408,793],{"class":715},[77,8410,2219],{"class":796},[77,8412,800],{"class":685},[77,8414,8239],{"class":803},[77,8416,807],{"class":715},[77,8418,810],{"class":685},[77,8420,813],{"class":715},[77,8422,8423,8425,8428,8430,8432],{"class":489,"line":912},[77,8424,819],{"class":711},[77,8426,8427],{"class":719}," InternalComponent ",[77,8429,700],{"class":685},[77,8431,8228],{"class":493},[77,8433,8434],{"class":719},"(context)\n",[77,8436,8437,8440,8442,8445,8448,8450,8452,8454,8457,8459,8462,8464,8466],{"class":489,"line":918},[77,8438,8439],{"class":493},"  render",[77,8441,834],{"class":719},[77,8443,8444],{"class":493},"h",[77,8446,8447],{"class":719},"(InternalComponent)",[77,8449,994],{"class":715},[77,8451,5286],{"class":719},[77,8453,170],{"class":685},[77,8455,8456],{"class":719},"value ",[77,8458,8303],{"class":711},[77,8460,8461],{"class":711}," unknown",[77,8463,7895],{"class":711},[77,8465,8057],{"class":803},[77,8467,900],{"class":719},[77,8469,8470],{"class":489,"line":928},[77,8471,915],{"class":715},[77,8473,8474],{"class":489,"line":933},[77,8475,771],{"emptyLinePlaceholder":196},[77,8477,8478,8480,8482,8484,8486],{"class":489,"line":943},[77,8479,5072],{"class":493},[77,8481,834],{"class":719},[77,8483,2445],{"class":715},[77,8485,810],{"class":685},[77,8487,813],{"class":715},[77,8489,8490,8492,8495,8497,8500,8502,8505,8507,8510],{"class":489,"line":970},[77,8491,819],{"class":711},[77,8493,8494],{"class":719}," existingCanvas ",[77,8496,700],{"class":685},[77,8498,8499],{"class":719}," canvas ",[77,8501,8303],{"class":711},[77,8503,8504],{"class":803}," Ref",[77,8506,686],{"class":8049},[77,8508,8509],{"class":803},"HTMLCanvasElement",[77,8511,706],{"class":8049},[77,8513,8514],{"class":489,"line":1012},[77,8515,771],{"emptyLinePlaceholder":196},[77,8517,8518,8521,8523,8525,8527,8530,8532],{"class":489,"line":1049},[77,8519,8520],{"class":719},"  context",[77,8522,170],{"class":685},[77,8524,8456],{"class":719},[77,8526,700],{"class":685},[77,8528,8529],{"class":493}," useTresContextProvider",[77,8531,834],{"class":719},[77,8533,837],{"class":715},[77,8535,8536,8539,8541,8543,8545,8547],{"class":489,"line":1067},[77,8537,8538],{"class":719},"    scene",[77,8540,800],{"class":685},[77,8542,5286],{"class":719},[77,8544,170],{"class":685},[77,8546,2454],{"class":719},[77,8548,859],{"class":715},[77,8550,8551,8553,8555,8558],{"class":489,"line":1073},[77,8552,843],{"class":719},[77,8554,800],{"class":685},[77,8556,8557],{"class":719}," existingCanvas",[77,8559,859],{"class":715},[77,8561,8562,8565,8567,8569,8571,8574],{"class":489,"line":1083},[77,8563,8564],{"class":719},"    windowSize",[77,8566,800],{"class":685},[77,8568,8088],{"class":719},[77,8570,170],{"class":685},[77,8572,8573],{"class":719},"windowSize",[77,8575,859],{"class":715},[77,8577,8578,8581],{"class":489,"line":1418},[77,8579,8580],{"class":719},"    disableRender",[77,8582,859],{"class":715},[77,8584,8585,8588,8590,8592],{"class":489,"line":1458},[77,8586,8587],{"class":719},"    rendererOptions",[77,8589,800],{"class":685},[77,8591,8088],{"class":719},[77,8593,859],{"class":715},[77,8595,8597,8599],{"class":489,"line":8596},28,[77,8598,897],{"class":715},[77,8600,900],{"class":719},[77,8602,8604,8607,8610,8612],{"class":489,"line":8603},29,[77,8605,8606],{"class":493},"  mountCustomRenderer",[77,8608,8609],{"class":719},"(context",[77,8611,170],{"class":685},[77,8613,4336],{"class":719},[77,8615,8617,8619],{"class":489,"line":8616},30,[77,8618,723],{"class":715},[77,8620,900],{"class":719},[18,8622,8624],{"id":8623},"core-team-assembly","Core Team assembly",[14,8626,8627],{},[25,8628],{"alt":388,"src":8629},"../assets/blog/first-anniversary-post/tres-core-team.png",[14,8631,8632,8633,1479,8638,8643,8644,8651],{},"Soon after, ",[38,8634,8637],{"href":8635,"rel":8636},"https://twitter.com/jaimebboyjt",[42],"Jaime Torralba",[38,8639,8642],{"href":8640,"rel":8641},"https://twitter.com/ichbintino",[42],"Tino"," joined the core-team. Jaime took the lead of the abstractions and helpers on the ",[38,8645,8648,8650],{"href":8646,"rel":8647},"https://cientos.tresjs.org/",[42],[233,8649,7070],{}," package",", providing the ecosystem with really cool demos, and Tino contributed heavily on the stability of the core, creating a context provider for the state and everything related to pointer events and raycasting.",[14,8653,8654,8659,8660,8662],{},[38,8655,8658],{"href":8656,"rel":8657},"https://github.com/andretchen0",[42],"andretchen0"," joined the team later after collaborating heavily extending ",[233,8661,7070],{}," with new components and helpers that literally blowed our minds off 🤯.",[14,8664,8665,8666],{},"Way more people has contributed to the project without being on the core team and we are really grateful for that. ",[38,8667,8670],{"href":8668,"rel":8669},"https://github.com/Tresjs/tres/graphs/contributors",[42],"Contributors",[14,8672,8673],{},"They are the heart of the project and without them, TresJS would not be what it is today 💚.",[18,8675,8677],{"id":8676},"open-source-at-vuejs-london","Open Source at VueJS London",[14,8679,8680,8681,170],{},"Until this point, TresJS was a private repository. We were not sure if the project was going to be successful or not, but we were sure that we wanted to make it open source. So we decided to make it public live on stage at ",[38,8682,8685],{"href":8683,"rel":8684},"https://vuejslive.com/",[42],"VueJS Live London",[14,8687,8688],{},"Funny enough, Github gave us a really hard time with authentication to make it public, you know, the magic of live stage. 😅",[14,8690,8691,8692],{},"{/* ",[8693,8694,8697],"you-tube",{"id":8695,"params":8696},"https://www.youtube.com/embed/-Ri7VZzhhUo?si=ABoRnD225DGeVeM8","start=1193"," */}",[18,8699,8701],{"id":8700},"status-quo","Status Quo",[14,8703,8704],{},"A year after, we have a stable ecosystem that allow you to create 3D scenes declaratively with VueJS. We have a lot of cool demos and people using TresJS already in production for webistes and, games 🕹️.",[14,8706,8691,8707],{},[8700,8708,8697],{"client:only":388},[241,8710,8711,8722,8733],{},[244,8712,8713,8714,8717,8718,8721],{},"More than ",[33,8715,8716],{},"1000 🌟"," on Github across the ecosystem, being the ",[233,8719,8720],{},"core"," the most starred repository (818),",[244,8723,8724,8725,8728,8729,8732],{},"Around ",[33,8726,8727],{},"550 PR"," merged, and ",[33,8730,8731],{},"> 1700 commits"," in total.",[244,8734,8735,8738,8739],{},[33,8736,8737],{},"30,800 downloads"," 🤯 (around 1.4k monthly) see ",[38,8740,8743],{"href":8741,"rel":8742},"https://npm-stat.com/charts.html?package=%40tresjs%2Fcore&from=2022-10-27&to=2023-11-27",[42],"npm-stats",[14,8745,8746],{},[25,8747],{"alt":8748,"src":8749},"Total npm downloads of TresJS ecosystem","../assets/blog/first-anniversary-post/npm-downloads.png",[18,8751,7016],{"id":7015},[14,8753,8754],{},"Now, it's time to look forward to the future. And we couldn't be more excited about it. 2024 is going to be a big year for TresJS, we have a lot of cool stuff coming up:",[462,8756,8758,8761,8762,8765],{"id":8757},"post-processing-is-reaching-alpha-soon",[33,8759,8760],{},"Post-processing 📦"," is reaching ",[233,8763,8764],{},"alpha"," soon.",[14,8767,8768],{},[25,8769],{"alt":8770,"src":8771},"Post-processing demo","../assets/blog/first-anniversary-post/post-processing.png",[14,8773,8774,8775,8778,8779,8782],{},"We are working on a post-processing package ",[233,8776,8777],{},"@tresjs/post-processing"," that will introduce the concept of passes and effects to extend the common rendering workflow with fullscreen image manipulation tools your scenes declaratively. It's based on ",[38,8780,3350],{"href":3348,"rel":8781},[42]," and it's going to be a game changer for the ecosystem.",[479,8784,8786],{"className":675,"code":8785,"language":678,"meta":388,"style":388},"\u003Cscript setup>\nimport { EffectComposer, DepthOfField, Bloom } from '@tresjs/post-processing'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CEffectComposer>\n      \u003CDepthOfField />\n      \u003CBloom />\n    \u003C/EffectComposer>\n  \u003C/TresCanvas>\n\u003C/template>\n",[233,8787,8788,8798,8823,8831,8835,8843,8851,8859,8867,8875,8883,8891],{"__ignoreMap":388},[77,8789,8790,8792,8794,8796],{"class":489,"line":490},[77,8791,686],{"class":685},[77,8793,690],{"class":689},[77,8795,694],{"class":693},[77,8797,706],{"class":685},[77,8799,8800,8802,8804,8806,8808,8811,8813,8816,8818,8820],{"class":489,"line":389},[77,8801,712],{"class":711},[77,8803,716],{"class":715},[77,8805,3173],{"class":719},[77,8807,994],{"class":715},[77,8809,8810],{"class":719}," DepthOfField",[77,8812,994],{"class":715},[77,8814,8815],{"class":719}," Bloom ",[77,8817,723],{"class":715},[77,8819,726],{"class":711},[77,8821,8822],{"class":497}," '@tresjs/post-processing'\n",[77,8824,8825,8827,8829],{"class":489,"line":732},[77,8826,921],{"class":685},[77,8828,690],{"class":689},[77,8830,706],{"class":685},[77,8832,8833],{"class":489,"line":749},[77,8834,771],{"emptyLinePlaceholder":196},[77,8836,8837,8839,8841],{"class":489,"line":768},[77,8838,686],{"class":685},[77,8840,938],{"class":689},[77,8842,706],{"class":685},[77,8844,8845,8847,8849],{"class":489,"line":774},[77,8846,946],{"class":685},[77,8848,949],{"class":689},[77,8850,706],{"class":685},[77,8852,8853,8855,8857],{"class":489,"line":781},[77,8854,973],{"class":685},[77,8856,3263],{"class":689},[77,8858,706],{"class":685},[77,8860,8861,8863,8865],{"class":489,"line":816},[77,8862,3270],{"class":685},[77,8864,3391],{"class":689},[77,8866,1009],{"class":685},[77,8868,8869,8871,8873],{"class":489,"line":840},[77,8870,3270],{"class":685},[77,8872,3388],{"class":689},[77,8874,1009],{"class":685},[77,8876,8877,8879,8881],{"class":489,"line":862},[77,8878,3289],{"class":685},[77,8880,3263],{"class":689},[77,8882,706],{"class":685},[77,8884,8885,8887,8889],{"class":489,"line":868},[77,8886,1076],{"class":685},[77,8888,949],{"class":689},[77,8890,706],{"class":685},[77,8892,8893,8895,8897],{"class":489,"line":882},[77,8894,921],{"class":685},[77,8896,938],{"class":689},[77,8898,706],{"class":685},[14,8900,8901,8902,8907],{},"You can follow up the progress in the official ",[38,8903,8906],{"href":8904,"rel":8905},"https://github.com/Tresjs/post-processing",[42],"repo",". We are looking for contributors to help us with the development and testing 😊.",[462,8909,8911,8914],{"id":8910},"tresleches-gui-for-vue-controls",[33,8912,8913],{},"TresLeches 🍰"," GUI for Vue controls",[14,8916,8917,8918,8920,8921,8925],{},"Something that is also close to ",[233,8919,8764],{}," is ",[38,8922,8924],{"href":4175,"rel":8923},[42],"TresLeches",", a GUI for Vue controls. Fine-tuning 🎛️ and monitoring your scenes like never before",[14,8927,8691,8928],{},[8929,8930,8697],"tres-leches-demo",{"client:load":388},[14,8932,8933,8934,1479,8938,8942],{},"Official ",[38,8935,8906],{"href":8936,"rel":8937},"https://github.com/Tresjs/leches",[42],[38,8939,8941],{"href":4175,"rel":8940},[42],"docs",". We are also looking for contributors to help us with the development.",[462,8944,8946],{"id":8945},"physics-and-xr","👀 Physics and XR",[14,8948,8949],{},"Two major features that we are looking forward to implement in the ecosystem are physics and XR. We are still in the early stages of the development, but we are really excited about it since the community has been asking for it for a long time.",[14,8951,8952,8953,8958,8959,1479,8964,170],{},"The physics package will be based on ",[38,8954,8957],{"href":8955,"rel":8956},"https://rapier.rs/",[42],"Rapier physics engine"," and the XR package will be based on ",[38,8960,8963],{"href":8961,"rel":8962},"https://threejs.org/",[42],"three.js",[38,8965,8968],{"href":8966,"rel":8967},"https://immersive-web.github.io/webxr/",[42],"webxr",[14,8970,8971,8972,170],{},"If you want to participate in the development of these packages, you can join us in the ",[38,8973,8976],{"href":8974,"rel":8975},"https://discord.gg/3dXQFwq",[42],"Discord server",[18,8978,8980],{"id":8979},"support-the-project","Support the project",[14,8982,8983],{},"If you like the project and want to support it, you can do it in many ways:",[241,8985,8986,8998,9004],{},[244,8987,8988,8989,8997],{},"If you are a company or an individual using TresJS in your projects, ",[33,8990,8991,8992],{},"please consider becoming a ",[38,8993,8996],{"href":8994,"rel":8995},"https://github.com/sponsors/Tresjs",[42],"Sponsor",". Your sponsorship will help us to maintain the project and develop new features.",[244,8999,9000,9003],{},[33,9001,9002],{},"Contribute to the project",". If you are a developer, you can contribute to the project by creating new components, fixing bugs, or improving the documentation. You can also help us by testing the packages and reporting bugs.",[244,9005,9006,9009],{},[33,9007,9008],{},"Spread the word",". If you are not a developer, you can help us by spreading the word about the project. You can share the project on social media, write a blog post about it, or tell your friends about it.",[14,9011,9012],{},"Thank you and for another year of 3D on Vue with TresJS 🎉 🎉",[3040,9014,9015],{},"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 .sZyUJ, html code.shiki .sZyUJ{--shiki-light:#8839EF;--shiki-default:#8839EF;--shiki-dark:#CA9EE6}html pre.shiki code .sa5fG, html code.shiki .sa5fG{--shiki-light:#D20F39;--shiki-default:#D20F39;--shiki-dark:#E78284}html pre.shiki code .s9Av-, html code.shiki .s9Av-{--shiki-light:#4C4F69;--shiki-default:#4C4F69;--shiki-dark:#C6D0F5}html pre.shiki code .s9Zht, html code.shiki .s9Zht{--shiki-light:#40A02B;--shiki-default:#40A02B;--shiki-dark:#A6D189}html pre.shiki code .spKPg, html code.shiki .spKPg{--shiki-light:#7C7F93;--shiki-default:#7C7F93;--shiki-dark:#949CBB}html pre.shiki code .sWdzt, html code.shiki .sWdzt{--shiki-light:#179299;--shiki-default:#179299;--shiki-dark:#81C8BE}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 .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 .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 .spb_d, html code.shiki .spb_d{--shiki-light:#04A5E5;--shiki-default:#04A5E5;--shiki-dark:#99D1DB}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 .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}",{"title":388,"searchDepth":389,"depth":389,"links":9017},[9018,9019,9020,9021,9022,9029],{"id":7812,"depth":389,"text":7813},{"id":8623,"depth":389,"text":8624},{"id":8676,"depth":389,"text":8677},{"id":8700,"depth":389,"text":8701},{"id":7015,"depth":389,"text":7016,"children":9023},[9024,9026,9028],{"id":8757,"depth":732,"text":9025},"Post-processing 📦 is reaching alpha soon.",{"id":8910,"depth":732,"text":9027},"TresLeches 🍰 GUI for Vue controls",{"id":8945,"depth":732,"text":8946},{"id":8979,"depth":389,"text":8980},"2023-11-28","Celebrating the first year of TresJS, a 3D renderer for VueJS",{},"/blog/tresjs-1-year-anniversary",{"title":7750,"description":9031},"blog/tresjs-1-year-anniversary","/blog/first-anniversary-post/tres-1-year-anniversary.webp","IrhL-YSYmlZqf2uG5N0qzGuGSBptFq5ujebSy6gKK6I",{"id":9039,"title":9040,"avatar":9041,"body":9042,"description":388,"email":9046,"extension":402,"github":8,"meta":9047,"name":9048,"navigation":196,"path":9049,"seo":9050,"slug":8,"stem":9051,"twitter":8,"website":9052,"__hash__":9053},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.png",{"type":11,"value":9043,"toc":9044},[],{"title":388,"searchDepth":389,"depth":389,"links":9045},[],"hola@alvarosaburido.dev",{},"Alvaro Saburido","/authors/alvarosabu",{"title":9040,"description":388},"authors/alvarosabu","https://alvarosaburido.dev","6Bp_fjkY-Mk6PVFUgVQEBtnzfVOYhxXbXePIWELw8xE",{"id":9055,"title":9056,"avatar":9057,"body":9058,"description":388,"email":9062,"extension":402,"github":9063,"meta":9064,"name":9056,"navigation":196,"path":9065,"seo":9066,"slug":9,"stem":9067,"twitter":9068,"website":9069,"__hash__":9070},"authors/authors/tino-koch.md","Tino Koch","/avatars/tino-koch.jpeg",{"type":11,"value":9059,"toc":9060},[],{"title":388,"searchDepth":389,"depth":389,"links":9061},[],"tino@koch.dev","tinoooo",{},"/authors/tino-koch",{"title":9056,"description":388},"authors/tino-koch","ichbintino","https://github.com/tinoooo","_e8Z4gaveyejiZxZkIlLa2yMyZGQDm8Qr1ZsYgQ67aA",{"id":9072,"title":9073,"avatar":9074,"body":9075,"description":388,"email":9079,"extension":402,"github":9080,"meta":9081,"name":9073,"navigation":196,"path":9082,"seo":9083,"slug":3078,"stem":9084,"twitter":9085,"website":407,"__hash__":9086},"authors/authors/damien-montastier.md","Damien Montastier","/avatars/damien-montastier.jpeg",{"type":11,"value":9076,"toc":9077},[],{"title":388,"searchDepth":389,"depth":389,"links":9078},[],"montastier.damien@gmail.com","damienmontastier",{},"/authors/damien-montastier",{"title":9073,"description":388},"authors/damien-montastier","dammontastier","Ldd8zpUGMG2fTq62RZlbxN-AgBAO1mCgjYV8CSPrXwA",[9088,9100,9108,9119,9125,9131,9137,9143],{"id":5,"title":6,"author":7,"body":10,"category":398,"date":399,"description":400,"draft":401,"extension":402,"meta":403,"navigation":196,"path":404,"seo":405,"stem":406,"thumbnail":28,"url":407,"__hash__":408,"slug":9089,"authors":9090,"badge":9098},"tresjs-new-website-and-docs",[9091,9095],{"name":9048,"description":9092,"avatar":9093,"to":9052,"target":62},"@alvarosabu",{"src":9041,"loading":9094},"lazy",{"name":9056,"description":9096,"avatar":9097,"to":9069,"target":62},"@tinoooo",{"src":9057,"loading":9094},{"label":9099,"color":638,"variant":639},"Announcement",{"id":410,"title":411,"author":412,"body":413,"category":3065,"date":3066,"description":3067,"draft":401,"extension":402,"meta":3068,"navigation":196,"path":3069,"seo":3070,"stem":3071,"thumbnail":3072,"url":407,"__hash__":3073,"slug":9101,"authors":9102,"badge":9107},"tresjs-v5",[9103,9105],{"name":9048,"description":9092,"avatar":9104,"to":9052,"target":62},{"src":9041,"loading":9094},{"name":9056,"description":9096,"avatar":9106,"to":9069,"target":62},{"src":9057,"loading":9094},{"label":7739,"color":638,"variant":639},{"id":3075,"title":3076,"author":3077,"body":3079,"category":3065,"date":3755,"description":3756,"draft":401,"extension":402,"meta":3757,"navigation":196,"path":3758,"seo":3759,"stem":3760,"thumbnail":3761,"url":407,"__hash__":3762,"slug":9109,"authors":9110,"badge":9118},"tresjs-post-processing-v1",[9111,9113,9116],{"name":9056,"description":9096,"avatar":9112,"to":9069,"target":62},{"src":9057,"loading":9094},{"name":9073,"description":9114,"avatar":9115,"to":407,"target":62},"@damienmontastier",{"src":9074,"loading":9094},{"name":9048,"description":9092,"avatar":9117,"to":9052,"target":62},{"src":9041,"loading":9094},{"label":7739,"color":638,"variant":639},{"id":3764,"title":3765,"author":8,"body":3766,"category":3065,"date":4668,"description":4669,"draft":401,"extension":402,"meta":4670,"navigation":196,"path":4671,"seo":4672,"stem":4673,"thumbnail":4674,"url":407,"__hash__":4675,"slug":9120,"authors":9121,"badge":9124},"tresjs-cientos-v4",[9122],{"name":9048,"description":9092,"avatar":9123,"to":9052,"target":62},{"src":9041,"loading":9094},{"label":7739,"color":638,"variant":639},{"id":4677,"title":4678,"author":8,"body":4679,"category":3065,"date":6640,"description":6641,"draft":401,"extension":402,"meta":6642,"navigation":196,"path":6643,"seo":6644,"stem":6645,"thumbnail":6646,"url":407,"__hash__":6647,"slug":9126,"authors":9127,"badge":9130},"whats-hot-on-tresjs-v4",[9128],{"name":9048,"description":9092,"avatar":9129,"to":9052,"target":62},{"src":9041,"loading":9094},{"label":7739,"color":638,"variant":639},{"id":6649,"title":6650,"author":8,"body":6651,"category":398,"date":6878,"description":6879,"draft":401,"extension":402,"meta":6880,"navigation":196,"path":6881,"seo":6882,"stem":6883,"thumbnail":6884,"url":407,"__hash__":6885,"slug":9132,"authors":9133,"badge":9136},"whats-new-march-2024",[9134],{"name":9048,"description":9092,"avatar":9135,"to":9052,"target":62},{"src":9041,"loading":9094},{"label":9099,"color":638,"variant":639},{"id":6887,"title":6888,"author":8,"body":6889,"category":7739,"date":7740,"description":7741,"draft":401,"extension":402,"meta":7742,"navigation":196,"path":7743,"seo":7744,"stem":7745,"thumbnail":7746,"url":407,"__hash__":7747,"slug":9138,"authors":9139,"badge":9142},"what-is-new-3-7-devtools",[9140],{"name":9048,"description":9092,"avatar":9141,"to":9052,"target":62},{"src":9041,"loading":9094},{"label":7739,"color":638,"variant":639},{"id":7749,"title":7750,"author":8,"body":7751,"category":398,"date":9030,"description":9031,"draft":401,"extension":402,"meta":9032,"navigation":196,"path":9033,"seo":9034,"stem":9035,"thumbnail":9036,"url":407,"__hash__":9037,"slug":9144,"authors":9145,"badge":9148},"tresjs-1-year-anniversary",[9146],{"name":9048,"description":9092,"avatar":9147,"to":9052,"target":62},{"src":9041,"loading":9094},{"label":9099,"color":638,"variant":639},1759336368680]