threejs之灯光阴影篇

threejs之灯光阴影篇

首先创建一个球体一个平面

DirectionalLight直线光

const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)//球体
const material = new THREE.MeshStandardMaterial()//材质
const sphere = new THREE.Mesh(sphereGeometry, material)  //实物
sphere.castShadow = true //投射阴影
scene.add(sphere)//场景加入物体
// 创建平面
const planeGeometry = new THREE.PlaneGeometry(10, 10)
const plane = new THREE.Mesh(planeGeometry, material)//创建平面
plane.position.set(0, -1, 0)//设置位置
plane.receiveShadow = true //接收阴影
plane.rotation.x = -Math.PI / 2//旋转
scene.add(plane)//添加场景

//灯光
// 环境光从四面八方过来的灯光
const light = new THREE.AmbientLight('#fff', 0.5)
scene.add(light)
// 太阳光也称直线光源
const directionalLight = new THREE.DirectionalLight('#fff', .5)//不设置位置默认从y轴过来
directionalLight.position.set(10, 10, 10)
directionalLight.castShadow = true //光照投射阴影
scene.add(directionalLight)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true //渲染器开启阴影计算
document.body.appendChild(renderer.domElement)
// 创建轨道控制器实现3d
const controls = new OrbitControls(camera, renderer.domElement)
// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(50)
scene.add(axesHelper)
function render() {
    renderer.render(scene, camera)
    // 不停的渲染
    requestAnimationFrame(render)
}
render()

灯光阴影要走下面5步

• 首先材质要满足能够对光照有反应
• 设置渲染器开启阴影计算 rendeer.shadowMap.enabled=true
• 设置光照投射阴影 directionalLight.castShadow=true
• 设置物体投射阴影 sphere.castShadow=true
• 设置物体接收阴影 plane.receiveShadow=true

const directionalLight = new THREE.DirectionalLight('#fff', .5)//不设置位置默认从y轴过来
directionalLight.position.set(2, 2, 2)
directionalLight.castShadow = true
directionalLight.shadow.radius = 20 //设置阴影模糊度
directionalLight.shadow.mapSize.set(2048, 2048)//设置阴影贴图的分辨率
// 设置平行光投射相机的属性---》远近上下左右
directionalLight.shadow.camera.near = 0.5
directionalLight.shadow.camera.far = 500
directionalLight.shadow.camera.top = 5
directionalLight.shadow.camera.bottom = -5
directionalLight.shadow.camera.left = -5
directionalLight.shadow.camera.right = 5
scene.add(directionalLight)
const gui = new dat.GUI()
gui.add(directionalLight.shadow.camera,'near').min(0).max(10).step(0.1).onChange(()=>{
    directionalLight.shadow.camera.updateProjectionMatrix()//灯光距离改变时重新渲染
})

SpotLight聚光灯

聚光灯光锥形态

const directionalLight = new THREE.SpotLight('#fff', 2)//不设置位置默认从y轴过来
directionalLight.position.set(2, 2, 2)

directionalLight.castShadow = true
directionalLight.shadow.radius = 20 //设置阴影模糊度
directionalLight.shadow.mapSize.set(2048, 2048)//设置阴影贴图的分辨率
directionalLight.target = sphere//聚焦物体
directionalLight.angle = Math.PI / 6  //0-90 聚光角度
directionalLight.distance = 0
directionalLight.penumbra = 0
directionalLight.decay = 0//衰减量
// 设置平行光投射相机的属性---》 角度远近  没有上下左右
// directionalLight.shadow.camera.near = 0.5
// directionalLight.shadow.camera.far = 500
// directionalLight.shadow.camera.fov = 30
scene.add(directionalLight)
const gui = new dat.GUI()
gui.add(sphere.position, 'x').min(0).max(10).step(0.1)
gui.add(directionalLight, 'angle').min(0).max(Math.PI / 2).step(0.1)
gui.add(directionalLight, 'distance').min(0).max(10).step(0.1)//如果非零，那么光强度将会从最大值当前灯光位置处按照距离线性衰减到0。 缺省值为 0.0。
gui.add(directionalLight, 'penumbra').min(0).max(10).step(0.1)//聚光锥的半影衰减百分比。在0和1之间的值。 默认值 — 0.0
...
renderer.physicallyCorrectLights=true//真实世界的物理计算耗性能  聚光灯的效果更能体现