在前面的章节中，我们已经实现了将物体添加到场景中，并设置了灯光等效果，但是，这并不是很真实，在真实的世界中，被灯光照射的物体是有阴影的，这一节我们就来给物体添加阴影。 在Threejs中给物体添加阴影，需要注意以下几点 1.要选择具有投射阴影效果的材质 我们前面也提到过，基础网格材质MeshBasicMaterial是不受光照影响的，我们如果需要有阴影效果，就不能选择该材质 2.需要投射阴影的物体要设置castShadow属性 castShadow属性用于设置物体是否被渲染到阴影贴图中，默认为false，如果需要投影，则设置为true 3.接收阴影的物体要开启receiveShadow属性 receiveShadow属性用于设置材质是否接收阴影，默认为false，如果需要接收物体的投影，设置为true 4.灯光开启投射阴影castShadow属性 灯光也要设置castShadow为true，默认为false 5.渲染器设置允许在场景中使用阴影贴图 将渲染器的shadowMap.enabled属性设置为true，允许场景中使用阴影贴图 经过上面五步的设置，就可以开启物体的阴影效果了，具体实现代码如下
代码语言：javascript复制import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 场景
const scene = new THREE.Scene()
// 平面几何体
const planGeometry = new THREE.PlaneGeometry(1000,1000)
// 平面几何材质
const planMaterial = new THREE.MeshPhongMaterial({color:0x808080})
// 平面
const plan = new THREE.Mesh(planGeometry,planMaterial)
plan.position.set(0,-10,0)
plan.rotation.x = - Math.PI/2
scene.add(plan)
// 球体
const sphereGeometry = new THREE.SphereGeometry(50,32,16)
const sphereMaterial = new THREE.MeshPhongMaterial({color:0xffff00})
const sphereMesh = new THREE.Mesh(sphereGeometry,sphereMaterial)
sphereMesh.position.set(0,60,0)
scene.add(sphereMesh)
// 辅助轴
const axesHelper = new THREE.AxesHelper(50)
scene.add(axesHelper)
// 环境光
const ambient = new THREE.AmbientLight(0xffffff,0.3)
scene.add(ambient)
// 聚光灯
const sportLight = new THREE.SpotLight(0xffffff,1)
sportLight.position.set(-200,350,0)
sportLight.angle = Math.PI / 6
sportLight.penumbra = 0.2 //边缘羽化
scene.add(sportLight)
// 相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,2000)
camera.position.set(500,200,200)
// 渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setPixelRatio(window.devicePixelRatio) //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
renderer.setSize(window.innerWidth,window.innerHeight)
// 阴影
// 需要投射阴影的物体要开启是否被渲染到阴影贴图中 castShadow属性
sphereMesh.castShadow = true //对象是否被渲染到阴影贴图中。默认值为false。
// 接收阴影的物体要开启材质是否接收阴影 receiveShadow属性
plan.receiveShadow = true //材质是否接收阴影。默认值为false。
// 灯光开启投射阴影
sportLight.castShadow = true //此属性设置为 true 聚光灯将投射阴影。警告: 这样做的代价比较高而且需要一直调整到阴影看起来正确。
// 渲染器显示阴影设置为enabled = true 允许在场景中使用阴影贴图
renderer.shadowMap.enabled = true //如果设置开启，允许在场景中使用阴影贴图。默认是 false。
document.body.appendChild(renderer.domElement)
const control = new OrbitControls(camera,renderer.domElement)
function animation() {
requestAnimationFrame(animation)
renderer.render(scene,camera)
}
animation()刷新浏览器，看效果
