fix(CSS3DRenderer): modify perspective transform to avoid browser iss…

…ues (#308)
pmndrs · Nov 3, 2023 · 4f06413 · 4f06413
1 parent 6441de6
commit 4f06413
Showing 1 changed file with 3 additions and 7 deletions.
diff --git a/src/renderers/CSS3DRenderer.js b/src/renderers/CSS3DRenderer.js
@@ -70,7 +70,7 @@ class CSS3DRenderer {
     let _widthHalf, _heightHalf
 
     const cache = {
-      camera: { fov: 0, style: '' },
+      camera: { style: '' },
       objects: new WeakMap(),
     }
 
@@ -101,11 +101,6 @@ class CSS3DRenderer {
     this.render = function (scene, camera) {
       const fov = camera.projectionMatrix.elements[5] * _heightHalf
 
-      if (cache.camera.fov !== fov) {
-        viewElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : ''
-        cache.camera.fov = fov
-      }
-
       if (camera.view && camera.view.enabled) {
         // view offset
         viewElement.style.transform = `translate( ${-camera.view.offsetX * (_width / camera.view.width)}px, ${
@@ -143,8 +138,9 @@ class CSS3DRenderer {
           'px)' +
           getCameraCSSMatrix(camera.matrixWorldInverse)
         : `scale( ${scaleByViewOffset} )` + 'translateZ(' + fov + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse)
+      const perspective = camera.isPerspectiveCamera ? 'perspective(' + fov + 'px) ' : ''
 
-      const style = cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'
+      const style = perspective + cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'
 
       if (cache.camera.style !== style) {
         cameraElement.style.transform = style