So, I am successfully attaching clothing to my model in three.js. When I export it as a gltf and place it in our environment… animating the model results in some of the underlaying body parts to “poke” through the clothing. I’ve played with layers hoping this might resolve the issue. Can somebody explain how masking in layers works or is this the wrong approach?
Are you referring to Object3D.layers? If so, they are not intended to mitigate these kinds of glitches.
But just to be sure, do you mind sharing a screenshot of the problem? Or maybe a live example?
Thank you for responding. I cannot do a live example because this occurs when my avatar is imported into Vircadia. Here is a screen shot. You can see the knee has part of the body poking through as well as parts in the shirt. I believe this is because the clothing has less vertices than the body and it cannot deform to the same shape as the knee. I am building a system for putting clothes on the avatars and have little control over them… the only thing I can think at the moment is to create an alpha channel for the skin of the body where it is covered. That is unless there is some other way to mask parts that are covered.
This avatar is built using imported gltf models in the browser using three.js. The final avatar.glb is exported and imported into Vircadia.
I eventually fixed this using the alpha masks… not well documented… basically, the parts that need to be masked you will make RGB 255 for all values. (Black)… then you have to set the material properly… here’s the proper material settings for anyone struggling with this.
var mtl = new THREE.MeshStandardMaterial({ type: "MeshStandardMaterial", morphTargets: true, morphNormals: true, skinning: true, alphaTest: 0.5, transparent: false, map: tex });
