2021-11-13.md

publish_date
2021-11-13

• Back on Three.js journey and learning about about scroll based animations.
  • Working with THREE.MeshToonMaterial is quite fun. It creates a cel-shaded cartoon effect. Its important thats it's used along with a texture file.
    • A texture file is simply an image file with some pixels that define the colour ramp
  • the texture also needs to have it's magFilter set to THREE.NearestFilter which can be used for the gradientMap for MeshToonMaterial.

// Texture
const textureLoader = new THREE.TextureLoader();
const gradientTexture = textureLoader.load("textures/gradients/5.jpg");
gradientTexture.magFilter = THREE.NearestFilter;

// Material
const material = new THREE.MeshToonMaterial({
  color: parameters.materialColor,
  gradientMap: gradientTexture,
});