使用THREE.JS麻煩投射陰影

Question

好的。 我顯然在這里錯過了一些東西。 我只是想讓這段代碼投下陰影。 我已打開接收陰影並為立方體和地板投射陰影，但是它仍然沒有顯示。 這不應該那么難。 在此之前，我曾使用過投射陰影，但現在我清除了一些遺漏。 任何想法都會有所幫助。 我很茫然，因為我知道投射陰影並不難。 我一定想念一些明顯的東西。

提前致謝。

var camera, scene, renderer;
var RED = 0xff3300;

init();
render();
function init() {
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize(window.innerWidth, window.innerHeight);
    -
        document.body.appendChild(renderer.domElement);
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 15000);
    camera.position.set(1000, 500, 1000);
    camera.lookAt(new THREE.Vector3(0, 200, 0));
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xcccccc);
    var light = new THREE.SpotLight(0xdddddd, 1);
    light.position.set(50, 600, 50);
    scene.add(light);

    var coloredCube = createCube(100, 100, 100, 0, 300, 0, 0, RED);
    coloredCube.castShadow = true;
    coloredCube.receiveShadow = true;
    scene.add(coloredCube);

    //create floor
    var planeFloor = createSizedPlane(1000, 1000);
    planeFloor = preparePlaneForScene(planeFloor, Math.PI / -2, 0, 0, 0, 0, 0);
    planeFloor.castShadow = true;
    planeFloor.receiveShadow = true;
    scene.add(planeFloor);

}

function render() {
    renderer.render(scene, camera);
}

function createSizedPlane(xSize, zSize, numberOfSegments) {
    var planeGeometry = new THREE.PlaneGeometry(xSize, zSize, numberOfSegments);
    planeGeometry.receiveShadow = true;
    planeGeometry.castShadow = true;
    var material = new THREE.MeshStandardMaterial({
            roughness: 0.8,
            color: 0xffffff,
            metalness: 0.2,
            bumpScale: 0.0005,
            opacity: 1, transparent: false
        }
    );

    return new THREE.Mesh(planeGeometry, material);
}

function preparePlaneForScene(plane, xRotation, yRotation, zRotation, xPosition, yPosition, zPosition) {
    plane.rotation.x = xRotation;
    plane.rotation.y = yRotation;
    plane.rotation.z = zRotation;
    plane.position.x = xPosition;
    plane.position.y = yPosition;
    plane.position.z = zPosition;

    return plane;
}

function createCube(xSize, ySize, zSize, xPosition, yPosition, zPosition, yRotation, color) {
    var cubeGeometry = new THREE.BoxGeometry(xSize, ySize, zSize);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: color});
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.x = xPosition;
    cube.position.y = yPosition;
    cube.position.z = zPosition;
    cube.rotation.y = yRotation;
    cube.castShadow = true;
    cube.receiveShadow = true;

    return cube;
}

Answer 1

為渲染器啟用shadowMap並為光投射陰影：

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

spotLight.castShadow = true;
spotLight.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(60, 1, 1, 2500));
spotLight.shadow.bias = 0.0001;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

THREE.SpotLightShadow也應該起作用。

對於定向光，您將需要正交投影（或使用THREE.DirectionalLightShadow ）。