CODEWITHSUNDEEP
javascript3dthree.js
Dale
Dale

Reputation: 1628

Trouble Casting Shadows with THREE.JS

Okay. I'm clearly missing something here. I'm simply trying to get this code to cast shadows. I've turned on receive shadows and cast shadows for the cube and the floor but it still isn't showing. This shouldn't be this hard. I've used casting shadows before however I'm clearing missing something here. Any ideas would help. I'm at a loss because I know casting shadows isn't that hard. I must be missing something obvious.

Thanks in advance.

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

Upvotes: 0

Views: 415

Answers (1)

Ramil Kudashev
Ramil Kudashev

Reputation: 1175

Enable shadowMap for renderer and casting shadow for light:

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 should work too.

For directional light you would need orthographic projection (or use THREE.DirectionalLightShadow).

Upvotes: 1

Related Questions