How to change gltf material to cartoon material?

Question

I'm not familiar with three.js and shader. I export a gltf dragon model with texture from C4d and load it into meshstandard material in three.js. I want to change them into cartoon material. With the model stroke, I can traverse the gltf material like this

mesh.traverse((node: any) => {
    let newMat = new THREE.ShaderMaterial({
        uniforms: {
        },
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
    });

    node.material = newMat
});

I found a cartoon rendering tutorial https://blog.csdn.net/weixin_37683659/article/details/79953500

But I still don't know how to combine this

Answer 1

I'm not sure why you're using ShaderMaterial when the library already provides MeshToonMaterial for you. ShaderMaterial is very advanced, and requires you to write your own custom shaders. You probably want something simple like this:

mesh.traverse((node: any) => {
    let newMat = new THREE.MeshToonMaterial(parameters);
    node.material = newMat
});

To see which parameters you can use, visit the docs for ToonMaterial.