Странное поведение теней в THREE.js - PullRequest
Новая
       37

Странное поведение теней в THREE.js

2 голосов
/ 28 октября 2011

Я пытаюсь визуализировать набор фотографий, расположенных в трехмерном пространстве, которые отбрасывают тени друг на друга. Я начинаю с двух прямоугольников, и вот мой код 

function loadScene() {
    var WIDTH = 1200,
        HEIGHT = 500,
        VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000,

        world = document.getElementById('world'),
        renderer = new THREE.WebGLRenderer(),
        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR),
        scene = new THREE.Scene(),
        texture = THREE.ImageUtils.loadTexture('image.jpg', {}, function() {
            renderer.render(scene, camera);
        }),
        material = new THREE.MeshLambertMaterial({map: texture}),
        solidMaterial = new THREE.MeshPhongMaterial({color: 0xCC0000}),
        rectangle = new THREE.PlaneGeometry(200, 120),
        mesh = new THREE.Mesh(rectangle, material),
        mesh1 = new THREE.Mesh(rectangle, material),
        spotLight = new THREE.SpotLight(0xFFFFFF, 1.3);

    camera.position.set(0, 0, 200);
    mesh.translateX(140);
    mesh.translateZ(-70);
    mesh.receiveShadow = true;
    mesh1.castShadow = true;
    spotLight.position.x = -100;
    spotLight.position.y = 230;
    spotLight.position.z = 230;
    spotLight.castShadow = true;

    scene.add(spotLight);
    scene.add(mesh);
    scene.add(mesh1);
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMapEnabled = true;
    renderer.render(scene, camera);
    world.appendChild(renderer.domElement);
}

Здесь solidMaterial - сплошной красный, а material - текстурированный материал. Я получаю следующее:

  • Если я использую material для обеих сеток, прямоугольники отображаются, как и ожидалось, но без теней. То же самое, если я использую solidMaterial для обоих.
  • Если я использую material для mesh (еще дальше) и solidMaterial для mesh1, я вижу красный прямоугольник, который отбрасывает тень на текстурированный. Это единственный случай, который работает так, как я ожидал.
  • Если я использую solidMaterial для mesh (еще дальше) и material для mesh1, я вижу красный прямоугольник с тенью на нем, но текстурированный прямоугольник спереди вообще не рисуется .

Как правильно использовать тени?

1 Ответ

2 голосов
/ 28 октября 2011

Оказывается, тень не появляется, когда два прямоугольника имеют одинаковый материал.Интересно, не является ли это ошибкой в ​​THREE.js.

С другой стороны, если я использую два разных материала, тень будет выглядеть как положено, даже если они имеют одинаковую текстуру.

...