Hello,
I tried to use ECharts charts in Three.js with CSS3DSprite, but the pie chart becomes blurry once it’s too close to the PerspectiveCamera. ECharts charts use svg rendering method, and what’s weird in my case is that there exists a “threshold distance” between the pie chart and the camera, and pie charts become blurry abruptly after a certain point, not gradually. The screen record also shows the behavior. Could anyone suggest some potential fixes for this issue?
I tried to construct an example with minimum efforts so maybe that’s why, but this warning does not show up in one of the react website I’m working on, and the behavior is the same.
Yes, that only happens after dragging the interface (zooming in/out only does not trigger this issue, but it is rare to not drag the interface and move around in most of the use cases)
I’ve also found a weird behavior (which may not be that relevant), when using CSS clip-path with div, it rasterizes immediately in CSS3DRenderer, but if you render it normally on html it works fine. Here is another demo (I really should learn how to use Codepen/jsfiddle soon, at this point please bear with me )
One solution was to scale up you chart pre-rasterization to compensate for the zoom-in. Still trying to figure out what is causing the pixelation. The element is clearly an SVG with a simple matrix transform applied. I see no reason for the pixelation, so weird.
)