I’m Trying to build a feature on top of https://github.com/OpenDroneMap/WebODM, which is drone mapping software that lets you convert drone images into a 3d model. Right now webodm uses three.js under the hood to display the 3d model.
I want something like below, where I can draw over a 3d model to mark a few areas on the model.
here’s my question.
- Is three.js a good option for this, or is this something that requires deep knowledge of webgl.
- I’m new to three.js, I kind of understood the basics from the docs, Is this something that I can figure out fast or will this require me to through three.js really well to implement.
For your case if this is just for informal annotation of models, you might get away with just generating THREE.Line primitives as separate objects, but that may not work with exporting the same model… in which case you may need to generate your own line like primitives using real geometry, so that the GLTF exporter can export it.
This is the easy solution…
If you want to modify the actual model textures, you can also do this in threejs but it Does require some deep knowledge of shaders, and multipass rendering.
I’ve implemented something like this before in my “monkeypaint”
library: GitHub - manthrax/monkeypaint: An app for painting on meshes in THREEJS, with glb export.
It was somewhat wickedly complex to implement. I render the model to a rendertarget but using UV space… to determine where the world space brush cursor interesects with the world geometry… and render that to the corresponding UVs on the texture map. Then there are some additional render passes to repair seams on the UV map, by dilating the texture, with something like a multipass blur. This only works if the model has a well defined UV mapping and textures. This is all pretty hard to pull off and has quite a few finicky details.
Thanks for answering @manthrax.
I look into the first solution and see. if not I’ll try going through you repo.