CODEWITHSUNDEEP
javascriptcss3dthree.js
J. Barca
J. Barca

Reputation: 555

Compensate for browser zoom in Three.js CSSRenderer

I'm working on a project in three.js using the CSSRenderer and I've been told that I need to make it display properly when the browser's zoom is not 100%. From what I can tell:

I thought maybe if I could detect the zoom I could do a css zoom in the other direction to compensate, kindof like it was suggested in Vijey's post here: Changing the browser zoom level

Given this, it seems impossible to display the three.js scene properly on non- 100% zoom, and I couldn't even display a warning telling the user the app will not work properly with the browser zoom scaled. Can someone prove me wrong on this ? Does anyone know if there's anything being done to solve this issue ?

Upvotes: 2

Views: 997

Answers (1)

Mark Lundin
Mark Lundin

Reputation: 327

Three.js applies transformations using the matrix3d() function. There is a known issue with Chrome whereby 3d transformations using matrix3D do not scale correctly under browser zoom.

You can see an example of the bug here. If you change the zoom level you'll notice the boundary between the red and blue boxes changes.

The solution is to apply the transformation using the rotate, translate and scale transformations independently. This method avoids the Chrome bug and scales as expected (boundary between boxes is consistent across zoom levels).

Here is an updated CSSRenderer that uses this technique and scales correctly.

Upvotes: 4

Related Questions