From 4f064134216afe6d927172b97c37ef7ff9bb84a1 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 3 Nov 2023 02:32:13 -0500 Subject: [PATCH] fix(CSS3DRenderer): modify perspective transform to avoid browser issues (#308) --- src/renderers/CSS3DRenderer.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/renderers/CSS3DRenderer.js b/src/renderers/CSS3DRenderer.js index 100b3395..cdeb32e8 100644 --- 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