本篇主要學習內容 :
- 燈光與陰影
- 聚光燈
- 點光源
- 平行光
- 陰影相機和陰影計算
- 投射陰影接受陰影
點贊 + 關注 + 收藏 = 學會了
1.燈光與陰影
1、材質要滿足能夠對光有反應
2、設置渲染器開啟陰影計算 renderer.shadowMap.enabled=true
3、設置光照投射陰影 directionalLight.castShadow = true
4、設置物體投射陰影 sphere.castShadow = true
5、設置物體接受陰影 plane.receiveShadow = true
常見光源如下，入門時學習環境光和點光源:
2.聚光燈
SpotLight聚光源可以認為是一個沿著特定方向逐漸發散的光源，照射范圍在三維空間中構成一個圓錐體。
const spotLight = new THREE.SpotLight('#ffffff', 0.5)
spotLight.position.set(5, 5, 5)
spotLight.castShadow = true
spotLight.intensity = 2
// 設置陰影模糊度
spotLight.shadow.radius = 20
// 設置陰影貼圖的分辨率
spotLight.shadow.mapSize.set(4096, 4096) //1024倍數
spotLight.target = sphere
spotLight.angle = Math.PI / 6
// 從光源發出光最大距離的衰減程度
spotLight.distance = 0
// 半影衰減百分比0-1
spotLight.penumbra = 0
// 沿著光照距離的衰減程度
spotLight.decay = 0
3. 點光源
PointLight可以類比為一個發光點，就像生活中一個燈泡以燈泡為中心向四周發射光線。
const pointLight = new THREE.PointLight('red', 0.5)
pointLight.position.set(2, 2, 2)
pointLight.castShadow = true
// 設置陰影模糊度
pointLight.shadow.radius = 20
// 設置陰影貼圖的分辨率
pointLight.shadow.mapSize.set(4096, 4096) //1024倍數
// 從光源發出光最大距離的衰減程度
pointLight.distance = 0
// 半影衰減百分比0-1
pointLight.penumbra = 0
// 沿著光照距離的衰減程度
pointLight.decay = 0
4. 平行光
DirectionalLight沿特定方向發射，自定義光源位置
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(5, 5, 5)
directionalLight.castShadow = true
// 設置陰影模糊度
directionalLight.shadow.radius = 20
// 設置陰影貼圖的分辨率
directionalLight.shadow.mapSize.set(2048, 2048) //1024倍數
// 設置平行光頭攝像機屬性
directionalLight.shadow.camera.near = 0.5 //近平面距離
directionalLight.shadow.camera.far = 500 //遠平面距離
directionalLight.shadow.camera.top = 5 //Y軸正方向上的邊界
directionalLight.shadow.camera.bottom = -5 //Y軸下方向上的邊界
directionalLight.shadow.camera.left = -5 //X軸負方向上的邊界
directionalLight.shadow.camera.right = 5 //X軸正方向上的邊界
5.陰影相機
5.1）設置相機.shadow.camera長方體范圍
根據3D場景渲染范圍，去設置.shadow.camera長方體尺寸參數，一般比你要渲染的范圍稍微大一些即可，過小陰影不顯示或顯示不完整，過大很多可能陰影偏模糊，你可以比較下面兩個參數的陰影渲染差異。
directionalLight.shadow.camera.left = -50*10;
directionalLight.shadow.camera.right = 50*10;
directionalLight.shadow.camera.left = -50*100;
directionalLight.shadow.camera.right = 50*100;
5.2） 調節光源位置
光源位置影響平行光陰影相機.shadow.camera的位置，所以要根據渲染范圍調整光源的位置。
你可以比較測試兩個不同的光源位置，對應陰影渲染效果。
directionalLight.position.set(100, 60, 50);
directionalLight.position.set(100*2, 60*2, 50*2);
5.3） 確定陰影計算范圍
其實平行光陰影范圍的設置，你可以類比以前正投影機位置、長方體可視化空間的設置。
- 1.先大概確定下3D場景中需要陰影計算范圍，不用精確，有一個數量級就行，比如幾百、幾千。
- 2.
.shadow.camera的.left、.right、.top、.bottom、.near、.far屬性定義的長方體空間 - 3.
.shadow.camera的位置(光源位置影響.shadow.camera的位置)
需要陰影范圍數量級：z方向尺寸1000左右，xy方向100左右。
for (let i = -3; i < 4; i++) {const mesh2 = mesh.clone();// 設置產生投影的網格模型mesh2.castShadow = true;mesh2.position.z = 100 * i;group.add(mesh2);
}
5.4） 根據尺寸數量級設置陰影渲染范圍
比如光線是從斜上方照射下來，模型y方向高度100左右，這時候y可以設置為100左右，xz也可以根據渲染范圍先給個大概尺寸。
directionalLight.position.set(100, 100, 100);
// 平行光默認從.position指向坐標原點
光線方向，你可以改變xz坐標來調整
directionalLight.position.set(-100, 100, -100);
渲染范圍可以都先給個幾百量級的值，不用精準，先設置，在微調。
// 設置三維場景計算陰影的范圍
directionalLight.shadow.camera.left = -100;
directionalLight.shadow.camera.right = 100;
directionalLight.shadow.camera.top = 100;
directionalLight.shadow.camera.bottom = -100;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 100;
6. 投射陰影接受陰影
6.1）開啟場景陰影貼圖
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)
6.2）設置光照投射陰影
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(5, 5, 5)
directionalLight.castShadow = true
6.3）接受投射陰影
// 定義一個球 幾何體 材質 缺一不可！！！！
let sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
let material = new THREE.MeshStandardMaterial()
let sphere = new THREE.Mesh(sphereGeometry, material)
//投射陰影
sphere.castShadow = true
console.log(sphere, 'sphere')
scene.add(sphere)
感謝：b站up主：老陳打碼 以及 threejs中文網 教學及參考文檔
到此threejs進階學習結束，道阻且長，行則將至。與諸君共勉。 ??
