FIlpped Text on My Dynamic Texture Using Fabric.js

Questions
1

Hello, I have some problems regarding dynamic textures using fabric js. I want to create a configurator that links fabric js ‘2D canvas and babylonjs’ 3D canvas. But when I add text, it is reversed. But when I insert the image, the image is normal and not reversed like the text that was added. Does anyone know the solution to the problem I face? Thank you

2

While you may try flipX or flipY at your text object at Fabric.js before passing to 3D - JSDoc: Class: Object - for Babylon you can use uScale = -1 or vScale = -1 for your dynamic texture with the text.

2 Likes
3

Thank you, I just solved the problem. I changed dynamicTexture.update(true) to dynamicTexture.update(false).

4

I’m sorry, If you don’t mind, may I have another question? I have successfully connected the 2D canvas and 3D canvas, but it looks like they scale differently (look my video). Do you have any suggestions / solutions to solve these problems? Thank you very much

This is the code :

        BABYLON.SceneLoader.ImportMesh("", "assets/model/", "sunchair.glb", scene, function(mesh) {
        scene.createDefaultCameraOrLight(true, true, true);
        var meshOne = mesh[1];

        var myGoodMat = new BABYLON.StandardMaterial("material", scene);

        var texture = new BABYLON.DynamicTexture("texture", canvasSecond, scene, 2, 2, true, false);
        myGoodMat.diffuseTexture = texture;
        myGoodMat.roughness = 1;


        meshOne.material = myGoodMat;
        scene.onBeforeRenderObservable.add(() => {
            texture.update(false);
           });

        });
6

Seems that proportions are lost somewhere.
How it will look like if you’ll change the sunchair to simple plane?

7

Screenshot_8
Screenshot_8499×819 20.3 KB

The 2D canvas and 3D canvas (plane) are the same scale, although it looks like one of the axes is reversed. Looks like I have a problem with my 3D sunchair model. So, I will check my 3D sunchair model first, do you have any suggestions for me? Thank you

8

It could be that the mesh in sunchair model has some unproprotional scaling applied.

9

Thank you, I was remaked the model, and it is work. I thought it was my code is the problem before I realize the model is the problem. Once again thank you so much for your help :pray::grinning_face_with_smiling_eyes:

1 Like