Real-Time UV mapping from html5 canvas (Fabric.js)

Thanks for the prompt response.
I think fabric.js is a better choice in terms of already available functionality within it, especially because I want to keep configurator/editor seperate from the v3d app.

Looking at this test app https://www.soft8soft.com/topic/replacing-textures-rather-than-materials/page/5/#post-8814

I want to try something similar but with below difference:

1. Update changes from fabric canvas to the 3d model in real time (Not on click)

Could you please help with a sample code/puzzle implementation to achieve this?

Thanks again!

Hi Yuri,

Is it possible to load mulitple scenes sharing same object. Idea is to work/customize a model in one scene and at the same time it should update linked object in other scene.
For example, in blender we can add a new scene with linked object.
So, can we display two scenes at the same time using puzzle?

Thanks

Hi Yuri,

I have been trying long to get it done but still failed to do so.
Would appreciate if you please help regarding below:

1. Fabric Canvas to 3d model
As of now, I am able to apply material from fabric canvas by using below code in my app’s .js run code block. Problem is that it is only running once. If I change anything on the fabric canvas it does not update on 3d side in real-time.

function runCode(app) {
    // add your code here, e.g. console.log('Hello, World!');

    var box, fabric_canvas, texture, material
    fabric_canvas = parent.document.getElementById('ib_main_canvas');
    box = app.scene.getObjectByName('outer_cover');
    texture = new v3d.CanvasTexture(fabric_canvas);
    texture.minFilter = v3d.LinearFilter;
    texture.format = v3d.RGBAFormat;
    texture.anisotropy = 16;
    material = new v3d.MeshBasicMaterial({ map: texture });
    box.material = material;
    box.material.map.needsUpdate = true;
    app.animate();
}

2. Direction/face of applied material

If you see attached picture. Applied material is shown in opposite direction (Inverted inside).

Thanks!

Yuri Kovelenov wrote:

you can add this code inside an externally registered function (according to method #2), and call it every time you need it to be called.

I already tried by putting it in external interface. Function is available in puzzles and can be triggered with user interaction.
But this function is not available outside of the puzzles.

Is there any way to call it from outside? Like from my fabric UI JS file where I am dealing with fabric canvas?

go4site wrote:

Direction/face of applied material

you can try scaling (by factor -1) or rotating your canvas to make it right

I think I could not explain it properly. Problem is with the orientation (flip) of the texture. If you try to read text on both sides. You will see the difference.