Prevent canvas from refreshing on setState in react

Questions
1

I have a problem with the canvas which gets refreshed everytime I change a state. This makes all things put in canvas get refreshed, and remove all decals. I didnt have this problem in react-drei but I am using babylon now for a reason.
The only difference I have in the code is that in babylon I import mesh in a function in main component but in drei I import mesh in model component and place it in return and just mount it in main, which still is the same as function.
I just change the selectedFace which triggers state, and active mesh is changed and I can manipulate only with the active one, which works as expected in drei but not in babylon.
I am not sure how to change the active mesh without refreshing the canvas on setState. I am new to babylon so every answer would be helpful.

I have this breaf simulation here (everythink is located in App.js).
I am expecting results similar to this.

2

I would recommend using brianzinn/react-babylonjs: React for Babylon 3D engine (github.com)

1 Like
3

I can use useClick and useHover in the component but not in the function. I want to click on the image which is the function for every mapped element, also if I want to use useClick into onSceneReady to take the one of the meshes from mesh param array, I get the same error.
On this example useHover and useClick are changing state to true or false, I need to change state dinamically. I also tried wrapping functions with useCallback and useMemo like here, but canvas is still refreshing on every change, as yo can see on his live example.

Is there anyway to set param into useClick and call this function with differente values

4

What do you mean by “dynamically”? You can change the state to anything you want on useClick, it doesn’t need to be true or false. For example, you could set a color: flamboyant-ives-ncfmy0 - CodeSandbox

5

I wanted to say, I need to add onClick on the image and there I am passing useClick with the setState, but I cannot use useClick inside the another function. In this example I have boxRef which will wait for click on that mesh.
Would I be able to use ref on html elements to change the state with useClick?
Playing in this playground I didnt see it working.

6

You want the function that is called with useClick to be part of the state of the component? Why would that be necessary?

7

Because users should pick the face which are images, on that click I change selectedFace state.
So I would use useClick to prevent reload when user clicks on the image because I change state.

8

I think it would be easier for me to understand your problem if you made a simplified version of it on the sandbox. With simple meshes only.

9

There is my code. The main thing is, I removed images with buttons. So I am changing the face with setState, and I want that face to be active. Also the problem I have is that I cannot use state inside onSceneReady, you could see that it returns undefined everytime.
In this example you can see how on click on a html element active mesh is changed

10

In case to use useHover or useClick I need to pass meshes ref. In your sandbox code there is box with the ref in the return. How do I pass ref to a mesh if I use this docs. I dont put mesh in return here

11

Why would you use the babylonjs-hook if you’re also using react-babylonjs? The latter already has a Scene component that fullfills every need.

12

I really dont know, I am not familiar with babylonjs. I had been using three js before I started doing babylon because of some features which three doesnt have. I am now experimenting with everything I find. That’s why I am asking for help. I am working on a project currently which should work similar to this link, so any help abou it would be welcome.
What do you recommend to do? I would use only babylonjs-hook, but I didnt find way to import mesh.

13

Thanks for giving us more context, it helps a lot understanding your problem :smiley: About e-commerce experiences, there’s a very good resource on the docs that’s the “3D for e-commerce” tutorials: 3D for E-Commerce - Custom Experience | Babylon.js Documentation (babylonjs.com) that goes through all the steps on building a showroom website for a product, with configurations included, and it’s done with React. I highly recommend reading through it as it has a lot of useful information. :slight_smile:

1 Like