无法投射阴影

Question

我已经制作了这个表格网格，我想在方格（地板）网格上投射阴影。我已经尝试使用ShadowMap已有一段时间了，但我似乎无法使其正常工作。

这是当前外观：

相机和场景

 const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(35, (window.innerWidth / window.innerHeight), 0.1, 1000);
    camera.position.z = 8;
    camera.position.y = 2;
    camera.lookAt( scene.position );

表格网格

    const boxWidth = 1; const boxHeight = 0.1; const boxDepth = 1;
    const tableBoardGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    const textureLoader = new THREE.TextureLoader();
    const customPicture = textureLoader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
    const tableBoardMaterial = new THREE.MeshLambertMaterial({map: customPicture, wireframe: false})
    const tableBoard = new THREE.Mesh(tableBoardGeometry, tableBoardMaterial)
    tableBoard.position.set(0, 0, 0)
    tableBoard.castShadow = true;

闪电与阴影

    const lightAndShadow = () => {
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
        const lightIntensity = 1.3; const lightDistance = 18;
        const light = new THREE.PointLight(0xffffff, lightIntensity, lightDistance);
        light.position.set(1, 1, 1)
        light.castShadow = true
        light.target = tableBoard;
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFShadowMap;
        light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(100, 1, 500, 1000))
        light.shadow.bias = 0.0001
        light.shadow.mapSize.width = 2048*2
        light.shadow.mapSize.height = 2048*2
        scene.add(light, ambientLight);
}

地板网格

const floorWidh = 20; const floorHeight = 20; const floorWidthSegments = 50; const floorHeightSegments = 50;
    const floorGeometry = new THREE.PlaneGeometry( floorWidh, floorHeight, floorWidthSegments, floorHeightSegments );
    floorGeometry.rotateX( - Math.PI / 2 );
    const floorTexture = new THREE.TextureLoader().load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOOcWSD0K2mPwokAFfZIhq5Xl49bh8B17RlU6NqCGa4UOKydgX');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(20, 20);
    const floorMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF, wireframe: false}),
    floor = new THREE.Mesh( floorGeometry, floorMaterial );
    floor.position.set(0, -tableLegHeightPosition, 0)
    floor.receiveShadow = true;

任何有关如何使阴影起作用的建议都会受到赞赏。

Answer 1

light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(100, 1, 500, 1000))

您将覆盖LightShadow的默认相机参数，并将Near Clipping plane定义为500，这将使tableBoard阴影消失。

您可以将此数字减小为默认值0.5或接近它的值。 near clipping plane为500对您的情况来说是一个很大的数字。

从文档中：

  

.shadow：LightShadow

     

用于计算此光阴影的LightShadow。

     

将lightShadow的摄影机设置为PerspectiveCamera，其fov为90，长宽比为1，接近裁剪平面为0.5，远远裁剪平面为500。

有关点光阴影here，请参见Three.js完整文档