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

黑乎乎的伪影来自于球体的双面性与阴影映射相结合。

移除 side: THREE.DoubleSide 从他们的材料定义，你应该是好的。

http:/jsfiddle.netUs54P331

---

你也可以通过调整阴影参数来获得不同的结果，例如，你可以添加 renderer.shadowMapType = THREE.PCFSoftShadowMap;. 请看这里。http:/jsfiddle.netUs54P332

---

也可能是一个错误（或调试功能），因为当你禁用 light.shadowCameraVisible = true;: http:/jsfiddle.netUs54P334