Implementing Drag-and-Drop Window Positioning on a Wall Using React Three.js

Questions
1

I am planning to create a window on a wall.
The position of the window can be controlled using drag and drop.
The window should not be draggable beyond the boundaries of the wall (e.g., when the window’s position exceeds the wall’s length).
Additionally, the window must always remain within the wall’s dimensions.

I am unsure how to implement this functionality using React and Three.js.
If you have example code, Please provide me.
https://shedview.moderngardenrooms.com/
This is the website that shows me the results I want.
Thank you.

1 Like
2

Hi there,

i think they are using csg to cut the holes into the shed.
Here is an example of doing it in React-three/fiber.

https://codesandbox.io/p/sandbox/y52tmt

I dont know about the boundaries, hope that helps

3

Hello kalabedo, thank you for your message and example code.
If we use CSG many amounts, It can cause lazy loading speed.
I don’t wish it.
I think we could use the physics of three.js. :pray: