Greetings dear community.
I really need help understanding what’s going on when moving objects around the scene.
I’ve attached the code (react-three + mui + typescript):
https://codesandbox.io/p/sandbox/r3f-positioning-3y8znz
What is the point?
I use the Mobx state manager.
It stores all the information about the objects added to the scene, including positioning.
I need to be able to move any object both with the mouse (DragControls) and by specifying coordinates in the form, and then write the global position
object into a state. A global state, because you need a common coordinate system for all objects.
Form fields appear when you click on an object, but only if 1 object is selected, not several.
So, there are several related problems:
Problem 1. If you immediately set the coordinates through the form, the object moves correctly.
However, if you first move the object with the mouse, then when you try to move it through the form, the object behaves
incorrectly, i.e. the position does not correspond to the coordinates. There is also an additional problem. If you deselect an object
(by simply clicking on the scene) and then select it again,
then you can see that the previously saved coordinates are overwritten by the previous ones.
Problem 2. If you move an object with the mouse and then release the mouse, the object will additionally move to an unexpected position,
And it will not remain in place. There’s something to do with global positioning, but I can’t figure it out.
In general, how to make the shape and movement of the mouse friends so that they always work out in the same way?
I’ve read the whole Internet, used both updateMatrixWorld() and any other recipes, but I’m doing something wrong.
Please help me figure it out, but I can’t understand.