Abnormal behavior when scaling the scene or the controller

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.

Start by reproducing the scaling behavior with and the viewport-width behavior with the useThree hook, then compare scenes with and without and . Check the reported entry points, including and Drei's . Done means scaled controllers behave normally and useThree viewport width no longer accumulates across frames.