go4site

Hi Yuri,
Thanks. I will give try to global namespace.

Hi Nick,
Really appreciate your help. Yes, I was able to fix flipping issue by using texture.flipY = false; just a moment before seeing your post… :)

fabric_canvas.on("after:render", function() {
     box.material.map.needsUpdate = true;
 });

Let me give it a try and let you know with the result.

Thanks again!

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!

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!