Why isn't my PlaneGeometry getting a shadow?

I am using three.js to create a scene that has a model on it. I have a plane on which a model is sitting and a spotlight is shining on the model.

The model consists of several different objects. All objects are set to receive and cast shadows. Shadows are cast on the model itself from other areas of the model.

The plane, however, will not receive shadows. I'm not sure why.

I adjusted the spotLight.shadowCameraNear

and properties spotLight.shadowCameraFar

to ensure that the model and plane are in the shadow area. Still nothing.

Below is a screenshot of a visible spotlight. Airplane, spotlight and model

I have shadowmap enabled and set to soft maps:

renderer.shadowMap.enabled = true; // Shadow map enabled
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

      

My code looks like this:

<script>

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    var container, stats, controls;
    var camera, scene, renderer, sceneAnimationClip ;

    var clock = new THREE.Clock();

    var mixers = [];
    var globalObjects = [];         

    init();

    function init() {

        var loader = new THREE.TextureLoader();

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        // Scene
        scene = new THREE.Scene();
        scene.fog = new THREE.Fog( 0xffffff, 50, 100 );

        // Camera
        camera = new THREE.PerspectiveCamera( 30, (window.innerWidth / window.innerHeight), 1, 10000 );
        camera.position.x = 1000;
        camera.position.y = 50;
        camera.position.z = 1500;
        scene.add( camera );

        // LIGHTS
        var spotLight = new THREE.SpotLight( 0xffffff,1 );
        spotLight.position.set( 5, 5, 6 );

        spotLight.castShadow = true;

        spotLight.target.position.set(-1, 0, 2 );
        spotLight.shadowDarkness = 0.5;             
        spotLight.shadowCameraNear = 4; 
        spotLight.shadowCameraFar = 25;

        scene.add( spotLight );

        // Camera helper for spotlight
        var helper = new THREE.CameraHelper( spotLight.shadow.camera );
        scene.add( helper );

        // ground
        var geometry = new THREE.PlaneGeometry( 30, 30 );
        geometry.receiveShadow = true;
        var material = new THREE.MeshBasicMaterial( {color: 0xcccccc, side: THREE.DoubleSide} );
        material.receiveShadow = true;
        var floor = new THREE.Mesh( geometry, material );
        floor.receiveShadow = true;
        floor.position.y = -1;
        floor.rotation.x = Math.PI / 2;
        scene.add( floor );

        // stats
        stats = new Stats();
        container.appendChild( stats.dom );

        // model
        var manager = new THREE.LoadingManager();
        manager.onProgress = function( item, loaded, total ) {
            console.log( item, loaded, total );
        };

        // BEGIN Clara.io JSON loader code
        var i = 0;
        var objectLoader = new THREE.ObjectLoader();
        objectLoader.load("final-master-20170426.json", function ( object ) {

            var textureLoader = new THREE.TextureLoader();

            object.traverse( function ( child )
            {
                if ( child instanceof THREE.Mesh ) { 
                    var material = child.material.clone();

                    material.shininess = 0;
                    material.wireframe = false;
                    material.normalScale = new THREE.Vector2( 1, 1 );

                    /* Roof Glass */
                    if(child.name == 'Roof_Glass') {
                        material.shininess = 100;
                        material.alphaMap = grayscale;
                        material.transparent = true;
                    }

                    // Beading
                    if(child.name.endsWith('_Beading')) {
                        material.color.setHex( 0x1e1e1e );
                        material.shininess = 100;
                    }

                    /* Pillars */
                    if(
                        child.name.indexOf('Pillar') == 0 ||
                        child.name == 'Main_Frame' || 
                        child.name == 'Main_Cross_Supports' ||
                        child.name == 'roof_batons' ||
                        child.name == 'Roof_Flashings'                              
                    ) {
                        material.color.setHex( 0x1e1e1e );
                        material.shininess = 100;
                    }

                    /* Lamps */
                    if(child.name.indexOf('Lamp') == 0) {
                        material.color.setHex( 0x1e1e1e );
                        material.shininess = 100;
                    }
                    // Set shadows for everything
                    material.castShadow = true;
                    material.receiveShadow = true;

                    child.material = material;

                    material = undefined;

                    globalObjects[child.name] = child;

                    console.log(child);
                }
            });
            object.position.y = -1;
            object.position.x = 0;

            scene.add( object );
            scene.fog = new THREE.Fog( 0xffffff, 50, 100 );

            i++;
        } );
        // END Clara.io JSON loader code

        renderer = new THREE.WebGLRenderer({
            'antialias': true   
        });
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColor( scene.fog.color );

        container.appendChild( renderer.domElement );

        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.shadowMap.enabled = true; // Shadow map enabled
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        // controls, camera
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.target.set( 0, 0, 0 );
        controls.maxPolarAngle = Math.PI * 0.5;
        camera.position.set( 8, 3, 10 );
        controls.update();

        window.addEventListener( 'resize', onWindowResize, false );

        animate();

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    //

    function animate() {

        requestAnimationFrame( animate );
        stats.update();
        render();

    }

    function render() {

        var delta = 0.75 * clock.getDelta();
        camera.lookAt( scene.position );
        renderer.render( scene, camera );

    }
</script>

      

+3


source to share


1 answer


This was fixed with using THREE.MeshPhongMaterial

instead THREE.MeshBasicMaterial

.



+2


source







All Articles