Miniature editing

Hi everyone. I was wondering, maybe you can help me, how to develop using three.js a miniature editor as HeroForge or DesktopHero3D. What would be the theory behind it? Should I use mesh merging with meshes? Should I build the geometry with the pieces data or should I load the glb or stl directly? How would you do it?
Thanks a lot!

You can study the code here as a starting point, looks like it implements most of what you need:

I would say that it’s a bit outdated since the repo hasn’t been updated for a few years, so you will need to do some work to get the code working with the latest three.js release. In particular, imports use require, while it’s now recommended to use ES6 imports.

Instead of importing like this:

const THREE = require('three')

Use this:

import * as THREE from 'three';

Beyond that, I haven’t examined the code so I can’t comment on how usable it is.

You will also need to create/acquire the models and all extras (clothes/weapons) etc. You can do that in Blender or another modelling software. It’s best to export them in glTF format.

You might also find this tutorial useful. It shows how to add a character model to a scene and then have it look in the direction of the mouse.

Thanks a lot! The code you shared is a great way to understand the concept, I’m already looking it!
Regarding the tutorial, yes! I actually have a base project that I created using that tutorial. Again, thanks a lot, you give me a great starting point!

1 Like