Question

我使用的是在网上找到的简洁脚本（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;
}

注意：纹理图片作为img标签嵌入在html文件中。它可以正常显示为html图片，并且具有正确的ID，即“ image_name”。因此，这不应该成为问题的一部分。

无论如何，脚本中的这些更改不会破坏脚本（执行脚本时控制台中不会出现异常），但是骰子上都没有任何显示。没有数字，没有纹理。

任何主意是什么问题，我应该如何使它起作用？

到目前为止，我怀疑两件事：

1）“ drawImage”参数

2）材料数组中的“地图”参数

谢谢。

Answer 1

无论出于何种原因，它只能在远程服务器上运行，而不能在本地服务器上运行。所以，我想这已经解决了。

Three.js和应用纹理

1 个答案: