ThreeJs 认识光和影

880 阅读1分钟

一、前言

这一篇文章,我们主要来了解一下 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