How do I use OutlineEffect with MMDLoader?

I’m trying to change the parameters of the OutlineEffect applied to MMD models (I want the outline thinner and with some alpha). If I initialize the OutlineEffect like this, I get a nice red outline in webgl_materials_variations_toon but nothing happens in webgl_loader_mmd.

effect = new OutlineEffect( renderer, { defaultColor: [1, 0, 0] });

How can I change the standard three.js MMD example to use custom outline parameters?

This issue is actually explained in the comment section of THREE.OutlineEffect:

The value of defaultColor is applied if no other outline color configuration is used. However, it’s possible to set for each material of a 3D object different outline parameter. This can be done via material.userData.outlineParameters. So to change the outline color of Miku in the example, you have to iterate through all materials of the respective skinned mesh and change the material configuration. This configuration is originally created by THREE.MMDLoader (with black as default outline color).

Use this code in the onLoad() callback of MMDLoader.loadWithAnimation().

for ( let material of mesh.material ) {

    material.userData.outlineParameters.color = [ 1, 0, 0 ];

}

and then you should see this:

1 Like

Thank you very much, it works now. I did notice that comment and tried setting mesh.material.userData.outlineParameters = {...}, but that obviously didn’t work. I didn’t understand that I had to loop over mesh.material. Sorry for the noob question and thanks again for helping!

1 Like