ThreeJs 认识光和影

一、前言

这一篇文章，我们主要来了解一下 ThreeJs 中关于光和影的相关知识点。通过给 3D 场景以及物体加上光照和阴影的效果，使其能更真实的模拟现实，从而也能使整个效果看起来更加的具有质感。

二、概述

ThreeJs 中给我们提供了多种光源，下面请看类图以及相应的概述。

Light.jpg

光的基类是 Light，其是继承自 Object3D 的。它作为一个对象被添加进了 Scene 中，从而进行渲染的。影的基类是 LightShadow，它是作为光的内部类，供光照在内部进行阴影计算的，我们不能直接构造它。如图，并不是所有的光照都会产生阴影，是否会产生阴影与光照所具备的特性有关。

三、认识光和影

下面我们来全面的认识一下 Three Js 中的光照和阴影，对它们的相关特性以及使用的场景来做一个归纳。

3.1 Light

LightXMind.jpg

3.2 AmbientLight

AmbientLight.jpg 环境光的典型效果.png

3.3 DirectionalLight

DirectionalLight.jpg 平行光的典型效果.png

3.4 HemisphereLight

HemisphereLight.jpg HemisphereLight( 0xffffff, 0x33ff00 ).png

3.5 PointLight

PointLight.jpg PointLight( 0xffee88, 1, 100, 2 ).png

3.6 RectAreaLight

RectAreaLight.jpg image.png

3.7 SpotLight

SpotLight.jpg SpotLight( 0xffffff, 1 ).png

四、总结

最后，简单来总结一下

Light总结.jpg