光源
- 光的通用屬性
- fex:光的顏色伐脖,用16進制顏色表示(如0x00FF00)
- intensity:光的強度热幔,默認為1
- castShadow:是否啟用陰影 默認為
false
。
環(huán)境光與半球光不能投射陰影讼庇。
產(chǎn)生投影的光線需配置投影區(qū)域屬性限制投影范圍(節(jié)省性能)
- 每種光都有輔助線绎巨,將光源作為參數(shù)傳入輔助線構造函數(shù)即可生成實例
var helper = new THREE.HemisphereLightHelper(hemiLight);
scene.add(helper);
環(huán)境光
THREE.AmbientLight( fex )
環(huán)境光是經(jīng)過多次反射而來的光,無處不在巫俺,會照射到場景內(nèi)的任何一個物體的任何一面认烁,且具有相同的明暗程度,因此不會產(chǎn)生陰影介汹。(這是因為却嗡,反射光可以從各個方向進入您的眼睛)
點光源
PointLight( fex, intensity, distance, decay )
由這種光源放出的光線來自同一點,且方向輻射自四面八方嘹承,光強度可隨著距離衰減窗价。例如螢火蟲放出的光。
- distance:光強衰減為0處到光源的距離叹卷。 默認情況下撼港,這個值為0,表示光源強度不衰減骤竹。
- decay: 沿著光照距離的強度衰退速度帝牡,默認為1。
- 陰影邊界屬性
陰影區(qū)域類似透視投影相機的視野蒙揣,為一個錐體- light.shadow.camera.near 默認值:50
- light.shadow.camera.far 默認值:5000
- light.shadow.camera.fov 默認值:50
- position: 光的位置靶溜,默認為
(0,1,0)
。
平行光
DirectionalLight( hex, intensity )
平行光又稱為方向光,是一組來自無限遠處的沒有衰減的平行光線罩息,類似太陽光的效果(太陽是如此遙遠嗤详,所有的陽光照射到物體上都幾乎來自同一個角度)。
平行光的方向總是為從光的位置position照向target的一個向量(因此對平行光實例做旋轉沒有效果)瓷炮,其效果只與方向有關葱色,與離物體的遠近無關,其位置僅用于決定方向娘香。
- position: 光的位置苍狰,默認為
(0,1,0)
,僅用于配合target決定光的方向茅主,與離物體的遠近無關舞痰。如位置從(0,0,100),(0,0,50)诀姚,(0,0,1)分別照向(0,0,0)時响牛, 效果完全一致。 - target: 目標位置赫段,默認為原點
(0,0,0)
呀打。
注意: 對于目標的位置,要將其更改為除缺省值之外的任何位置糯笙,必須被添加到 scene 場景中去贬丛,這使得屬性target中的 matrixWorld 會每幀自動更新。
可以是一個已有對象给涕,也可以新建一個Object3D實例豺憔。
var targetObject = new THREE.Object3D();
targetObject.position.set(8, 0, 5);
scene.add(targetObject);
light.target = targetObject;
- 陰影邊界屬性
因光線都是平行的,陰影區(qū)域類似正投影相機的視野- shadow.camera.near:(0.5)投影近點够庙。表示距離光源的哪一個位置開始生成陰影恭应。
- shadow.camera.far:(500)投影遠點。表示到距離光源的哪一個位置可以生成陰影耘眨。
- shadow.camera.left:(-5)投影左邊界昼榛。
- shadow.camera.right:(5)投影右邊界。
- shadow.camera.top:(5)投影上邊界剔难。
- shadow.camera.bottom:(-5)投影下邊界胆屿。
聚光燈
THREE.SpotLight( color, intensity, distance, angle, penumbra, decay )
從一個方向上的一個點發(fā)出,覆蓋一個圓錐體范圍偶宫,它離光越遠非迹,它的尺寸就越大。
- distance:光強衰減為0處到光源的距離纯趋。 默認情況下彻秆,這個值為0,表示光源強度不衰減。
- angle:光線散射角度唇兑,最大為
Math.PI/2
。 - penumbra:聚光錐的半影衰減百分比桦锄。在0和1之間的值扎附。默認為0。
- decay: 沿著光照距離的強度衰退速度结耀,默認為1留夜。
- position:同點光源
- target:同平行光
- 陰影區(qū)域屬性:同點光源
半球光
HemisphereLight( skyColor , groundColor , intensity )
光源具有上下兩種不同的顏色,從天空光線顏色顏色漸變到地面光線顏色图甜。 通常用于模擬戶外光照碍粥,比起THREE.DirectionalLight
模擬太陽光+THREE.AmbientLight
為場景提供基礎色的方案,HemisphereLight
更為自然(因為在戶外黑毅,并不是所有的光源都來自上方嚼摩,很多是來自大氣散射和地面以及其他物體的反射)。
- position: 同平行光僅用于設置方向矿瘦,具體位置無意義枕面。但無法設置
target
。 - visible:設為 ture(默認值)缚去,光源就會打開潮秘。
投影
投影需要以下配置
- 為渲染器開啟投影
renderer.shadowMap.enabled = true;
- 存在允許投影的光源
light.castShadow = true;
- 存在允許投影的物體
cube.castShadow = true;
- 存在允許顯示投影的物體
floor.receiveShadow= true;
可以配置渲染器的shadowMap.type
屬性變更投影樣式
- THREE.BasicShadowMap:普通陰影映射
- THREE.PCFShadowMap:柔化邊緣的陰影映射(默認)
- THREE.PCFSoftShadowMap:柔化邊緣的軟陰影映射
配置以下屬性限制陰影質(zhì)量,默認值為512,512
- light.shadow.mapSize.width
- light.shadow.mapSize.height
開啟投影輔助線
scene.add(new THREE.CameraHelper( light.shadow.camera ))
光暈
LensflareElement( texture : Texture, size : Float, distance : Float, color : Color )
- texture - 用于光暈的THREE.Texture(貼圖)
- size - (可選)光暈尺寸(單位為像素)
- distance - (可選)和光源的距離值在0到1之間(值為0時在光源的位置)
- color - (可選)光暈的(Color)顏色(需使用
THREE.Color
封裝易结,不能直接使用16進制顏色)
- 要使用光暈枕荞,首先需要設置渲染器允許透明
- 光暈必須和一個已有光源綁定
- 同一光源的其他光暈/光斑可以通過
.add(texture,size搞动,distance躏精,blendingType)
添加到已有光暈上
var renderer = new THREE.WebGLRenderer({
alpha: true
});
var loader = new THREE.TextureLoader()
var textureFlare0 = loader.load("./lensflare/lensflare0.png");
var textureFlare3 = loader.load("./lensflare/lensflare3.png");
var flareColor = new THREE.Color(0xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare0, 170, 0.0, THREE.AdditiveBlending,
flareColor);
lensFlare.add(textureFlare3, 60/2, 0.6, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70/2, 0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 120/2, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70/2, 1.0, THREE.AdditiveBlending);
lensFlare.position.copy(light.position);
scene.add(lensFlare);