Moving threeJs Object by BUTTON (Click)

[sayedulkrm]

I'm a beginner at Three JS and need some help with my code. Please, Could you help me for a second?

1| Button1 "increase + 1". After Clicking Button 1, ROOM1 will move to ROOM2 Location and so forth. Room8 will move to ROOM1 position.

2| Button2 "increase + 2". After Clicking Button 2, ROOM1 will move to ROOM3 Location and so forth. Room8 will move to ROOM2 position.

This is my Code in Sandbox.

https://codesandbox.io/s/threejs-code-3rlk8b?file=/src/components/PartOne.js

Please help me.

Thank You So much for Your Precious Time

[coada]

Hello! This won't be the complete answer, but gives you a way to move forward.

Your room components take properties and applies it to their parent group - this is great and will allow you to pass additional properties from their parent, PartOne.js. Here we are interested in passing the position property. If you don't set it yourself it will default to [0, 0, 0]. Your room models seem to already have their positions adjusted, so you will have to take this into account to offset for it.

Your rooms seem to be 3.6 wide on the x-axis and 2.7 high on the y-axis, so to set RoomOne at the same position as Room2 you can update PartOne.js:
<RoomOne position={[-3.6,-2.7,0]} />

Your next step is to use React.useState to keep track of all your positions, in an array for example:
const [positions, setPositions] = useState<[number, number, number][]>([[-3.6,-2.7,0]]);

and then pass the position data to your room:
<RoomOne position={positions[0]} />

To update the positions, write function that then iterates through the positions and sets a new value to them. Your rooms follow a pattern so you could apply a formula/function to compute the new positions:

function onButtonClick() {
  ...
}

and then call this function depending on the event you want it to trigger on (a HTML button with an onClick event, or a specific keyboard/mouse button click event, etc.).

Best of luck"

[sayedulkrm]

Thank You So Much @coada but I got the answer :)