How does the troika 3d text cliprect work?

[dsimonow]

Hello everyone.
I am currently using troika 3d text but in r3f.
It is mostly a wrapper so the cliprect behaviour shouldn't be affected but r3f could have weird interactions with it.
I am trying to replicate the scrollbarfascade functionality.

My issue is, I don't understand exactly how to manipulate cliprect.
In the description it sounds like a rectangle that is set and everything outside will not be rendered.
But it seems as if they are percentage based and therefor the values are different for each length of a text.

Gonna attach a few images.
They are the same object that gets different text.
With clipRect={[-10, 3, 10, 28]}
In all of them the clipping gets applied.
The text is actually as long as the white boundingbox around the text.

Is that behaviour normal and how do you solve this or is this something r3f causes?
Are the numbers percentages or how should I read them?

Thank you!

[lojjic]

Hmm, no the values should be absolute units in the same coordinate system as the text itself, not percentages. I can't explain the behavior in your screenshots off the top of my head, would you be able to put together a codesandbox or similar I could look at in action?

[lojjic]

Oh, wait, I think that behavior makes sense if your anchorX/anchorY are at the center of the text block (I think that may be drei's default?) The clipRect values are in the coordinate system of the text, meaning they're relative to the [0, 0] anchor position. So with your clipRect with min-y of 3, if your anchorY is in the center, that clips it 3 units above the center.

[dsimonow]

this is the answer. Thank you so much!

I have another question about this.
I got it working as I wanted with anchorx/y at 0.
With clipRect={[0,-12,20,0]}.
Spanning from left to right with minX=0 and maxX=20
and for Y from the top maxY=0 down to minY=-12.

as Example this is: clipRect={[0,-12,20,-5]}
with minY showing the first 12(pixels?) and maxY clipping the top 5.
This is the correct way how it works?
Since 0,0 is basically top left. So anything Y becomes a negative Value?

[lojjic]

That sounds correct to me. Positive Y is up in ThreeJS's coordinate system.