Canvas doesnt resize properly in react

Questions
1

I have a problem with scaling canvas in react. By default it doesnt have any size property and that’s from image1. I need canvas to be full widht and height of it’s parent element but if I do that canvas is streching and that’s image2.
In html I didnt have problem like this and I could resize canvas based of it’s parent element without any problem, but the difference I saw is that html canvas has this:

canvas[Attributes Style] {
aspect-ratio: auto 1920 / 969;
}

But in react I dont have this property.

1
11413×739 3.73 KB

2
21407×733 9.04 KB

2

React uses HTML/CSS under the hood so everything is available there too. You can search how to use CSS with React, there are a lot of resources available.

3

I am familiar with react. That’s why I am asking, this should be displayed the same way. I am new to babylon so I am not sure what can happend behind the scene that I dont know.

4

Can you share your React project? It will be easier to tell what’s happening by seeing your code.

5

I just commited a project here.
All the code I use is in App.js
Since you could see the code, I would like to ask you another question wich makes me a problem.

I am dinamically changing active mesh which I put decal on, but whenever I change selctedFace whole mesh get resset and all decals just remove, it makes sense to work like that. But how can I make it change the active mesh but not to resset the whole mesh?

Thanks you for helping me.

6

You can put style attributes on your SceneComponent and the spread operator will put them on the canvas:
tempo/App.js at main · petrovic23/tempo · GitHub

Otherwise just edit the SceneComponent yourself.

7

What do you mean by “reset” the mesh? You mean you want to have the decals you applied before the change be on the new mesh? You can record the positions you applied the decals on and reapply them.

8

I am changing active mesh based on the selectedFace. If I put decals on my active mesh and then change active mesh, object will desapear in 1 sec and remove my previous decals.

I think nike is using babylon.I am here changing active mesh without that 1 second disapear (reset), I want that effect but with decals.
Is there a way to select active mesh from object more effectivly, if not what docs should I look at?

9

That’s actually working.Thanks

1 Like
10

What do you mean exactly by “select” here? If it’s picking, here are the docs Mesh Picking | Babylon.js Documentation (babylonjs.com)

11

By select I mean on click on those face images under the mesh, every of them has name which is the same as name in mesh object. I can select active mesh by the face image, but the problem I have now is that setState is refreshing whole component and canvas with it, so it removes all decals I have.
So I am now searching for a way to avoid re-render.