Not able to create and scale (from a side) dynamic 2d rectangle with mouse

[ghost]

I want to create a rectangle in based on 2 coordinates. The first coordinate is of the first user click, the second coordinate is where the user drags the cursor. I also want to be scalable on x axis (width constant) by dragging one of the perpendicular sides. I have not not found any fix yet. Please help as I am still noob in this.

[mattrossman]

I'd start by making a plane to receive click events, from this you can get the cursor coordinates in 3D space. Maybe you could share more information on what you have tried and what you are stuck on?

[ghost]

And for raycasting, it's intersectObjects function was giving error when I passed ref of plane

[mattrossman]

You don't need to call any raycasting functions yourself, just use the event handlers that R3F provides.
https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#events

The event passed to those handlers contains the raycast intersection data that you need.

Here is a simple sandbox that shows the math for making a rectangle span from the origin to the cursor position:
https://codesandbox.io/s/r3f-mouse-rectangle-540u7?file=/src/App.js

That should get you started on implementing the remaining logic.

[ghost]

Yea, It is of great help. Also, is there by any chance, there should not be rectangle at the start but only come when I click mouse and move. As, there can be many rectangle. And, any hint about scaling by dragging the edge

[mattrossman]

You can detect mouse clicks with onPointerDown and onPointerUp, I suggest you read the events documentation link I shared above. You can respond to theses events to set the corner positions. Everything you're trying to do can be accomplished by changing position and scale as shown in the sandbox.

[ghost]

okay