光源の設定 Three.jsの使い方を勉強してみた

光源の設定 Three.jsの使い方を勉強してみた

こんにちは!

プログラム学習中のdynaです!

この記事は前回の 「Three.jsを学習してみた、その1 導入から表示まで」 の続きです。

今回は、 光源を追加してみました。 

 

デモはこちら↓ 表示されない場合は右下のRerunを押してね。

See the Pen 初めてのThree.js学習② by dyna (@sakudyna) on CodePen.

 

光源を追加する

光源を追加します。

光源を追加する事で、より立体的に見えます。

前回のコードに、光源の設定のコードを追加します。

※光源も種類が複数あったので、今後まとめたいと思います!

 

 

ちょっとハマったポイント

これで表示されるかと思いきや・・・メッシュのマテリアルの種類によって光への反応が異なるようです(;’∀’)

ということで、メッシュ部分を以下のコードに書き換えます。

 

MeshBasicMaterial ⇒ MeshLambertMaterial へ。

MeshBasicMaterial はライトに反応しないそうです。

 

MeshBasicMaterial

単純なシェーディング(フラットまたはワイヤーフレーム)の方法でジオメトリを描画するためのマテリアル。

この素材はライトの影響を受けません。

引用元:https://threejs.org/docs/#api/en/materials/MeshBasicMaterial

  

メッシュやマテリアルって何だっけ・・・という方は、
「Three.jsを学習してみた、その1 導入から表示まで」を見てね!

  

 

マテリアルも種類がたくさんあるので、この辺も調べて記事にしたいと思います・・・!

 

全体のコード

 

Three.js、楽しいですが奥が深い。

引き続き学習していきたいと思います(^^)

学習している本はこちら↓

 

ここまで読んで下さりありがとうございます。