Вопросы Теги

Three.js: THREE.WebGLRenderer: изображение не является степенью двойки (1600x900). Изменение размера до 1024x512

Благодаря bknights я смог изменить свой ответ на работу для моих нужд.

Мое полное fuction выглядит следующим образом: 

    var myTextExtraction = function (node) {
    //console.log(node);

    var child = node.firstChild;
    while (child) {
        if (node.getElementsByTagName('span').length) {
            childValue = child.nextSibling.innerHTML;
            console.log(childValue);
        }
        else {
            childValue = child.nodeValue
            console.log(childValue);
        }
        return childValue;
    }
}

Затем я создаю node с плагином tablesorter: 

// Load the table sorter
$(".table").tablesorter(
    {
        textExtraction: myTextExtraction
    }
);

Просматривает и выводит текст внутри <td><span>mytext</span></td>, а также текст в <td>myothertext<td>. Я использую это для плагина jquery TableSorter для работы со сложными данными внутри <td> s

0
задан Max Tommy Mitschke 15 January 2019 в 22:27
поделиться

2 ответа

Я прочитал, что размеры текстур должны быть степенью двойки, чтобы их можно было оптимизировать, чтобы они запоминались в памяти, заставляя меня задуматься, правильно ли я размещаю свои изображения на сцене или если есть другой способ поместить изображения, которые не следуют этому, в three.js?

В WebGL 1 вам нужны POT-текстуры для отображения. Упомянутое предупреждение исчезнет, ​​если вы установите свойство .minFilter вашей текстуры холста на THREE.LinearFilter. Имейте в виду, что использование mipmaps не обязательно для всех сценариев.

0
ответ дан Mugen87 15 January 2019 в 22:27
поделиться

Возможно, вы не хотите, чтобы THREE.js уменьшал до вашего изображения, потому что вы теряли разрешение, поэтому вы хотите увеличить его до следующего ^ 2. У вас есть два варианта:

  1. Вы можете увеличить изображение и экспортировать его с разрешением ^ 2 2048 x 1024 в вашем любимом фоторедакторе.

  2. Вы можете динамически генерировать 2048 x 1024 холст, рисовать изображение на нем в увеличенном масштабе и использовать этот холст в качестве источника текстуры: 

    var imgURL = "path/to/whatever.jpg";

// Create image element
const image = document.createElement('img');
image.src = imgURL;

// Once image is loaded
image.onload = () => {
    // Create canvas, size it to ^2 dimensions
    var canvas = document.createElement('canvas');
    canvas.width = 2048;
    canvas.height = 1024;

    // Draw image on canvas, scaled to fit
    var ctx = canvas.getContext('2d');
    var ctx.drawImage(image, 0, 0, 2048, 1024);

    // Create texture
    var texture = new THREE.Texture(canvas);
};

Тогда вы можете присвоить эту переменную texture любому материалу, который вы хотите, и Three.js не будет жаловаться.

Редактировать:

Если вы хотите избежать изменения размера текстуры, вы можете просто изменить texture.minFilter на THREE.NearestFilter или THREE.LinearFilter, и движок не будет предупреждать вас. Проблема заключается в том, что ваши текстуры могут выглядеть зернистыми или иметь псевдонимы при уменьшении, так как они не будут иметь Mipmapped

. Это может быть желаемым результатом или плохим в зависимости от вашего проекта. Вы можете увидеть результаты использования NearestFilter в этом примере: https://threejs.org/examples/?q=filter#webgl_materials_texture_filters

0
ответ дан Marquizzo 15 January 2019 в 22:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: