Three.js, setting devicePixelRatio for rendering CSS3DRenderer

Question

I would like to render a <div> (in my case it's one of the ECharts) with Three.js CSS3DRenderer and combine it with WebGL content, but with fixed width and height, the rendering quality is not good when zooming in as it was rendered with fixed width and height. Therefore, I wonder is there a way to increase the rendering resolution when rendering the <div> with CSS3DRenderer (NOT the devicePixelRatio of <div>)? Thanks in advance!

Mugen87 · Accepted Answer · 2022-05-31 08:44:10Z

1

I wonder is there a way to increase the rendering resolution when rendering the with CSS3DRenderer

No, that is not possible. The renderer just transforms HTML elements. In this context, you as a developer have no influence on the element's resolution. CSS3DRenderer.setSize() only allows to define the size of the renderer's container element.

If you need charts that stay sharp even when zooming in, you might want to rely on ECharts's SVG rendering.

answered May 31, 2022 at 8:44

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js, setting devicePixelRatio for rendering CSS3DRenderer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related