Three.js и применение текстуры - PullRequest
Новая
       5

Three.js и применение текстуры

0 голосов
/ 28 ноября 2018

Я использую аккуратный скрипт, найденный в Интернете (ролик для игры в кости Teal 3d).http://a.teall.info/dice/

Номера игральных костей жестко закодированы как стандартные шрифты в скрипте (текстуры изображений не применяются).Я хотел бы избавиться от этих чисел и вместо этого применить текстуры пиктограмм, чтобы настроить кости в соответствии с моими потребностями.Итак, прямо сейчас, я просто пытаюсь применить одну уникальную текстуру ко всем граням (даже если я планирую, очевидно, иметь 6 различных текстур в конечном итоге, но сначала обо всем).

Вот оригинальная функция скрипта: 

this.create_dice_materials = function(face_labels, size, margin) {
    function create_text_texture(text, color, back_color) {

        /* --- start of the part I planned to modify --- */

        if (text == undefined) return null;
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        var ts = calc_texture_size(size + size * 2 * margin) * 2;
        canvas.width = canvas.height = ts;
        context.font = ts / (1 + 2 * margin) + "pt Arial";
        context.fillStyle = back_color;
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = color;
        context.fillText(text, canvas.width / 2, canvas.height / 2);

        /* --- End of the part I planned to modify --- */

        var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;

        return texture;
    }
    var materials = [];
    for (var i = 0; i < face_labels.length; ++i)
        materials.push(new THREE.MeshPhongMaterial($t.copyto(this.material_options,
                    { map: create_text_texture(face_labels[i], this.label_color, this.dice_color) })));
    return materials;
}

И вот моя попытка применить текстуру вместо: 

this.create_dice_materials = function(face_labels, size, margin) {
    function create_text_texture(text, color, back_color) {

        /* --- start of the modified part --- */

        var img = document.getElementById("image_name");
        var canvas = document.createElement("canvas");
        var cs            = img.height;
            canvas.width  = img.height;
            canvas.height = img.height;
        var context = canvas.getContext("2d");
            context.drawImage(img, 0, 0, cs, cs, 0, 0, cs, cs);

        /* --- End of the modified part --- */

        var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;

        return texture;
    }
    var materials = [];
    for (var i = 0; i < face_labels.length; ++i)
        materials.push(new THREE.MeshPhongMaterial($t.copyto(this.material_options,
                    { map: create_text_texture(face_labels[i], this.label_color, this.dice_color) })));
    return materials;
}

Примечание: изображение текстуры встроено в html-файл как тег img.Он хорошо отображается в виде плоской HTML-картинки и имеет правильный идентификатор, который называется «имя_изображения».Таким образом, это не должно быть частью проблемы.

В любом случае, эти изменения в сценарии не нарушают сценарий (во время выполнения не возникает никаких исключений в консоли), но на кубике ничего не отображаетсяни.Никаких чисел, никакой текстуры.

Есть идеи, что не так и как мне действовать, чтобы заставить его работать?

Пока что я подозреваю две вещи:

1) "Параметры drawImage *

2) параметр карты в массиве материалов

Спасибо.

1 Ответ

0 голосов
/ 30 ноября 2018

По какой-то причине он работал на удаленном сервере, а не локально.Итак, я думаю, что это решено.

...