1

So I can't seem to get html to rotate with react-three/drei without it being extremely blurry. It won't blur at smaller sizes, but whenever I add more text it reaches a point where it just blurs up like below.

If there's a more standard way to rotate an html container, please let me know and i'll just that because i'm losing my mind here.

Code:

<Html
  as="div"
  position={[0, 0, 0]}
  rotation={[0, 0.4, 0]}
  transform
  style={{
    backgroundColor: "green",
    borderRadius: 4,
  }}
>
  <div>
     {"Testingsss"}
  </div>
...
</Html>

Without rotation: Without rotation

With rotation:

With rotation

Andrew Young
  • 684
  • 1
  • 13
  • 23

1 Answers1

0

Well I'm a bit late to answer this, but I have the same problem. I think by changing the scale property, which is a number (try small values like 0.2), or setting sprite={true}, might make things less blurry.

4b0
  • 21,981
  • 30
  • 95
  • 142
mohsen ameli
  • 11
  • 1