three.jsはwebGLを簡単に扱えるライブラリー。
ウェブ上で3Dっぽいエフェクトとか色々できる。
ググっても情報があんまりなかった&サンプルのパラメーターのキーが間違ってて動いてなかったので書いときます。

ThickNessはThickness or thickness !

準備

three.js本体 (https://threejs.org/)
サーバーとかウェブサイトが作れるスペース or 仮想サーバー

#　使うライブラリと記述

今回は適当なオブジェクトをトゥーンレンダリングしたい。
使うjsは以下、使うやつだけ抜き出してjsディレクトリに格納。

three.min.js
TrackballControls.js - マウスでぐりぐり動かすやつ　three.jsのexampleとかに入ってる
OrbitControls.js - 極座標を中心にカメラを動かす　これもexampleとかに入ってる
OutlineEffect.js - オブジェクトの周りに輪郭線をつけてくれる

これ以外に、hogehoge.jsを作って記述。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <title></title>
  </head>
  <body>

  <script src="js/three.min.js"></script>
  <script src="js/TrackballControls.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script src="js/OutlineEffect.js"></script>

  <script src="js/hogehoge.js"></script>

  </body>
</html>

hogehoge.js

window.addEventListener('load', init);

var scene;
var camera;
var renderer;
var controller;
var point;
var effect;

function init() {

  scene = new THREE.Scene();
  scene.updateMatrixWorld(true);

  // カメラ

  camera = new THREE.PerspectiveCamera(45, 1, 1, 2000);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  // レンダラー
  renderer = new THREE.WebGLRenderer({antialias: true, alpha: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x000000, 1);
  document.body.appendChild(renderer.domElement);

  // カメラコントローラー
  controller = new THREE.OrbitControls(camera);

  // オブジェクト
  const geometry = new THREE.SphereGeometry(100, 40, 40);
  const ball = new THREE.MeshToonMaterial({　//toon materialを使うと簡単にトゥーンレンダリングっぽくなる。オプションは適当に。
    transparent:true,
    opacity:1,
    color: 0xffffff,
    shininess: 1
  });

  //ボールにだけ別の色のアウトラインをつけたいので、mesh materialにoutlineParametersを設定する
  // OutlineEffect.js の上の方にサンプルが書いてあるけど、パラメーターのキーが間違ってるので

  ball.outlineParameters = {
    thickness: 0.007,
    color: new THREE.Color( 0xffffff ),
    alpha: 10,
    visible: true,
    keepAlive: true
  }

  scene.add(ball);

　　　　// ライティング
  var directionalLight = new THREE.DirectionalLight( 0xffffff, 1);
  directionalLight.position.set( 100, 100, 100);
  scene.add( directionalLight );

  // エフェクト
  // デフォルトの色や太さを設定できる。outlineParametersが設定されていないものはこちらが適用される
  effect = THREE.OutlineEffect( renderer, {
    defaultThickness: 0.01,
    defaultColor: new THREE.Color( 0x888888 ),
    defaultAlpha: 0.8,
    defaultKeepAlive: true
  } );

  // レンダリング
  effect.render( scene, camera )
}