Three.js: использование текстуры изображения приводит к исчезновению других объектов

Question

Я пытаюсь визуализировать куб пространства-времени. В качестве ссылки я беру это изображение, которое я нашел в google: http://www.intechopen.com/source/html/38305/media/image7.jpeg. На самом деле мне удалось это сделать, но есть странная ошибка, как только я начну использовать текстуру для нижней части куба (что является плоскостью в моем случае). То, что находится чуть выше плоскости, - это то, что не всегда видно, и изображение иногда искажается. Это трудно объяснить, так что вы можете проверить jfiddle, что я создал:

http://jsfiddle.net/fGwsB/

Я использую CanvasRenderer и загрузите текстуру как folows:

texturemat = new THREE.MeshLambertMaterial({ 
    side: THREE.DoubleSide, 
    map: THREE.ImageUtils.loadTexture(background)}); 

Где фон строка, содержащая ссылка на файл изображения.

Элементы управления включены, поэтому вам может потребоваться масштабирование и поворот, чтобы ошибка возникла.

Answer 1

«Исчезающая» геометрия вызвана ограничением CanvasRenderer в связи с тем, как она обрабатывает сортировку глубины.

В то время как WebGLRenderer сортируется на уровне пикселей, CanvasRenderer сортируется на уровне многоугольника.

Лучшее, что вы можете сделать, это увеличить тесселяцию вашей геометрии, которую вы уже делаете.

var geometry = new THREE.PlaneGeometry(width, height, 10, 10); 

Кроме того, добавление дополнительных баллов в ваши строки поможет.

Что касается искажений, то это также улучшается за счет увеличения тесселяции. См. ThreeJS Cube texture strange visual.

three.js r.64