Issue with DecalGeometry timing


I’m trying to add a decal to a mesh directly and fighting two issues. Starting with examples/webgl_decals.html, I added a log to the shoot function to capture the position and orientation, then made an addDefault function to add a decal automatically and called it at the end of the the callback in loadLeePerrySmith. The decal does not display unless I do a timeout of ~50ms (5 is not enough).

function addDefault() {
   position.set(-20.066299533262622, -27.93543660513031, 6.250807559583222);
   orientation.set(-0.5235731422801159, -0.3233231312432197, 1.3944280215680236);

   const material = decalMaterial.clone();
   material.color.setHex(Math.random() * 0xffffff);

   const m = new THREE.Mesh(new DecalGeometry(mesh, position, orientation, size), material);
   m.renderOrder = decals.length; // give decals a fixed render order


So, it works with the timeout, but wasn’t working my application. I realized that was because my objects are translated and rotated. I’ve tried not positioning or scaling my meshes before applying the decal, but that isn’t working. So, I was trying to adjust the default position/orientation to go with the position of the mesh, but I can’t quite figure it out.

I added this to the model load callback

   mesh.position.set(10, 10, 10);
   mesh.rotation.set(Math.PI / 4, 0, 0);

and tried this in addDefault

   const offset = new THREE.Vector3(-20.066299533262622, -27.93543660513031, 6.250807559583222);
   const rot = [-0.5235731422801159, -0.3233231312432197, 1.3944280215680236];
   const translated = mesh.localToWorld(offset);
   position.set(translated.x, translated.y, translated.z);
   orientation.set(rot[0] + mesh.rotation.x, rot[1] + mesh.rotation.y, rot[2] + mesh.rotation.z);

but that’s not it.

Also, in my application, the mesh is in a Group, if that matters. I made a version of the decals example with my object and it didn’t need special behavior for the basic case.

Well, I removed the need for a timeout by not creating the decalMaterial until the textures were loaded, and calling renderer.render(scene, camera) before using it to create the DecalGeometry.

And I worked around the issues with translation/rotation by waiting to move it until I had applied the decal. Not ideal, but I’ve spent much too much time on this.