CSS3DRenderer: Fix positioning bugs in Chrome and Firefox

donmccurdy · Oct 20, 2023 · 4b97cdc · 4b97cdc
1 parent 7f351a0
commit 4b97cdc
Showing 1 changed file with 3 additions and 9 deletions.
diff --git a/examples/jsm/renderers/CSS3DRenderer.js b/examples/jsm/renderers/CSS3DRenderer.js
@@ -95,7 +95,7 @@ class CSS3DRenderer {
 		let _widthHalf, _heightHalf;
 
 		const cache = {
-			camera: { fov: 0, style: '' },
+			camera: { style: '' },
 			objects: new WeakMap()
 		};
 
@@ -129,13 +129,6 @@ class CSS3DRenderer {
 
 			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
@@ -166,8 +159,9 @@ class CSS3DRenderer {
 			const cameraCSSMatrix = camera.isOrthographicCamera ?
 				`scale( ${ scaleByViewOffset } )` + 'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
 				`scale( ${ scaleByViewOffset } )` + 'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
+			const perspective = camera.isPerspectiveCamera ? 'perspective(' + fov + 'px) ' : '';
 
-			const style = cameraCSSMatrix +
+			const style = perspective + cameraCSSMatrix +
 				'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
 
 			if ( cache.camera.style !== style ) {