Comment créer de la lumière directionnelle ombre Three.JS?

Est-il possible de créer des zones d'ombres à partir d'un DirectionalLight?

Si j'utilise SpotLight puis je vois une ombre, mais si j'utilise DirectionalLight il ne fonctionne pas.

  • Pouvez-vous partager le code que vous avez essayé et cela ne fonctionne pas?
  • J'ai tout essayé, mais encore ne fonctionne pas. Code: jsfiddle.net/Q4uqE/1
InformationsquelleAutor eqiproo | 2012-05-24
  1. 36

    Oui, vous avez très certainement peut utiliser des lumières directionnelles pour projeter des ombres. Vous devez vous assurer que vous n'utilisez pas MeshBasicMaterial comme ils ne prennent pas en charge les ombres. Utilisation MeshLambertMaterial ou MeshPhongMaterial à la place.

    Vous devez activer les ombres pour le moteur de rendu avec quelque chose le long de ces lignes:

    renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;

renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 50;

renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;

    Et puis vous devez activer l'ombre de la coulée et de l'ombre de la réception par objet et par la lumière de sorte que vous auriez

    dirLight.castShadow = true;
object.castShadow = true;
otherObject.receiveShadow = true;

    Puis, si la lumière et les objets sont placés à des positions appropriées. dirLight sera la cause de l'ombre de object être exercé à l'encontre otherObject.

    [EDIT]: Ici est un travail de démonstration pour ceux qui cherchent à faire quelque chose de similaire.

    • Encore ne fonctionne pas. Code: jsfiddle.net/Q4uqE/1
    • Oui, il le fait, dans votre violon vous avez votre lumière directionnelle est placé à l'intérieur de votre cube. Ici est la même jouer avec la lumière déplacé vers le haut et hors de la cube. jsfiddle.net/Q4uqE/5
    • Comment se fait-il que vous avez à déplacer la lumière? À partir de la Three.js doc: "Crée une lumière qui brille dans une direction précise pas à partir d'une position spécifique.", de changer de position.x doit simplement changer la direction?
    • Ne pas le shadowCameraNear, shadowCameraFar, shadowCameraFov, shadowMapBias, shadowMapDarkness, shadowMapWidth et shadowMapHeight les paramètres de jeu sur la lumière n'est pas le moteur de rendu?
    • Savez-vous pourquoi light.shadowCameraVisible ne pas faire n'importe quoi dans cette fourche exemple? jsfiddle.net/Q4uqE/566
    • Votre démonstration ne fonctionne plus, car le CHAMP de vision de la lumière directionnelle de l'ombre de la caméra a ratatiné par défaut après r74. Comme Drew Noakes réponse mentionne, vous avez à l'échelle ce FOV au moins aussi grand que votre objet: voir tripoter.

    InformationsquelleAutor Cory Gross
  2. 49

    Être conscient que les cartes d'ombre sont dépendant de l'échelle. Je suis en train de travailler sur une scène où l'unité de distance représente un mètre, et mes objets sont d'environ 0,4 mètres de large. C'est assez petit par Three.js des normes. Si vous disposez de cette situation, alors vous pouvez prendre quelques mesures importantes:

    • Assurer l'ombre de la caméra près de/loin des avions sont raisonnables compte tenu de votre scène de dimensions.
    • Assurer l'ombre de la caméra haut/gauche/bas/droite, les valeurs ne sont pas trop gros, sinon, chaque ombre 'pixel' peut être si grande que vous ne remarquerez même pas l'ombre de la scène.

    Voyons comment faire cela.

    De débogage

    Veillez à activer le débogage rendu par la lumière via CameraHelper:

    scene.add(new THREE.CameraHelper(camera))

    Ou dans les anciennes versions de l'Three.js:

    light.shadowCameraVisible = true;

    Cela va vous montrer le volume dans lequel l'ombre est calculé. Voici un exemple de ce à quoi cela pourrait ressembler:

    Comment créer de la lumière directionnelle ombre Three.JS?

    Avis de la de près et de loin avions (avec les croix noires), et le haut/gauche/bas/droite de l'ombre de la caméra (les murs extérieurs de la boîte jaune.) Vous voulez cette case pour être serré autour de ce que les objets que vous allez avoir dans l'ombre — peut-être encore plus serré que je vous montre ici.

    Code

    Voici quelques extraits de code qui peut être utile.

    var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 2, 2);
light.target.position.set(0, 0, 0);
light.castShadow = true;
light.shadowDarkness = 0.5;
light.shadowCameraVisible = true; //only for debugging
//these six values define the boundaries of the yellow box seen above
light.shadowCameraNear = 2;
light.shadowCameraFar = 5;
light.shadowCameraLeft = -0.5;
light.shadowCameraRight = 0.5;
light.shadowCameraTop = 0.5;
light.shadowCameraBottom = -0.5;
scene.add(light);

    Assurez-vous que des objet(s) des ombres:

    object.castShadow = true;

    Assurez-vous que des objet(s) à recevoir des ombres:

    object.receiveShadow = true;

    Enfin, configurer certaines valeurs sur le WebGLRenderer:

    renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(canvasWidth, canvasHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
    • Est-il un truc à faire light.shadowCameraVisible = true travail? Il ne semble pas faire quoi que ce soit dans cette fourche exemple (à partir de la accepté la réponse ci-dessus): jsfiddle.net/Q4uqE/566
    • Au cours des dernières Three.js versions il faut utiliser CameraHelper au lieu de light.shadowCameraVisible = true: scene.add(new THREE.CameraHelper(camera))
    • Génial. Merci pour cette.
    • Votre explication m'a aidé à monceaux. Merci beaucoup! C'est probablement la peine de mentionner que le CameraHelper doivent pointer vers l'appareil de la source de lumière, comme ceci: scene.add(new THREE.CameraHelper(light.shadow.camera));
    InformationsquelleAutor Drew Noakes