Блог

Хорошо. Я явно что-то здесь упускаю. Я просто пытаюсь заставить этот код отбрасывать тени. Я включил прием теней и отбрасывал тени для куба и пола, но он по-прежнему не отображается. Это не должно быть так сложно. Я уже использовал отбрасывание теней раньше, однако я здесь что-то упускаю. Любые идеи помогут. Я в растерянности, потому что я знаю, что отбрасывать тени не так сложно. Должно быть, я упускаю что-то очевидное.

Заранее спасибо.

 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;
}
  

Включить 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 тоже должен работать.

Для направленного освещения вам понадобится ортографическая проекция (или используйте ТРИ.DirectionalLightShadow).