Material Types

Three spheres showing BasicMaterial, LambertMaterial, and ToonMaterial side by side.

Controls
import * as EASEL from "easel";

const scene = new EASEL.Scene();
// OrthographicCamera - no perspective distortion for a fair comparison
const camera = new EASEL.OrthographicCamera({
  left: -size * aspect, right: size * aspect,
  top: size, bottom: -size,
  near: 0.1, far: 100,
});

scene.add(new EASEL.AmbientLight(0xffffff, 0.3));
const dirLight = new EASEL.DirectionalLight(0xffffff, 0.9);
dirLight.position.set(3, 5, 4);
scene.add(dirLight);

const geo = new EASEL.SphereGeometry(1.2, 24, 16);

// BasicMaterial: flat color, ignores lights
const basic = new EASEL.Mesh(geo, new EASEL.BasicMaterial({ color: 0x4488ff }));
basic.position.x = -3.5;

// LambertMaterial: Gouraud diffuse shading
const lambert = new EASEL.Mesh(geo, new EASEL.LambertMaterial({ color: 0x4488ff }));

// ToonMaterial: stepped/cel shading
const toon = new EASEL.Mesh(geo, new EASEL.ToonMaterial({ color: 0x4488ff }));
toon.position.x = 3.5;