Three.js объект сзади не виден при повороте к нему лицом?

Question

[Tereverda]

При повороте камеры на заднюю сторону - смотришь на нее фронтально, исчезает объект - полоски.
Не понимаю как это исправить, живой пример.

Песочница

const scene = new THREE.Scene(); // создаем сцену
    scene.background = new THREE.Color(0xffffff); // фон сцены

    const renderer = new THREE.WebGLRenderer({antialias : true}); // сглаживание углов
    renderer.setSize(divSize["width"], divSize["height"]); // размер холста
    renderer.sortObjects = false;

    visualization.appendChild(renderer.domElement); // подключаем к div Three.js
    const camera = new THREE.PerspectiveCamera(fov, divSize["width"] / divSize["height"] , 0.1, null); // создаем камеру

// Общая группа в которую вносим все объекты
        const group = new THREE.Group();
        group.name  = 'Гофролист';

        // Создаем гофролист X-length + Y-height + Z-width
        const sheetGeometry = new THREE.BoxGeometry(width, length, 0);
        const sheetMaterial = new THREE.MeshStandardMaterial({
            map: sheetTexture,
            side: THREE.DoubleSide,
            depthWrite: false,
            transparent: false, // прозрачность
            opacity: 1, // непрозрачность
            alphaTest: 0.1
        });

        const sheet = new THREE.Mesh(sheetGeometry, sheetMaterial);
        sheet.geometry.computeBoundingBox(); // создаем невидимую рамку-каркас для замера вершин
        sheet.name = name; // название гофролиста

pointsRight.push( new THREE.Vector3(x, bSheet.max.y, -50) );
            pointsRight.push( new THREE.Vector3(x, bSheet.min.y, -50) );

            let lineRightGeometry = new THREE.BufferGeometry().setFromPoints(pointsRight);
            let lineRight = new THREE.Line(lineRightGeometry, lineMaterial);
            lineRight.name  = 'Линия в право ' + lineQuantity;

           group.add(lineRight);

Answer 1

[Ivan Bogachev]

Без полноценого примера в песочнице это будет гадание на кофейной гуще, но что видно сейчас - для такой простой сцены у вас используется очень много вещей, которые потенциально могут что-то сделать c видимостью объектов. Обычно мы их используем для очень опасных оптимизаций, когда нужно все сделать нестандартным образом, где-то что-то сломать, но за счет этого что-то другое выиграть. Тут такие оптимизации явно преждевременны. Стоит пройтись по ним и убрать все. Если сцена будет работать, то потом можно будет вернуть назад по очереди, наблюдая за происходящим.

Параметры depthWrite у материала и sortObjects у рендерера - первые кандидаты на то, чтобы их убрать. И определенно стоит вместо BoxGeometry нулевой толщины взять PlaneGeometry. Нулевая толщина тоже может давать разные сложности, с определением видимости в том числе.

Comments

[Tereverda]

Создал песочницу, все перепробовал, не могу найти причину.

Менял свойства:

depthWrite: true,
transparent: false, 
opacity: 1,

Менял порядок рендеринга и группировку.

Либо сетка всегда видна, сквозь первый объект, как сейчас.
Либо первый объект всегда перекрывает сетку сзади, хотя она есть.

[Ivan Bogachev]

Tereverda, В песочнице я вижу, что у вашей камеры угол обзора по вертикали получается что-то в районе 0.05 градуса. Это очень мало. Из этого и дальнейших вычислений получается расстояние до картонки в 2237000. Обычно мы считаем единицу измерения пространства в мире WebGL равной одному физическому метру. Ваша картонка от камеры улетела в соседнюю страну. При этом расстояние между картонкой и линиями маленькое. Смешение очень больших расстояний и очень маленьких может создавать сложности при определении видимости при использовании линейного буфера глубины. В текущей ситуации вам нужно включить logarithmicDepthBuffer у рендерера. И задать корректный параметр far у камеры. Вероятно что-то в районе 10000000.

[Tereverda]

Ivan Bogachev, да, вы были правы! far исправил