Дивна поведінка тіней у THREE.js

Я намагаюся виставити набір фотографій, розташованих у 3-мірному просторі, які кидають тіні один на одного. Я починаю з двох прямокутників, і ось мій код

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 є твердим червоним, а матеріал є текстурованим матеріалом. Що я отримую, це наступне:

  • Якщо я використовую матеріал для обох сіток, прямокутники з'являються, як очікувалося, але без тіней. Те ж саме, якщо я використовую solidMaterial для обох.
  • Якщо я використовую матеріал для mesh (один далі) та solidMaterial для mesh1 , я бачу червоний прямокутник, який висвітлює тінь на текстурованому. Це єдиний випадок, який працює так, як я очікував би.
  • Якщо я використовую solidMaterial для mesh (далі) і матеріалу для mesh1 , я бачу червоний прямокутник з тіні на ньому, але текстурований прямокутник спереду не намальований взагалі.

Яке правильне використання тіней?

2

1 Відповіді

Виявляється, тінь не з'являється, коли у двох прямокутників однаковий матеріал. Цікаво, чи є це помилка в THREE.js.

З іншого боку, якщо я використовую два різні матеріали, тінь з'являється, як очікується, навіть якщо вони мають однакову текстуру.

2
додано
Я не знаю внутрішніх компонентів Three.js, але я б ризикував припустити, що він малює всю геометрію, яка поділяє матеріал у одному дзвінку. Це, на жаль, дуже складно, але це, мабуть, раціональне полегшення для набагато кращої продуктивності в будь-якому іншому місці. Крім того, оскільки ви знайшли такий простий шлях до вирішення проблеми, я сумніваюсь, що потрібно дуже "виправити" цю поведінку.
додано Автор Toji, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram