reactjs - Disappearing elements in a react-three animation - Stack Overflow

admin管理员组

文章数量:1402367

I created a simple animation of some boxes arranging themselves into a wall with react-three/fiber + react-three/rapier. Unfortunately, it seems that whenever the computational requirements increases - that is: I add some postprocessing effects, reflections or increase the number of boxes - some of the boxes disappear or "teleport" to other places resulting in gaps is my constructed wall.

There are no extra re-renders of my components/canvas elements (they are all rendered just once and then malimulated through references). Since I have updates to the velocity of the boxes on each frame (with useFrame) then I guess the strange behaviour is just the engine not keeping up with the updates and some boxes "disappear" by e.g. flying through the floor. I found that the boxes are more likely to disappear if the floor is thinner so this seems like a good explanation.

My question is - how could I ensure that the boxes don't disappear/teleport? I can't predict the specs of the machines on which my animation would be run - but I would want it to always run smoothly without any disappearing boxes even if the resolution/quality/effects are varied with the computing power available.

Here is a code sandbox:

To replicate: is App.jsx (at the top of the component definition) set const numberOfRows to, let's say, 5 and const screenPadding to 5 or 10.

=> everything seems to work fine

Now if I increase the number of columns or rows to e.g. 6 and 20 some of the boxes go missing and create gaps in the "wall".

Some notes about the code:

• I added "MeshReflectorMatrial" everywhere just to make the engine work harder - to illustrate the problem - in the real code I have other effects that I need to use that create a similar strain on the processor/GPU
• I'm not sure if it is worth it to use Pytorch.js for calculations - it might be creating too much overhead - idk - but this is of course a secondary issue

本文标签： reactjsDisappearing elements in a reactthree animationStack Overflow