携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情 >
在threejs场景中生成阴影,需要将光线对象的castShadow属性设置为true才可以生成阴影,其中还要确保投射阴影的mesh对象的castShadow属性为true,为要显示阴影的mesh对象设置receiveShadow属性为true;
其中,可以允许生成阴影的光只有 PointLight、DirectionLight、SpotLight 这三种；
简单实现阴影出现
// 声明平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
// 设置位置
directionalLight.position.set(2, 2, - 1)
// 设置可以产生投影
directionalLight.castShadow = true;
// 将平行光添加至场景中
scene.add(directionalLight)
// 创建材质为可以产生阴影的材质
const material = new THREE.MeshStandardMaterial()
// 创建地面
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(5, 5),
material
)
// 设置位置
plane.rotation.x = -Math.PI * 0.5
plane.position.y = -0.65
// 设置可以接收阴影
plane.receiveShadow = true
// 创建球
const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), material)
// 设置球可以产生阴影
sphere.castShadow =true;
// 添加至场景中
scene.add(sphere, plane)
// 渲染器允许产生阴影
renderer.shadowMap.enabled = true;
// 成功产生阴影，实现效果如下图
优化shadow
// mapSize.width/height阴影映射宽度/高度,决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时，可以增加这个值,修改时值给2的次方,为了更好的内部计算
// 在场景渲染之后无法更改，默认值都为512
directionalLight.shadow.mapSize.width = 1024
directionalLight.shadow.mapSize.height = 1024
// 投影近点 从光源的哪一个位置开始生成阴影
directionalLight.shadow.camera.near = 1
// 投影远点 距离光源的哪一个位置可以生成阴影
directionalLight.shadow.camera.far = 6
// 投影上边界
directionalLight.shadow.camera.top = 2
// 投影右边界
directionalLight.shadow.camera.right = 2
// 投影下边界
directionalLight.shadow.camera.bottom = - 2
// 投影左边界
directionalLight.shadow.camera.left = - 2
// 边界虚化
directionalLight.shadow.radius = 10;
// 创建阴影相机辅助器 方便我们观察修改值
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
// 将辅助器可见性设为false
scene.add(directionalLightCameraHelper)
注:当我们的阴影出现这种裁断的效果时,是由于我么上下左右的边界给定的过小导致的
如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧
