Adding image to toon material

Questions
1

Screenshot 2024-01-13 162513

I am trying to give a cell-shade look and have gotten this far. Sadly this is a textured model, and it really needs the texture for its details. I had attempted to include the texture:

      let texture = textureloader.load(texturepath);
      ...
      material = new THREE.MeshToonMaterial({
        color: 0xFFFFFF,
        gradientMap: gradientMap,
        map: texture
      });
      ...
      model.material = material;

but it didnt work. How am I supposed to include the model’s texture for toon material?

2

If your model already has a texture map, then you can copy it to the new MeshToonMaterial when you create it.

gltf.scene.traverse(function (c) {
    if (c.isMesh) {
        c.material = new THREE.MeshToonMaterial({ map: c.material.map, gradientMap: threeTone })
    }
})

Example,

2 Likes
3

Thanks, led my down the right path to find out what was going wrong.

As it turns out, my image loaded as texture was not rotated and/or scaled properly, and it was rotated and/or scaled in a way which just so happens to look completely white/gray. It is being applied to the model, just incorrectly.

Loading in the texture from the model itself has the model and texture showing up as intended. Good thing I am working with the GLTF format I suppose, and it is proof the model can show up correctly with it’s texture. I will still need to learn how to get an image file loaded as a texture to show up properly though.

4

maybe you are assigning the material before your model has finished loading.
So your change is overridden.
Maybe you have typo, or 404
It is hard to know from the code you provided.

Here is the same example but using a loaded PNG as texture map

5

The image is being loaded in correctly. I just learned about some properties in Texture, namely

      texture.premultiplyAlpha = false;
      texture.magFilter = THREE.NearestFilter;
      texture.minFilter = THREE.NearestFilter;
      texture.flipY = false;

because I am working with pretty low resolution images.

Now the image loaded in as a texture is being applied correctly to my model . Thanks for the help.

2 Likes