Canvas Texture Set up

06 February 2019 01:15

#24284

posts: 3

Hey there, I am attempting to make a web application that takes uploaded photos and places them on a model of a T-shirt, the end goal is eventually to use it as a market place feature. I have the web player working and understand how to export the files, but unfortunately, no matter which way I set up the tex_canvas it just doesn't grab it. The error says "B4W ERROR: Object must be type of mesh." I have downloaded the example blender file online and tried to match the settings, but I am obviously missing something.

My code :

    function load_data() {
        var shirt = m_scenes.get_object_by_name("Shirt");
        var ctx_image = m_tex.get_canvas_ctx(shirt, "tex_canvas");

        if (ctx_image) {
            var img = new Image();
            img.src = APP_ASSETS_PATH + "earth.jpg";
            img.onload = function () {
                ctx_image.drawImage(img, 0, 0, ctx_image.canvas.width,
                    ctx_image.canvas.height);
                m_tex.update_canvas_ctx(shirt, "tex_canvas");
            }
        }
    }

attached is the work I have done, and the original 3ds file I am using. If you can't tell I am trying to get the canvas on the Illustration portion

06 February 2019 01:21

#24285

KodiakJack

posts: 3

Any advice on how to get uploaded photos to lay over the regular t-shirt color(think something like how sprite sheets work, where just the base image is placed), switching the t-shirt color through an interface, or really any other advice is also appreciated!

06 February 2019 20:08

#24292

Blend4Life

posts: 223

You get the error because in the first line you declare "Shirt" as the mesh object, but your mesh object's name is "T-Shirt". "Shirt" is just an Empty to which the mesh is parented.

Oh, and by the way, if you (only) want to replace an image texture on a model (such as putting a photo on a shirt as in your case), you don't need to use the canvas texture type. You can simply use a material with an image texture and then change the image source dynamically with m_tex.replace_image(). An example is the table cloth demo where the table cloth is changed.

The canvas texture type is for cases where you want to draw stuff on the texture, such as text (i.e. letters with a TTF font), lines, patterns etc. with the HTML canvas draw commands. This is why the canvas texture example says "Hello World!". It is literally printed on the texture during runtime. Of course, that might be a thing for you too (user can place witty quotes on his shirt etc).

07 February 2019 00:02

#24296

KodiakJack

posts: 3

Thank you! That fixed the issue. And thank you for that information on how I should handle it, I assumed canvas texture from my game design experience with UIs.

Forum

Canvas Texture Set up

Please register or log in to leave a reply.