Setting new THREE.Color().setHSL(Math.random(), 0.75, 0.75)
to the color causes the texture’s tint to change with it. Is it possible to keep the texture color/tint untouched, preserving it’s alpha, while changing only the object’s color?
material = new THREE.MeshToonMaterial( {
color: new THREE.Color().setHSL(Math.random(), 0.75, 0.75),
map: assets.textures['atlas'],
gradientMap: assets.textures['tone-3'],
onBeforeCompile: ( shader ) => {
shader.uniforms.atlasSize = { value: atlasSize };
shader.uniforms.tile = { value: new THREE.Vector2( 1, 0 ) };
shader.vertexShader = `
attribute vec2 tile;
varying vec2 vTile;
${shader.vertexShader}
`.replace(
`#include <uv_vertex>`,
`
vTile = tile;
#include <uv_vertex>`
);
shader.fragmentShader = `
uniform vec2 atlasSize;
varying vec2 vTile;
${shader.fragmentShader}
`.replace(
`#include <map_fragment>`,
`
vec2 tile = vTile;
vec2 mUV = vMapUv;
vec2 centerUV = ((mUV - 0.5) * vec2(2., 1.) + vec2(0.5, 0.)) * PI/2.;
mUV = centerUV + 0.5;
vec2 atlasTile = 1. / atlasSize;
mUV = clamp((mUV + tile) * atlasTile, vec2(0.), vec2(1.));
vec4 sampledDiffuseColor = texture( map, mUV );
vec2 absUV = abs(centerUV);
float cutoff = 1. - step(0.5, max(absUV.x, absUV.y));
diffuseColor = vec4( mix( diffuse, sampledDiffuseColor.rgb, sampledDiffuseColor.a * cutoff), opacity );
`
);
}
} );
From prisoner849
’s codepen: https://codepen.io/prisoner849/full/abrdgVW