three.jsライトについて

2020年11月21日

フロントエンド

前回はジオメトリについてまとめましたが今回はライトについてまとめていきます。

three.jsには5種類のライトがあります。以下がthree.jsで使えるライトです。

  • AmbientLight
  • DirectionalLight
  • HemisphereLight
  • PointLight
  • SpotLight

1つずつ紹介していきます。

AmbientLight

AmbientLightは環境光源と言って、オブジェクトに対して、均等に光を当てます。均等に光を当てるので影はできません。他のライトの補助として使うことがほとんどですね。以下のように使います。光の色と光の強さを指定します。

const AmbientLight = new THREE.AmbientLight(0xffffff, 1); 

DirectionalLight

DirectionalLightは平行光源と言って、光源が無限に離れているとしてそこから平行に光が当たります。太陽光をイメージするとわかりやすいと思います。最初に紹介したAmbientLightと一緒に使うといい感じになりますね。光の色と光の強さを指定します。

const DirectionalLight = new THREE.DirectionalLight(0xffffff, 1);

HemisphereLight

HemisphereLightは半球光源と言って、屋外の光の当たり方のように空からの上側の光の色と、下側の光の色を別々に設定できます。上側の光の色と下側の光の色、光の強さを指定します。

const HemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 1);

PointLight

PointLightは点光源と言って、1か所から全方向に光を放射します。電球みたいな光をイメージするとわかりやすいと思います。個人的には結構好きなライトです。光の色、光の強さ、距離、光の減衰率を指定します。

const PointLigh = new THREE.PointLight(0xffffff, 2, 50, 1);

SpotLight

SpotLightはそのまま舞台などで使われるようなスポットライトをイメージするとわかりやすいと思います。指定できる値が多いので少しややこしいですね。光の色、光の強さ、距離、角度、光のボケ具合、光の減衰率を指定します。

const light = new THREE.SpotLight(0xffffff, 2, 10, Math.PI / 3, 10, 1);

まとめ

今回はライトについてまとめました。まず最初にわかりやすいAmbientLightとDirectionalLightを使ってみて、そのあとにほかのライトを使ってみるのがいいと思いますね。

Pocket

related

EJSを使ってサイトをコーディングする

今回は、ポートフォリオのコーディングで使ったEJSについてまとめていきます。EJSを使っていくための環境構築やEJSのメリットなどまとめていこうと思います。 EJSとは? そもそもEJSって何?という

フロントエンド

2020.08.27

jQueryを使って一番上に戻るボタンを実装する

今回はjQueryを使って一番上戻るボタンを自力で実装していこうと思います。調べたらコピペでそのまま使えるコードが出てきますが今まで学んできたことの復習として自分の力で書いていきます。ところどころに解

フロントエンド

2020.04.19

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

Gatsby.jsで簡単なブログを作ってみた

Gatsby.jsで簡単なブログを作ってみたので紹介していこうと思います。 今回制作したブログのURLは以下です。Netlifyでデプロイして公開しています。 https://kokenote.net

フロントエンド

2020.11.02

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き