Placing Decals on GLTF model

Questions
, ,
1

Hello guy, can someone please help me with using a decal on a model getting an blank page on load,

Here is the snippet of code:

const decalMaterial = new THREE.MeshBasicMaterial({
    map: textureLoader.load(backgroundScreen),
    transparent: true,
    depthTest: true,
    depthWrite: false,
    polygonOffset: true,
    polygonOffsetFactor: -4 
});
const euler = new THREE.Euler();
const targetMesh = scene.getObjectByName("Object_8");
const decalSize = new THREE.Vector3(1, 1, 1);
const decalPos = new THREE.Vector3(0.01, 0.01, 0.01);
const decalGeometrys = new DecalGeometry(targetMesh, decalPos, euler, decalSize);
const decalMesh = new THREE.Mesh(decalGeometrys, decalMaterial);

scene.add(decalMesh);

Thanks :grin:

2

What do them errors in the devtools console say?

3

inside of the console is displays this error message:

TypeError: mesh is undefined
generate DecalGeometry.js:67
DecalGeometry DecalGeometry.js:50

4

See this line.

If you put console.info(targetMesh) above the following line:

console.info({ targetMesh });
const decalGeometrys = new DecalGeometry(targetMesh, decalPos, euler, decalSize);

What appears in the console?

5

ahh apologies very new to this :sweat_smile:

this is what its come up with :slight_smile:

can’t access lexical declaration ‘targetMesh’ before initialization

6

Either the code you’ve shared above is no longer up to date, or you put the console log before the variable declaration. It should look, for example, like this:

const targetMesh = scene.getObjectByName("Object_8");
const decalSize = new THREE.Vector3(1, 1, 1);
const decalPos = new THREE.Vector3(0.01, 0.01, 0.01);
console.info({ targetMesh });
const decalGeometrys = new DecalGeometry(targetMesh, decalPos, euler, decalSize);
7

sorry put it in the wrong position:

This is what its come up with:

Screenshot 2023-11-11 181024

8

Then:

const targetMesh = scene.getObjectByName("Object_8");

Returns undefined. There’s no object Object_8 in the scene at the moment when you’re calling this getObjectByName.

9

oh really that’s weird because I’m using this line code:

model.getObjectByName('Object_8').material.roughness = e;

and that’s working correctly, maybe because I got model. instead of scene. ?

but I tried replacing the scene. for model. and didn’t work either

10

ahh okay I changed it to model. and I’m now getting this in consel

Screenshot 2023-11-11 181024

11

sorry wrong image this one:

Screenshot 2023-11-11 183524
Screenshot 2023-11-11 1835241267×546 33.8 KB

12

It’s hard to help without seeing a bit broader part of the code - which variables you use where depends on what you do in which order (especially considering that model loading is asynchronous, it doesn’t yield results immediately.) For example:

new GLTFLoader().load('mode.gltf', (model) => {
  // `model` will be defined here
  // `model.getObjectByName("Object_8")` will be defined here, if model contains a child of that name

  // `scene.getObjectByName("Object_8")` will return `undefined` here
  // `model.getObjectByName("Object_8")` will a proper child mesh
  scene.add(model.scene);

  // `scene.getObjectByName("Object_8")` will return a proper child mesh here, since you've added the model to the scene now
  // `model.getObjectByName("Object_8")` will a proper child mesh again, since it's still defined
});

// Both `model` and `model.getObjectByName("Object_8")` will not be defined here (they may, if the loading is fast enough, but do not have to.)
1 Like