threejs 中的光源类型
threejs 光源介绍
THREE.AmbientLight
环境光,没有特定方向,均匀的照亮每一个物体,使场景不会太暗
THREE.DirectionLight
平行光,模拟太阳,从远处照射的光,使物体产生统一方向的阴影,适合营造阳光等效果
THREE.HemisphereLight
半球光,类似于环境光,但可以设置天空和地面两个光照的颜色,拟从天空和地面反射的光线,使场景看起来更自然
THREE.PointLight
点光源,从一个特定点向所有方向发射光线,具有衰减效果,距离光源越远,光照强度越弱
THREE.RectAreaLight
矩形区域光,位于特定点,在矩形平面上均匀发光,可用于模拟窗户、灯带等光源,仅在MeshStandardMaterial和MeshPhysicalMaterial材质下生效。
rectAreaLight.position.set(-1.5, 0, 1.5) // 设置位置
rectAreaLight.lookAt(new THREE.Vector3()) // 设置方向
THREE.SpotLight
聚光灯,从一个点向特定方向发射锥形光线,可用于模拟手电筒、舞台聚光灯等效果,具有角度、衰减、半影等属性来控制光线的形状和强度变化
光源辅助工具
为了方便在场景中可视化光源的位置和方向,Three.js 提供了多种光源辅助工具,如HemisphereLightHelper、DirectionalLightHelper、PointLightHelper、SpotLightHelper和RectAreaLightHelper,可以将它们添加到场景中,帮助开发者更好地理解和调试光源的设置。
光源与材质的关系
不同的光源类型与材质相互作用,会产生不同的效果。例如,MeshStandardMaterial和MeshPhysicalMaterial等材质能够很好地与各种光源配合,实现真实的光照效果,包括高光、反射、阴影等。而RectAreaLight仅在这两种材质下才能正常发挥作用。
光源的动态效果
可以通过修改光源的属性来实现动态的光照效果。在渲染函数中不断更新物体的旋转角度,同时也可以在这个函数中根据时间或其他条件来动态改变光源的位置、强度、颜色等属性,从而实现如闪烁、移动、颜色变化等动态光照效果,为场景增添更多的生动性和交互性。