ThreeJS 阴影无法按预期运行

Question

我有一个简单的 three.js 场景并添加了一些球体。我想实现简单的照明和阴影效果，但我的球体上出现了奇怪的黑色形状。

我想我的设置有问题：jsFiddle

这是这段简单代码的核心：

// renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.physicallyBasedShading = true;
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    renderer.shadowMapEnabled = true; 
    renderer.shadowMapSoft = true; 
    renderer.shadowCameraNear = 0.1;
    renderer.shadowCameraFar = 1000;
    renderer.shadowCameraFov = 100;
    renderer.shadowMapBias = 0.0039;
    renderer.shadowMapDarkness = 0.5;
    renderer.shadowMapWidth = 1024;
    renderer.shadowMapHeight = 1024; 
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 150, 50, 150 );

    // controls
    controls = new THREE.OrbitControls( camera );
    // lights
    var light = new THREE.SpotLight( 0xF5F6CE, 1 );
    light.position.set( 300, 300, 60 );
    light.castShadow = true;
    light.shadowMapWidth = 1024;    // power of 2
    light.shadowMapHeight = 1024;

    light.shadowCameraNear = 200;   // keep near and far planes as tight as possible
    light.shadowCameraFar = 500;    // shadows not cast past the far plane
    light.shadowCameraFov = 20;
    light.shadowBias = -0.00022;    // a parameter you can tweak if there are artifacts
    light.shadowDarkness = 0.8;

    light.shadowCameraVisible = true;
    scene.add( light );

    // axes
    scene.add( new THREE.AxisHelper( 200 ) );


    for (var x = 0; x < 3; x++) {
        for (var y = 0; y < 3; y++) {
            for (var z = 0; z < 3; z++) {
                var sphere = new THREE.Mesh(new THREE.SphereGeometry(10,32, 32), new THREE.MeshPhongMaterial({ color: "#FFFF00", side: THREE.DoubleSide,     })); // with MeshLambertMaterial still not working
                sphere.position.set(20*x, 20*y, 20*z); 
                castShadow = true; 
                sphere.castShadow = true;
                sphere.receiveShadow = true ;
                scene.add(sphere);
            }
        }
    }

Answer 1

黑色的伪像来自球体的两侧性以及阴影贴图。

从他们的 material 定义中删除 side: THREE.DoubleSide，你应该是好的。

http://jsfiddle.net/Us54P/331/

您还可以通过调整着色参数获得不同的结果，例如，您可以添加 renderer.shadowMapType = THREE.PCFSoftShadowMap;。看这里：http://jsfiddle.net/Us54P/332/

也可能是错误（或调试功能），因为当您禁用 light.shadowCameraVisible = true; 时它会消失：http://jsfiddle.net/Us54P/334/

ThreeJS 阴影无法按预期运行

ThreeJS shadows do not function as expected

shadow

light

three.js