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