Skip to content

Commit 4f06413

Browse files
fix(CSS3DRenderer): modify perspective transform to avoid browser issues (#308)
1 parent 6441de6 commit 4f06413

File tree

1 file changed

+3
-7
lines changed

1 file changed

+3
-7
lines changed

src/renderers/CSS3DRenderer.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ class CSS3DRenderer {
7070
let _widthHalf, _heightHalf
7171

7272
const cache = {
73-
camera: { fov: 0, style: '' },
73+
camera: { style: '' },
7474
objects: new WeakMap(),
7575
}
7676

@@ -101,11 +101,6 @@ class CSS3DRenderer {
101101
this.render = function (scene, camera) {
102102
const fov = camera.projectionMatrix.elements[5] * _heightHalf
103103

104-
if (cache.camera.fov !== fov) {
105-
viewElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : ''
106-
cache.camera.fov = fov
107-
}
108-
109104
if (camera.view && camera.view.enabled) {
110105
// view offset
111106
viewElement.style.transform = `translate( ${-camera.view.offsetX * (_width / camera.view.width)}px, ${
@@ -143,8 +138,9 @@ class CSS3DRenderer {
143138
'px)' +
144139
getCameraCSSMatrix(camera.matrixWorldInverse)
145140
: `scale( ${scaleByViewOffset} )` + 'translateZ(' + fov + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse)
141+
const perspective = camera.isPerspectiveCamera ? 'perspective(' + fov + 'px) ' : ''
146142

147-
const style = cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'
143+
const style = perspective + cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'
148144

149145
if (cache.camera.style !== style) {
150146
cameraElement.style.transform = style

0 commit comments

Comments
 (0)