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.net/Us54P/331/

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

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

ThreeJS阴影无法正常工作

1 个答案: