Почему текстурированные лица three.js выглядят перекосами при повороте?

Что не так в приведенном ниже примере?

Лица выглядят искривленными, если они не параллельны окну просмотра.

http://jsfiddle.net/mneja2mr/

    geometry = new THREE.CubeGeometry(10, 10, 10);

    texture=new THREE.ImageUtils.loadTexture(dataUrl);                                          

    material = new THREE.MeshBasicMaterial({
        map: texture
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

three.js texture-mapping uv-mapping
person luxigo    schedule 22.07.2015    source источник
comment
вы определенно хотите использовать CanvasRenderer? вы можете использовать WebGLRenderer.   -  person gaitat    schedule 22.07.2015
comment
Пример работает с WebGLRenderer Я чувствую себя глупо :-), но у меня такая же проблема на странице с WebGLRenderer, где я устанавливаю положение вершин плоскости - я полагаю, мне не удалось сделать вершины копланарными из-за некоторого вращения ... Я разветвил существующий jsfiddle, чтобы проверить его, не заметив типа рендерера .. :-)   -  person luxigo    schedule 22.07.2015
comment
также обратите внимание, что ваша текстура не является степенью 2, и, возможно, у средства визуализации Canvas есть проблемы с этим. Если это правда, вы можете открыть вопрос.   -  person gaitat    schedule 22.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

CanvasRenderer неправильно интерполирует атрибуты для перспективных камер; это нарушение наложения текстуры. Если вам нужно выполнить рендеринг с помощью CanvasRenderer, быстрое решение - разделить геометрию: http://jsfiddle.net/41g0ffb3/2/

geometry = new THREE.CubeGeometry(10, 10, 10, 10, 10, 10);
person Frederic Gaudet    schedule 12.08.2015