ThreeJsマテリアル練習3(トゥーンマテリアル)

トゥーンマテリアルはトゥーンシェーダーともいい、アニメの用な感じが出るマテリアルです。
トゥーンマテリアルはフォンマテリアルの拡張なのでフォンマテリアル同様光源が必要になります。

new THREE.MeshToonMaterial({ color: 0x444488});

1. 点光源を周回させる。

このときの条件は以下です。
1. 平行光源と点光源を設置する。
2. 点光源は周回させる。
3. 背景色は0xffaa00に設定。
4. マテリアルカラーは0x444488に設定。

点光源を周回させるには以下のようにすれば周期彗星のようにくるくる回せます。(必ずrequestAnimationFrame(draw)を呼び出す関数の中に書いてください。)

POINT_LIGHT.position.set(
     200 * Math.sin(Date.now() / 500),
     200 * Math.sin(Date.now() / 1000),
     200 * Math.cos(Date.now() / 500)
   );

2. 複数のジオメトリを配置しつつ点光源を周回させる。

このときの条件は以下です
1. 点光源は1つまで配置。
2. 点光源は別々の方向に周回させる。
3. 平行光源の設置。
4. 複数の色を使う。

3. モニョモニョと動かす

このときの条件は以下です
1. 点光源は1つまで配置。
2. 点光源は別々の方向に周回させる。
3. 平行光源の設置。
4. 複数の色を使う。
5. sinとcosを使う。
6. 画面からはみ出さない（周期彗星のような動きをする光源以外）

ソースコードは以下です。

HosodaMath/WebGLStudyNote