CODEWITHSUNDEEP
three.jsreact-three-fiberreact-three-drei
Andrew Young
Andrew Young

Reputation: 734

Html blurry on rotation: react-three/drei

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

Upvotes: 3

Views: 835

Answers (1)

mohsen ameli
mohsen ameli

Reputation: 11

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.

Upvotes: 0

Related Questions