Issue with Applying Decals to Multiple Children Meshes in three.js

Questions
, , ,
1

Hello everyone,

I’m encountering a problem with 3D models provided by our suppliers when using three.js. The models consist of multiple “children” meshes, and three.js seems to struggle with this structure, as the main model doesn’t contain the necessary geometrical data to work with decals. An error is thrown saying “geometry is undefined” when I attempt to apply decals to the main model.

I’ve tried using BufferGeometryUtils.mergeGeometries() but it fails when the geometries have different .morphTargetsRelative values. The specific error message is: THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index 1. .morphTargetsRelative must be consistent throughout all geometries.

Is there a way to work around this to ensure that decals can be applied consistently across all child meshes of the group?

Best Regards
QamiKazu

2

You might have to build the decal on every mesh in your hierarchy.

You could do something like:


let meshes=[]
yourModel.traverse( e=>e.isMesh&&meshes.push(e));
meshes.forEach(m=>createYourDecalOnThisMesh(m) )
3

I have tried it now, atleast i dont get any errors when clicking on the model.
But the decals wont show up on the model, when I try to click on it.
To apply a decal on the model i used this approach here three.js examples.

4

Is there a better solution to this, so when i click on the model only the child gets the decal and not all of them ?