光源AmbientLight（环境光）、PointLight（点光源）、SpotLight（聚光灯源）和DirectionalLight（平行光）是基本的光源HemisphereLight（半球形光源））、AreaLight（面光源）、LensFlare（镜头光晕）是一种特殊用途的光源。HemisphereLight直接放置在场景中。光色由天光色逐渐变为地光色。半球光不能投射阴影。半球光可以营造更自然的环境。室外灯光效果是模拟室外场景的反射效果。如果不使用THREE.HemisphereLight，为了模拟室外光照，通常会创建一个THREE.DirectionalLight来模拟阳光，可能会添加一个THREE.AmbientLight来为场景提供半球光源颜色通用属性的基础颜色:从天空发出的光的颜色groundColor:从地面发出的光的颜色intensity:光源的强度。默认值为：1.position：光源在场景中的位置。默认值：(0,100,0)visible：设置为true（默认值），灯将打开。如果设置为false，光源将被关闭。半球光源代码示例varhemiLight=newTHREE.HemisphereLight(天空的反射色，地面的反射色，光的强度)//这也是默认位置hemiLight.position.set(0,100,0)scene.add(hemiLight)AmbientLightAmbientLight是一个没有特定方向的光源，会均匀的照亮场景中的所有物体，主要是统一改变Threejs物体表面的明暗效果。这不同于有方向的光源。例如，点光源可以使物体表面的不同区域有不同程度的明暗。环境光影响整个场景。它的光没有特定的来源，但无处不在。它不能影响阴影的产生，因为它没有方向，不能作为唯一的光源。在使用其他光源时使用三个。AmbientLight，目的是弱化阴影，增加一些颜色的环境光代码示例//THREE.AmbientLight不需要指定位置，只需要指定颜色（十六进制）varambientLight=newTHREE.AmbientLight(0x0c0c0c)scene.add(ambientLight)环境光和半球光源的区别环境光分为THREE.AmbientLight&THREE.HemisphereLightTHREE.AmbientLight物体明暗对比无法呈现THREE.HemisphereLight物体明暗对比明显如果你想要模拟真实世界，推荐使用THREE.HemisphereLight，如果对于三维显示不是特别苛刻，可以使用THREE.AmbientLight和THREE.DirectionalLight点光源PointLight点光源就像白炽灯生活中光线沿发光核心向外发散，同一平面上不同位置点光源光线入射角不同s，在一个点光源的照射下，同一平面的不同区域表现出不同的光影效果，环境光也不同。环境光不需要设置光源的位置，但是需要设置点光源的位置属性。位置，光源的位置不同，被照物体的表面不同，距离不同，因为衰减不同。点光源代码示例varpoint=newTHREE.PointLight(0xffffff)//设置点光源位置，改变光源位置point.position.set(400,200,300)scene.add(point)ParallellightDirectionalLight顾名思义，平行光就是平行光。对于平面，平面的不同区域以相同的入射角接收平行光。点光源向四周发散，所以设置position属性.position可以决定光线对于平行光来说，光线与物体表面的夹角主要是决定光线的方向。光线方向设定后，光线与物体表面的入射角就确定了。仅仅设置光的位置在三维空间中是无效的。为了确定一条直线的方向，只需要确定直线上两点的坐标即可，所以平行光提供了position.position和target.target两个属性来确定平行光的方向。对于任何3D模型对象，例如网格模型Mesh，平行光将通过其自身位置属性.position和.target表示的对象的位置属性.position来计算。如果不设置.position和.target属性，则光照默认从上到下的Illumination，即可以认为光照方向由(0,1,0)和(0,0,0)关注平行光源的位置属性。position并不表示平行光从这个位置移动到远处的Lighting，.position属性只是用来确定平行光的方向。你可以把平行光理解为太阳光。从无限远射出的平行光代码示例vardirectionalLight=newTHREE.DirectionalLight(0xffffff,1)//设置光源的方向：通过position属性计算directionalLight.position.set(80,100,50)目标指向对象的光源和位置属性。//定向光指向物体的mesh模型mesh，不可设置，默认位置0,0,0directionalLight.target=meshscene.add(directionalLight)spotlightSpotLightspotlight可以认为是一个光源会沿特定方向逐渐发散，照射范围在三维空间形成一个圆锥体。聚光灯可以通过属性angle设置发散角，聚光灯方向设置，平行光源同平行光源。聚光灯的代码示例是通过position.position和target.target这两个属性实现的varspotLight=newTHREE.SpotLight(0xffffff)spotLight.position.set(200,200,200)spotLight.target=mesh//设置聚光灯光源的发散角spotLight.angle=Math.PI/6scene.add(spotLight)//给场景添加光物体光投射的作用是什么在具有定向光源的情况下，物体会形成阴影投射效果。如何计算光投射计算？Three.js对象投影模拟计算。主要有三个设置。一个是设置产生投影效果的模型对象，一个是设置接收投影效果的模型，最后一个是光源对象本身的设置。光源怎么样？生成投影平行光投影计算代码示例//创建方向光源vardirectionalLight=newTHREE.DirectionalLight(0xffffff,1)directionalLight.position.set(60,100,40)scene.add(directionalLight)//设置计算阴影lightsourceobjectdirectionalLight.castShadow=true//设置计算阴影的区域，最好紧紧围绕物体，如果计算阴影的区域太大：模糊，如果太小：看不到或显示不完整directionalLight.shadow.camera.near=0.5directionalLight.shadow.camera.far=300directionalLight.shadow.camera.left=-50directionalLight.shadow.camera.right=50directionalLight.shadow.camera.top=200directionalLight.shadow.camera.bottom=-100//设置mapSize属性可以让阴影更清晰，不那么模糊//directionalLight.shadow.mapSize.set(1024,1024)聚光灯投影计算代码示例//创建聚光灯varspotLight=newTHREE.SpotLight(0xffffff)spotLight.position.set(50,90,50)spotLight.angle=Math.PI/6scene.add(spotLight)//设置计算阴影阴影光源对象spotLight.castShadow=true//设置计算阴影的区域，注意周围物体spotLight.shadow.camera.near=1spotLight.shadow.camera.far=300spotLight.shadow.camera.fov=20光投影计算常用的属性模型。castShadow属性，.castShadow属性的值为布尔值，默认为false，用于设置模型对象是否在光照模型下产生投影效果。receiveShadow属性，.receiveShadow属性的值为布尔值，默认为false，用于设置模型对象是否接受光源下其他模型的阴影效果。castShadow属性。如果该属性设置为true，光源将投射动态阴影。警告：这需要大量的计算资源，需要进行调整，使阴影看起来正确。Lightsource.shadow平行光DirectionalLight的.shadow属性值为平行光阴影对象DirectionalLightShadow。聚光灯SpotLight的.shadow属性值为聚光灯阴影对象SpotLightShadow，通过相机物体的观察位置和方向判断，其他物体后面的物体会在阴影LightShadow属性中。mapSize，一个二维向量Vector2，定义了阴影纹理贴图的宽高，较高的值会是以计算时间为代价为了提供??更好的阴影质量，宽度和高度组件必须是2的幂，直到给定设备的WebGLRenderer.capabilities.maxTextureSize尽管宽度和高度不必相同（例如，（512,1024)有效)，默认值为(512,512)LightShadowproperty.map，该属性的值为WebGL渲染目标对象WebGLRenderTarget，使用内置摄像头生成的深度图，超出的位置像素深度在阴影中，在渲染时内部计算参考文档1——Threejs光源Object参考文档2-HemisphereLight与AmbientLight的区别参考文档3-Threejs官方示例我是fx67ll.com，如果你如果您发现本文有错误，欢迎在评论区讨论指正，感谢阅读！如果您喜欢本文，欢迎访问我本文的github仓库地址，并为我点个Star，谢谢~:)转发请注明参考文章地址，万分感谢！！！
