Three.js and applying texture

Question

I'm using a neat script found online (Teal 3d dice roller). http://a.teall.info/dice/

The dice numbers are hardcoded as standard fonts in the script (no image textures applied). I would like to get rid of those numbers and apply pictogram textures instead to customize the dice to fit my needs. So, right now, I'm just trying to apply one unique texture to all faces (even though I plan to obviously have 6 different textures eventually but first thing first).

Here is the original script function :

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;
}

And here is my attempt to apply a texture instead:

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;
}

Note: the texture picture is embedded within the html file as an img tag. It shows up alright as a flat html picture and it has the proper id which is "image_name". So, this shouldn't be part of the problem.

Anyway, those changes in the script don't break the script (no exception appears in the console while executing it),but nothing shows up on the dice neither. No numbers, no texture.

Any idea what is wrong and how I should proceed to make it work?

So far I suspect two things:

1) the "drawImage" parameters

2) the "map" parameter within the materials array

Thanks.

I'm a little confused by this question, but if it's three.js related, why don't you just load the image as a texture directly, instead of going through the canvas? — pailhead
I asked the author and that's the piece of information he gave me to help (he probably had his reasons to tell me to do so). Anyway, the code is alright. For whatever reason, I had to upload it on an online server for it to work. Locally, it just didn't display the texture even though the picture used did appear with a simple img tag (so it was not a file reference problem). Go figure. Thank you for your concern. — Bachir Messaouri

Bachir Messaouri Bachir Messaouri · Accepted Answer · 2018-11-30T03:57:08

0

votes

For whatever reason, it worked on a distant server, not locally. So, I guess it is solved.

Three.js and applying texture

1 Answers