Toon Shading

import * as EASEL from "easel";

const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
  fov: 45,
  aspect: width / height,
  near: 0.1,
  far: 100,
});

scene.add(new EASEL.AmbientLight(0xffffff, 0.2));
const dirLight = new EASEL.DirectionalLight(0xffffff, 1);
dirLight.position.set(4, 6, 5);
scene.add(dirLight);

const colors = [0xe05050, 0x50b050, 0x5080e0, 0xe0b040];
for (let i = 0; i < colors.length; i++) {
  const color = colors[i];
  const mesh = new EASEL.Mesh(
    new EASEL.SphereGeometry(0.9, 24, 16),
    new EASEL.ToonMaterial({ color }),
  );
  mesh.position.x = (i - 1.5) * 2.2;
  scene.add(mesh);
}

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);

scene.add(new THREE.AmbientLight(0xffffff, 0.2));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(4, 6, 5);
scene.add(dirLight);

const colors = [0xe05050, 0x50b050, 0x5080e0, 0xe0b040];
for (let i = 0; i < colors.length; i++) {
  const color = colors[i];
  const mesh = new THREE.Mesh(
    new THREE.SphereGeometry(0.9, 24, 16),
    new THREE.MeshToonMaterial({ color }),
  );
  mesh.position.x = (i - 1.5) * 2.2;
  scene.add(mesh);
}