Three.js: CSS3DRenderer not compatible with OrthographicCamera

[mhoangvslev]

Description of the problem

CSS3D is not compatible with CombinedCamera and Orthographic Camera.
There is a workaround which is use CSS3D with PerspectiveCamera in PerspectiveMode and with CombinedCamera in OrthographicMode.
With PerspectiveCamera, everything works perfectly. However with CombinedCamera, the CSS3D transformation is not synchronized with 3D Objects transformation: therefore I have to transform it manually for preset positions (Top, Bottom, Right, Left, etc.) and users could not pivot the scene.

Three.js version

• [x] Dev
• [ ] r85
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[mrdoob]

I don't think CSS3D supports orthographic projection.

[mhoangvslev]

From what I understand, CSS3D is just 2D element that could be "deformed" to simulate 3D transformation.
Does it really matter if it was orthographic or perspective camera? Maybe it is the way to deform correctly an element.
I tried to find the mathematic link between CSS3D transformation and camera position but no success.

[mrdoob]

From what I understand, CSS3D is just 2D element that could be "deformed" to simulate 3D transformation.

Maybe there is a way. Please, continue studying the subject and let me know if you find a way 🙂

[mkarnicki]

Hi, I'm also interested in this. What is the 'CombinedCamera' mentioned in the issue description? Thanks!

[Mugen87]

CombinedCamera has been removed since a while: #12184

[Mugen87]

Thanks to @yomotsu this can be closed now. Support for orthographic camera was added with R92.