javascript - 为什么我的 PlaneGeometry 没有收到阴影？

Question

我正在使用 three.js 创建一个场景，上面有一个模型。我有一架飞机，模特坐在上面，还有一盏聚光灯照在模特身上。

模型由许多不同的对象组成。所有对象都设置为接收和转换阴影。阴影从模型的其他区域转换到模型本身。

然而，飞机不会收到阴影。我不确定为什么。

我已经调整了 spotLight.shadowCameraNear 和 spotLight.shadowCameraFar 属性以确保模型和平面都在阴影区域内。还是什么都没有。

下面是模型的屏幕截图，聚光灯可见。

我启用了阴影贴图并设置为软贴图:

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

我的代码如下:

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

Answer 1

这是通过使用 THREE.MeshPhongMaterial 而不是 THREE.MeshBasicMaterial 解决的。