--- title: Blender to Three.js and Back: 10 Tips for a Better Workflow description: A collection of practical tips for combining AI, Blender, and Blender MCP to improve a Blender-to-Three.js workflow. Covers syncing transforms between Blender... canonical: https://daily.dev/posts/blender-to-three-js-and-back-10-tips-for-a-better-workflow-ojkonwfdo twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Blender to Three.js and Back: 10 Tips for a Better Workflow | daily.dev og:description: A collection of practical tips for combining AI, Blender, and Blender MCP to improve a Blender-to-Three.js workflow. Covers syncing transforms between Blender... og:url: https://daily.dev/posts/blender-to-three-js-and-back-10-tips-for-a-better-workflow-ojkonwfdo og:image: https://api.daily.dev/og/posts/OJKONWfDo.png og:image:alt: Blender to Three.js and Back: 10 Tips for a Better Workflow og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Blender to Three.js and Back: 10 Tips for a Better Workflow **[Codrops](https://daily.dev/sources/codrops)** · 5 min read · 3 upvotes · 0 comments ## Summary A collection of practical tips for combining AI, Blender, and Blender MCP to improve a Blender-to-Three.js workflow. Covers syncing transforms between Blender and Three.js, using Blender empties for spawn/pivot points, converting Geometry Nodes setups into Three.js code via LLMs, building custom Blender addons (including vibe-coded ones) that chain other addons and command-line tools like GLTFJSX and gltf-transform, upgrading to Blender 5.2+ LTS for Meshopt compression, and adopting Three.js Shading Language (TSL) as an easier path to writing shaders that compile to GLSL and WGSL. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What does upgrading to Blender 5.2+ LTS give you for a Three.js export workflow? Blender 5.2+ LTS adds a Meshopt compression option, which helps reduce the size of exported geometry for use in web-based Three.js scenes. This is presented as a reason to move to that LTS version if you are optimizing assets for a 3D web pipeline. _Anyone tuning a Blender-to-web asset pipeline can track tooling updates like this through daily.dev._ ### What is Three.js Shading Language (TSL) and why would I use it instead of raw GLSL? TSL is a newer way of writing custom shaders for Three.js, created by the core maintainers to make shader authoring easier than raw GLSL or WGSL. It compiles down to both GLSL, the older web graphics standard, and WGSL, the newer one, and has node-based logic similar to Blender's shader nodes, though not a one-to-one match. _Developers weighing TSL against raw GLSL for their Three.js shaders can follow ecosystem shifts like this on daily.dev._ ### Can Geometry Nodes setups in Blender be converted into Three.js code using AI? Yes, having an LLM with Blender MCP analyze a Geometry Nodes setup and convert it into Three.js code works decently well for many common setups. More complex Geometry Nodes graphs still require a developer who understands the underlying logic to finish the conversion correctly. _Teams automating Blender-to-Three.js conversions can compare AI-assisted workflow tips like this on daily.dev._ ## Similar posts on daily.dev - [Creative Web Development with Three.js and Blender](https://daily.dev/posts/creative-web-development-with-three-js-and-blender-i0kymwczo) · freeCodeCamp · 35 upvotes · 4 comments - [Creating an Interactive 3D Cluster with Three.js, TSL and Three Start](https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai) · Codrops · 2 upvotes · 0 comments - [3D Web Development with Blender and Three.js](https://daily.dev/posts/3d-web-development-with-blender-and-three-js-i4xuekmxb) · freeCodeCamp · 3 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#3d](https://daily.dev/tags/3d), [#blender](https://daily.dev/tags/blender), [#threejs](https://daily.dev/tags/threejs) [View this post on daily.dev](https://daily.dev/posts/blender-to-three-js-and-back-10-tips-for-a-better-workflow-ojkonwfdo) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Blender to Three.js and Back: 10 Tips for a Better Workflow","url":"https://daily.dev/posts/blender-to-three-js-and-back-10-tips-for-a-better-workflow-ojkonwfdo","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/blender-to-three-js-and-back-10-tips-for-a-better-workflow-ojkonwfdo"},"datePublished":"2026-08-24T13:57:48.898Z","dateModified":"2026-09-14T06:56:25.273Z","description":"A collection of practical tips for combining AI, Blender, and Blender MCP to improve a Blender-to-Three.js workflow. Covers syncing transforms between Blender...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4eb7e6a194f7b630d097877dae9eb6d8?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4eb7e6a194f7b630d097877dae9eb6d8?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/blender-to-three-js-and-back-10-tips-for-a-better-workflow-ojkonwfdo","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,3d,blender,threejs","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Blender to Three.js and Back: 10 Tips for a Better Workflow"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/blender-to-three-js-and-back-10-tips-for-a-better-workflow-ojkonwfdo#faq","mainEntity":[{"@type":"Question","name":"What does upgrading to Blender 5.2+ LTS give you for a Three.js export workflow?","acceptedAnswer":{"@type":"Answer","text":"Blender 5.2+ LTS adds a Meshopt compression option, which helps reduce the size of exported geometry for use in web-based Three.js scenes. This is presented as a reason to move to that LTS version if you are optimizing assets for a 3D web pipeline. Anyone tuning a Blender-to-web asset pipeline can track tooling updates like this through daily.dev."}},{"@type":"Question","name":"What is Three.js Shading Language (TSL) and why would I use it instead of raw GLSL?","acceptedAnswer":{"@type":"Answer","text":"TSL is a newer way of writing custom shaders for Three.js, created by the core maintainers to make shader authoring easier than raw GLSL or WGSL. It compiles down to both GLSL, the older web graphics standard, and WGSL, the newer one, and has node-based logic similar to Blender's shader nodes, though not a one-to-one match. Developers weighing TSL against raw GLSL for their Three.js shaders can follow ecosystem shifts like this on daily.dev."}},{"@type":"Question","name":"Can Geometry Nodes setups in Blender be converted into Three.js code using AI?","acceptedAnswer":{"@type":"Answer","text":"Yes, having an LLM with Blender MCP analyze a Geometry Nodes setup and convert it into Three.js code works decently well for many common setups. More complex Geometry Nodes graphs still require a developer who understands the underlying logic to finish the conversion correctly. Teams automating Blender-to-Three.js conversions can compare AI-assisted workflow tips like this on daily.dev."}}]} ```