When a wall appears, the shadow is not blocked

Questions
1

The shadow created by the green cube：

image
image1004×584 4.8 KB

The red plane is the wall：

image
image1158×898 7.83 KB

There should be no shadow behind the red plane

2

Set receiveShadow for the wall mesh to true.

3

it looks like this:

image
image1108×814 7.93 KB

There’s still a shadow behind the wall.

4

Try to replace the plane mesh with a box so the wall has a depth.

5

After trying it, it didn’t work as expected：

image
image878×676 5.43 KB

The main code is as follows：

// 创建物体
    const geometry = new THREE.BoxBufferGeometry(4, 4, 4); // 生成几何体
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ff00,
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.castShadow = true;
    mesh.position.set(0, 2, 0);
    scene.add(mesh);
    // 遮挡物
    const geometry2 = new THREE.BoxBufferGeometry(6, 6, 3);
    const material2 = new THREE.MeshLambertMaterial({
        color: 0xff0000,
    });
    const mesh2 = new THREE.Mesh(geometry2, material2);
    mesh2.receiveShadow = true;
    mesh2.position.set(0, 3, -4);
    scene.add(mesh2);

    // 创建地面
    const planeGeometry = new THREE.PlaneGeometry(300, 300);
    const planeMaterial = new THREE.MeshLambertMaterial({
        // 生成材质
        color: 0xcccccc,
    });
    const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
    planeMesh.receiveShadow = true;
    planeMesh.rotation.x = -Math.PI / 2; //绕X轴旋转90度
    scene.add(planeMesh);

    // 创建平行光源
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(3, 8, 10);
    light.castShadow = true; // 允许生成阴影
    scene.add(light);
6

It seems the best you can achieve is this: Edit fiddle - JSFiddle - Code Playground

Meaning let the wall itself cast a shadow.

7

ok, thank you

8

You can cut your floor in half (make it two separate meshes) - one half before the wall will receive shadow, the other won’t.