threejs的阴影

案例说明：

第一:定义一个平面用来接收阴影的

第二:定义一个物体用来产生阴影的

第三：

代码

//添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff)
directionalLight.position.set(1, 1, 1) //设置光的位置
directionalLight.castShadow = true //********
directionalLight.shadow.mapSize.width = 1024 //默认是512 
directionalLight.shadow.mapSize.height = 1024 //默认是512
scene.add(directionalLight)//把平行光添加进场景
 
//定义一个平面(用来接收阴影)
const planeG = new THREE.PlaneGeometry(4, 4)
const planeM = new THREE.MeshStanderdMaterial({ color: 0xcccccc })
const plane = new THREE.Mesh(planeG, planeM)
plane.rotation.x = -0.5 * Math.PI //让平面旋转90度
plane.receiveShadow = true //接收阴影 //********
scene.add(plane) //添加场景
 
//定义一个球体(被照物体)
const sphereG = new THREE.SphereGeometry(0.5)//定义一个球半径为0.5
const sphereM = new THREE.MeshStandardMaterial({
    color: 0xffff00,
})
const sphere = new THREE.Mesh(sphereG, sphereM)
sphere.position .y = 0.5 
sphere.castShadow = true //光线照在物体上产生阴影 //********
scene.add(sphere)
 
//渲染阴影
renderer.shadowMap.enabled = true //渲染阴影 //********

效果图：

这个的阴影比较粗糙

需要光滑就要给光设置

directionalLight.shadow.mapSize.width = 1024 //默认是512 
directionalLight.shadow.mapSize.height = 1024 //默认是512

让球动起来

const clock = new THREE.Clock()
tick()
function tick() {
    const time  = clock.getElapsedTime()
    //Math.sin(time) 取值范围是-1到1之间
    //Math.abs()是取绝对值
    sphere.position.y = Math.abs(Math.sin(time))
    requestAnimationFrame(tick)
    renderer.render(scene, camere)
}