Les ombres de ThreeJS ne fonctionnent pas comme prévu

Question

J'ai une simple scène three.js et j'ai ajouté quelques sphères. Je veux obtenir un effet d'éclairage et d'ombrage simple mais j'ai des formes étranges et sombres sur mes sphères.

Je suppose que quelque chose ne va pas avec mes paramètres: jsFiddle

c'est au cœur de ce simple morceau de code:

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

Les artefacts noirâtres proviennent de la bilatéralité des sphères combinées avec le mappage d'ombre.

Supprimez side: THREE.DoubleSide de leur définition de matériau et vous devriez être bon.

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

---

Vous pouvez également obtenir des résultats différents avec peaufinage les paramètres d'ombrage, par exemple, vous pouvez ajouter renderer.shadowMapType = THREE.PCFSoftShadowMap;. Voir ici: http://jsfiddle.net/Us54P/332/

---

pourrait aussi être un bug (ou une fonction de mise au point), car il disparaît lorsque vous désactivez light.shadowCameraVisible = true;: http://jsfiddle.net/Us54P/334/