見出し画像

ThreeJsマテリアル練習2(フォンシェーディング)

フォンシェーディングはランバートシェーディングとは違い反射を考慮されているマテリアルになるため光沢感のある質感になります。

ランバートシェーディングと同じく光源が必要になります。

new THREE.MeshPhongMaterial({ color: 0x00ff00 })

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

このときの条件は以下です。
1. 平行光源と点光源を設置する。
2. 点光源は周回させる。

画像1

ジオメトリが反射しているのがわかるかと思います。
ただこれだけだでは正直わかりにくいと思います。

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

このときの条件は以下です。
1. このとき平行光源の設置は行わない。
2. 点光源は3つまで配置。
3. 点光源は別々の方向に周回させる。

画像2

はっきりと反射しているのが左下の方にあると思います。

3. ランダムマテリアル

複数のマテリアルをかけたジオメトリをランダムに配置する。
このときの条件は以下です。
基本的な条件は2の複数のジオメトリを配置しつつ複数の点光源を周回させると同じです。
それとは別に以下の条件をつけました。
使うマテリアルの種類
1. Basic Material
2. Normal Material
3. Lambert Material
4. Phong Material
の4種類
それぞれ30個ずつランダムに配置する。

画像3

アニメーションだとわかりやすいかもしれない。

ソースコードは以下にあります。



この記事が気に入ったらサポートをしてみませんか?