原本覺得不就設一個陰影嘛,網上這麼多文章,隨便看一篇就知道怎麼設置了,然而我卻花了整整一天才讓陰影出現...web
不少博主說,在threeJS中要讓陰影顯示,只要知足如下幾個基本條件。spa
renderer.shadowMapEnabled = true;
light.castShadow = true;
mesh.castShadow = mesh.receiveShadow = true;
然而,沒學webGL直接擼THREE的初學者(我)有時候卻怎麼都弄不出陰影,摸索了一天以後才發現,原來除了以上基本條件,還有不少其它的條件...少有博主把這些高級條件一次性列完,不過這位博主列出的則足夠全面,可是所用的threeJS版本過舊.net
如下列出我遇到過的狀況:code
在點光源下的陰影都是馬賽克,開啓renderer.shadowMapType=THREE.PCFSoftShadowMap;
可有效減小馬賽克,但不如用平行光的陰影完美。好在不多用點光源,晚一點再摸索一下orm
對於平行光,還須要設置 light.shadow.camera
下的這6個屬性:near
、far
、left
、right
、top
、bottom
。使陰影在這6個面描述的範圍內才能顯示,不然可能只顯示一部分或者不顯示陰影,以下圖blog
能夠試試不設置這6個值,打印一下它們分別的默認值,特別小!物體挪遠一點就沒有陰影了。three
要說明這6個屬性,還要先說light.shadow.camera
,這是一個正交攝像機(OrthographicCamera
),與光源同一位置和朝向。這6個值一塊兒設置了這個攝像機的可視區域,只有在可視區域內的物體才能產生投影與被投影。這6個值的說明在threeJS文檔的正交相機就有ip
題外話,最近玩手遊吃雞,裏面的陰影離人物遠的地方是不會顯示的,只會顯示人物附近10米內的陰影,估計就是這6個值設置的了吧。
這4種能夠:DirectionalLight
、PointLight
、RectAreaLight
、SpotLight
文檔
我也沒所有試過,試過能夠的有:MeshLambertMaterial
get
如:light.position.set(-40, 60, -10).normalize()
添加光源的時候通常都會給光源設置一個位置,可是若是順手把這個位置設成單位向量了,那會出現怪異的問題:平行光下,有的物體能投陰影,有的球體卻不行,當時思考了好久怎麼回事。但後來發現,並非陰影失效了,應該是它致使了上面提到的陰影攝像機的範圍發生了變化