Editor’s observe: As a part of our little Three.js convention celebration, we’re completely happy to have Andrew Woan sharing some nice suggestions and insights with us right now. On this article, Andrew takes a take a look at how AI, Blender, and Blender MCP can be utilized collectively to hurry up and enhance totally different elements of a Blender-to-Three.js workflow, with sensible concepts you possibly can adapt to your personal initiatives. Andrew has additionally created a incredible demo as his contribution to the celebration, providing you with one other alternative to discover his work. You’ll be able to take a look at the demo right here and discover the supply code right here.
🇫🇷 Prepared for some Plinko & Pinball in Paris? Codrops readers can use the code CODROPS to get 15% off on tickets. Get a ticket →
Earlier than we get began
In a couple of prompts with AI + Blender MCP, it’s best to be capable to recreate the next suggestions fairly rapidly and match them to your personal mission/construction quite a bit higher than utilizing a template on-line! A number of of the following tips have been round for ages, however they’re value repeating as a result of they’re now so quick to create. For individuals who are utterly new to a Blender-to-Three.js workflow/pipeline, I’d take into account prompting an AI for an inventory of suggestions and methods first.
1. You’ll be able to create a Blender Addon + coding system that immediately updates each time you export
You’ll be able to see a case research by Merci-Michel during which they use a particular export tab in Blender that auto-refreshes in Three.js.
2. You’ll be able to sync fundamental rotation/scale/transfer operations between three.js and Blender
Be happy to make your changes in Blender or Three.js! They are often synced between the 2.
3. Geoscatter situations work with Blender MCP
The Geoscatter addon for Blender can “work” with three.js by the Blender MCP. Should you ask your AI agent to create situations based mostly on the Geoscatter addon, it’ll work! It additionally works with common scatter strategies, just like the Scatter on Floor Geometry Nodes modifier in Blender 5.0+.
4. Use Blender empties and dummy objects for lots of stuff
Blender empties and dummy objects are actually useful and can be utilized in a whole lot of conditions:
- Spawn factors for lights, characters, and so on.
- Goal factors for lights/objects to lookAt
- Simplified colliders
- Pivot factors
Utilizing an empty permits the LLM to repeat key place/rotation/location info if you want to recreate or use it in your coding mission.
5. You’ll be able to create a Blender Addon that calls different addons
You’ll be able to create your personal customized Blender Addon that calls different Blender addons you’ve created or paid for. This lets you mix workflows between paid Blender Addons.
6. Mix a number of steps with vibe-coded Addons
I just lately created an addon (nonetheless in improvement) known as “One Shot Baking” that can do all the following in a single click on (after setting a couple of parameters):
- Add a second UV map for baking on all objects
- Unwrap all objects per chosen assortment on to a single picture texture
- Pack it, both with Blender’s packing system or calls my UVpackmaster3 Addon
- Bake it
- Denoise the baked picture with Blender compositor
- Optimize the Picture texture
- Duplicate the unique mesh and hook it as much as the brand new baked texture
- Cover the unique mesh
You’ll be able to see a demo of this addon right here.
Python scripting with Blender is so OP!!! If what you’re doing works within the scripting tab, then it’ll work as an addon too!
7. Changing Geometry Node setups into Three.js code works decently nicely
Having the LLM with Blender MCP analyze your Geometry Nodes setup and convert it into a 3.js expertise is fairly widespread! It really works decently nicely with a whole lot of Geometry Nodes setups, surprisingly. For extra sophisticated setups, although, you continue to want an individual who is aware of what they’re doing.
8. Run widespread dev instruments and command line instruments straight from Blender
GLTFJSX/KTX2/ImageMagick/gltf-transform, and so on. are all widespread command line instruments, and so they’re typically recreated for comfort within the browser. Nevertheless, you possibly can really simply create an addon in Blender that runs this stuff for you behind the scenes. That means you get the facility of your pc and the easiness of getting a one-stop store for every part, quite than importing to a browser and redownloading. You additionally don’t should immediate the AI each time to compress/optimize/convert/and so on. for you. Save these tokens and water utilization!
9. Improve to Blender 5.2+ LTS for the Meshopt compression choice
10. Now with Three.js Shading Language (TSL), changing Blender shader nodes is quite a bit simpler
Should you haven’t heard but, TSL is changing into the brand new commonplace means of writing customized shaders with three.js. The core maintainers particularly created it to make writing shaders simpler and to have a approach to compile right down to each GLSL (the older internet commonplace for internet graphics) and WGSL, the newer upcoming commonplace.
In fact, for these extra superior, they at all times have the choice to jot down their very own low-level code, however for many who don’t, undoubtedly take a look at TSL. It has a whole lot of similarities to Blender nodes! Not one of the nodes are one-to-one, but it surely’s shut and simpler to grasp than uncooked GLSL or WGSL code for 3D artists, in my view. And yea, it’s not simply Blender! Should you’re acquainted with shader/materials nodes from issues like cables.gl or Unity/Unreal, that information undoubtedly will be transferred over too!
