[three.js] Lightの使い方 - AmbientLight編

Three.jsのライト

Three.js には、ライトを表現するオブジェクトとして、

• Light
• AmbientLight
• AreaLight
• DirectionalLigth
• HemisphereLight
• PointLight
• SpotLight

がある。シーンに、ライトを適切に配置しないと、オブジェクトが見えない。
それぞれのライトがどのような性質があって、どう使えばいいのかが(3D初心者の僕には)わからないので、 一つずつ実験してみよう、ということで、AmbientLightを使ってみました。

Light

Lightは、上記の各ライトの基底となるオブジェクトで、属性として「color」を持っている。 それ以外に別段コレという属性も操作も持っていない。

AmbientLight

AmbientLightは、直訳すると「周辺光」という意味で、どうやら3D空間の描画において、自然に発生する普遍的な光を表現するための概念と思われた。
AmbientLightには、他のライトが持つような光源の座標や、影に関する属性がなく、

• color

を属性に持っている。 それと、他のライトは、概ねintensityという光の強度を属性に持つが、AmbientLightはそれももっていない。
じゃあ、どうしたらライトのON/OFFができるのか、といえば、Lightの基底であるObject3Dから継承している、

• visible

属性をfalseにすることで、AmbientLightをOFFにできた。
さらに、AmbientLightのドキュメントには、次のような記述がある。

This light's color gets applied to all the objects in the scene globally.

なので、このライトに照らされた全てのオブジェクトは、このライトが持つcolorの影響を受ける、ということだ。
一方で、3Dオブジェクトを表現するThree.jsのオブジェクト MeshLambertMaterialは、ambientという属性を持っていて、これは、

Ambient color of the material, multiplied by the color of the AmbientLight. Default is white.

なので、この値を変えれば、AmbientLightに照らされた時の色が表現できる、ということになる。

an experiment.

ということで、実際に試してみたのが、こちらになります。