Abnormal behavior when scaling the scene or the controller

[LrLamonier]

I have had issues with scaling the <Ecctrl /> component. If I scale down, it is as if the forces are too strong and the character is blasted into infinity or, if it spawns a little above a surface, it bounces a few times until it stops.

Is it possible to uniformly scale everything so that the controller behaves normally when changing the scale of the scene? Or a parent, or the component itself.

Another thing that I noticed is that the presence of the controller affects the readings from the useThree hook.

To see this behavior you can use the following custom hook:

export default function useViewport() {
   const width = useThree((state) => state.viewport.width);
   // const { width } = useThree((state) => state.viewport); // destructuring width from viewport yields the same result
   console.log(width);
}

In a scene without a <Ecctrl /> component, resizing the viewport prints the following in the log:

It is possible to observe the width, in Three units, changing.

However, when there is a <Ecctrl /> in the scene, the following happens:

It seems the width, that is coming from useThree is added to the one from the previous frame.

My <PlayerController /> component setup is:

<KeyboardControls ...>
   <Ecctrl
      name="player-controller"
      ref={playerRef}
      position={[...]} // initial position
      animated
      // intersection callbacks
      mode="FixedCamera"
   >
      <EcctrlAnimation ...>
         <group> // I need this group to get some data
            <Character /> // just a group with a skinned mesh
         </group>
      </EcctrlAnimation>
   </Ecctrl>
</KeyboardControls>

To pin down the source of the bug, I commented out, in sequence:

1. <Character /> - error
2. inner <group/> - error
3. <EcctrlAnimation/> - error
4. <Ecctrl /> - normal behavior
5. <KeyboardControls/> - normal behavior

No matter where, in the scene tree, I use the hook, the results are the same.

Then I had the idea to run the hook on another, so to speak, tree. I used the Drei's <View /> component and still got the same results.

On top of all of this, if anyone has an advice or an experience to share regarding responsiveness, It'd help a lot.

[clicktodev]

please share a reproducible repo. preferably if you can reproduce it with the default example app

[LrLamonier]

I did it. Tried it using the example code and it all works. No bug whatsoever. I am using Next, so I created a blank project using the version 14.2.23, which still uses React 18. I've seen other react three packages having issues with React 19, so I'm staying in the previous release.

I started adding the project pieces one by one and so far I have not yet encountered the bug.

Sadly I do not have neither the time nor the resources to investigate further. But am keeping an eye on changes so if it breaks again, I will know where it happened.

Thank you anyway.