Hello, I want to add a model similar to a decal on a surface such as a cylinder. After adding, it can be moved and scaled. What’s a good way?
the easiest would certainly be dreis decal component
here’s a small demo:
it worries about everything, re-doing the decal on changes, disposing of the old geometry etc. if that’s not an option just re-do the decal. there a few odd bits, for instance the parents matrix has to be reset to identity temporarily before running the decal because otherwise it can conclude wrong bounds, you can inspect the source, maybe it helps.
There is an official example that demonstrates the usage of THREE.DecalGeometry.
https://threejs.org/examples/webgl_decals
When checking out the demo, you will see that it is static. So when you want to move it over the surface, you have to reproject it by applying a new decal and dispose the old one.
Can this solution be used in the Threejs project?
The code example also used Threejs, but the code structure was a little weird.
This is how I add decals:
const decalMesh = new THREE.Mesh(newDecal, decalMaterial);
decalMesh.name = id;
this.scene.current.add(decalMesh);
And this is how I replace decals:
decalMesh.geometry.dispose();
var decalGeometry = new DecalGeometry( mesh, decalPos, decalRot, decalScale );
decalMesh.geometry = decalGeometry;
Can I use dreis decal component like this?