Scale by corners using mouse in r3f

Questions
, ,
1

I wrote the function by referring to this article.
article

                onPointerDown={(e) => {
                    e.stopPropagation();
                    if (visibleBounds) {
                        setIsDrag(true)

                        setStartPointClick(new Vector2(e.point.x, e.point.y))
                    }
                }}
                onPointerMove={(e) => {
                    e.stopPropagation();

                    if (visibleBounds && start && isDrag) {
                        const boxSize = new Vector3()
                        const center = new Vector3()
                        visibleBounds.getSize(boxSize)
                        visibleBounds.getCenter(center)


                        const dX = e.point.x - startPointClick.x
                        const dY = e.point.y - startPointClick.y

                        const sX = 1 + 2 * dX / boxSize.x
                        const sY = 1 + 2 * dY / boxSize.y

                        boxRef.current.scale.set(
                            boxRef.current.scale.x * sX,
                            boxRef.current.scale.y * sY,
                            1)

                        setStartPointClick(new Vector2(e.point.x, e.point.y))
                    }
                }}

But it didn’t work correctly. I didn’t understand that article. Any advice please?

code sandbox

2

Can you create a codesandbox with issue? Maybe that will make easy for someone to help you.

2 Likes
4

code sandbox

Created.
See the example. As you can see, the border only resizes in an odd direction.

5

I ran into a few problems.

  1. It works only in the 1st quadrant.
  2. The border line position is incorrect.
  3. It doesn’t zoom in/out in the direction you’re pulling the point.

Realizing that it is difficult for me to solve it alone.
Any advice or help would be appreciated!

6

I couldn’d understand your codestandbox tbh,
I made this minimal example, this might help you.

1 Like
7

It’s been helpful enough for me. thank you