Three.js平面接收不到阴影

首先确认渲染器有无开启阴影贴图，默认是false

// 创建渲染器
var renderer = new THREE.WebGLRenderer()
// 设置渲染物体阴影
renderer.shadowMap.enabled = true

然后确认物体材质是否可受光照影响

// 创建地面几何体
const planeGeometry = new THREE.PlaneGeometry(60,20)    
// 创建地面材质
const planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc})
// 若使用基础网格材质(MeshBasicMaterial)则会发现光照没有阴影，因为这种材质不受光照影响
// 创建地面
const plane = new THREE.Mesh(planeGeometry, planeMaterial)

确认物体对象是否渲染阴影贴图和是否接收阴影

// 对象是否渲染到阴影贴图中(对象是否可以产生阴影)
plane.castShadow = true
// 地面材质是否接收阴影
plane.receiveShadow = true
// 将地面添加到场景中
scene.add(plane)

js代码

function init() {
            // 创建场景
            const scene = new THREE.Scene();
            // 设置相机
            const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000)
            // 创建渲染器
            var renderer = new THREE.WebGLRenderer()
            // 设置渲染器的初始颜色(背景颜色)
            renderer.setClearColor(new THREE.Color(0xeeeeee))
            // 设置输出canvas画面的大小
            renderer.setSize(window.innerWidth,window.innerHeight)
            // 设置渲染物体阴影
            renderer.shadowMap.enabled = true
            // renderer.shadowMap.type = THREE.PCFShadowMap 
            // 显示三维坐标系(参数为坐标轴长度)
            var axes = new THREE.AxesHelper(20)

            // 将坐标系添加到场景中
            scene.add(axes)

            // 创建地面几何体
            const planeGeometry = new THREE.PlaneGeometry(60,20)    
            // 创建地面材质
            const planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc})
            // 创建地面
            const plane = new THREE.Mesh(planeGeometry, planeMaterial)
            // 将物体移动位置
            plane.rotation.x = -0.5*Math.PI
            plane.position.x = 15
            plane.position.y = -10
            plane.position.z = 0
            // 对象是否渲染到阴影贴图中
            plane.castShadow = true
            // 地面材质是否接收阴影
            plane.receiveShadow = true
            // 将地面添加到场景中
            scene.add(plane)

            // 添加光源
            // 创建聚光灯SpotLight
            const spotLight = new THREE.SpotLight(0xffffff)
            // 设置聚光灯位置(x,y,z)
            spotLight.position.set(10,40,-30)
            spotLight.castShadow = true
            scene.add(spotLight)
            
            // 创建立方体
            const cubeGeometry = new THREE.BoxGeometry(4,4,4)
            const cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000})
            const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
            // 将立方体移动位置
            cube.position.x = 0
            cube.position.y = 2
            // 对象是否渲染到阴影贴图中
            cube.castShadow = true
            // 将立方体添加到场景中
            scene.add(cube)


            // 创建球体
            const sphereGeometry = new THREE.SphereGeometry(4,6,6)
            const sphereMaterial = new THREE.MeshLambertMaterial({color:0x00ff00})
            const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
            sphere.position.x = 30
            sphere.position.y = 5
            sphere.castShadow = true
            scene.add(sphere)

            // 设置相机定位并且指向场景中心
            camera.position.x = 50
            camera.position.y = 50
            camera.position.z = 50
            camera.lookAt(scene.position)

            // 将渲染器输出添加html元素中
            document.getElementById('webgl-output').appendChild(renderer.domElement)
            renderer.render(scene,camera)

        }
        window.onload = init