How to display DecalGeometry from ThreeJs on Specific Mesh

Questions
,
6

Decals work with your GLB file:

image
image803×446 18.9 KB

I had to to ensure several things:

  1. the model is a pure THREE.Mesh (see code comment 1)
  2. the scale of the mesh is 1, but the geometry itself is scaled (see code comments 2 and 3)
  3. the decal is created after the model is completely loaded (see code comment 4)

As you did not share your code of how the object is loaded, I guess you may have items 1 and 3 done, but not item 2. It appears decal considers the geometry of a mesh and ignores the scale of the mesh. So, in item 2 I rescale the geometry and set the mesh scale back to 1. Thus the object looks as big as before, but now the decal is happy.

var model;

new GLTFLoader().load( './Mesh.glb', gltf => {
	model = gltf.scene.children[0]; /* 1 */
	model.geometry.scale( model.scale.x, model.scale.y, model.scale.z ); /* 2 */
	model.scale.set( 1, 1, 1 ); /* 3 */

	scene.add( model );

	var material = new THREE.MeshLambertMaterial( {
		color: 'yellow',
		depthTest: true,
		depthWrite: false,
		polygonOffset: true,
		polygonOffsetFactor: - 4,
	} );

	var decal = new THREE.Mesh( new DecalGeometry(
		model,
		new THREE.Vector3( 5, 0, 0 ),
		new THREE.Euler( 0, 0, 0 ),
		new THREE.Vector3( 10, 12, 8) ),
		material
	);

	scene.add( decal ); /* 4 */
} );
2 Likes