Я пытаюсь создать простую 3D-игру с boxgeometries в three.js.
Все работает хорошо, но я не получаю острых краев на этих коробках, независимо от того, на мобильном браузере (сафари) или на Chrome на моем MacBook. Смотрите скриншот ниже.
То, что я пробовал до сих пор: установить сглаживание на рендерере в true (помогает, но по-прежнему нет прямых линий от повернутых кубов), установить соотношение пикселей рендерера (сенсорный щелчок пересекается, тогда не работают, и все еще пиксельные линии). Также пробовал шейдер FXAA но результат был не лучше.
Использование перспективной камеры, Boxgeometry с основным материалом.
У меня такой вопрос, возможно ли с помощью Three.js иметь острые края на этих кубиках? особенно когда они довольно маленькие (например, 30 одинакового размера на экране мобильного телефона).
Использование three.js версии 87, Chrome 68, новейшего мобильного сафари.
Обновление: это мои настройки рендерера:
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio); // doesnt do the trick and messes up the threex domevent touch inputs
document.body.appendChild(renderer.domElement);
canvas = document.getElementsByTagName('canvas')[0];
window.onresize = resizeCanvas;
resizeCanvas();
function resizeCanvas() {
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
в моем css у меня только холст {высота: 100%; ширина: 100%; }
update2: демонстрационная ссылка здесь https://jsfiddle.net/roxanfc4/11/