CSS3DObject looks pixelated depending on camera angle

Questions
,
1

When using the CSS3DRenderer with CSS3DObjects, sometimes HTML elements become pixelated depending on the camera angle.

It happens on both my own projects and Three.js examples, like the periodic table one: three.js css3d - periodic table

I have attached a comparison image: left is how it should look like, right is how it looks pixelated.

pixelated
pixelated908×638 69.7 KB

I’m using Chrome Version 104.0.5112.79 (Official Build) (64-bit)

How can this problem be solved?

2

You might want to try if using the CSS font smoothing properties help.

Apart from that, I’m not aware of another solution.

1 Like