THREE.CSS3DRenderer does not respect THREE.PerspectiveCamera.setViewOffset

Describe the bug

I would like to use both the WebGLRenderer and CSS3DRenderer in an application, however that application calls “setViewOffset” to adjust the vanishing point of the drawing. This has the effect of moving the viewport as I desire, but the CSS3DRenderer layer does not shift.

To Reproduce

Please see the attached zip file.

THREE.js Bug Report.zip

Expected behavior

The setViewOffset should apply to the CSS3DRenderer.

Screenshots

This is what I expect:

This is what I get:

I have included a modified version of “CSS3DRenderer.js” that almost corrects the problem and which I used to generate the “good” image. It works by applying an additional transform to the domElement, like so:

				if (camera.view && camera.view.enabled) {
					const style = 'translate(' + (-camera.view.offsetX) + 'px,' + (-camera.view.offsetY) + 'px)';
					if ( cache.domElement.style !== style ) {
						domElement.style.transform = style;
						cache.domElement.style = style;
					}
				}

While this works when the CSS elements are at the center of the page, it works by shifting the entire parent DOM element and causes cropping of the CSS elements to happen on the edges of the screen when the camera is close up, as seen in this screen shot:

I tried to work the translation into the cameraCSSMatrix, which seemed like a better place to do this, but I could not get it to work right. I am by no means an expert in CSS transforms. I would love it if someone could propose a better fix and incorporate it into THREE.js

Platform:

• Device: Desktop
• OS: Windows
• Browser: Chrome
• Three.js version: dev

[Mugen87]

Reopening this when more users request the feature.

[yomotsu]

If we shift cameraCSSMatrix with view offset, CSS perspective-origin should be shifted too. (The default value of perspective-origin is 50% 50%, which means looking from the center)

e.g:

cameraElement.style.transform += `translate( ${ - _viewOffset.x }px, ${ - _viewOffset.y }px)`;
domElement.style.perspectiveOrigin = `calc( 50% - ${ viewOffset.x }px ) calc( 50% - ${ viewOffset.y }px )`;

see the result: https://jsfiddle.net/4cy5atvq/

---

However, if the camera is rotated, the above will not work.

https://jsfiddle.net/grky2hxc/

Because cameraElement is just a plane that is projected the scene, and perspective-origin will be used projection, I guess. So, cameraElement can’t shift with view offset.

---

I think the best way is adding one more div as the view.

└domElement (as viewport)
+  └viewElement
    └cameraElement

Then shift the viewElement with CSS translate 2d. -> https://jsfiddle.net/Lv4f25o8/

What do you think? @Mugen87 @mrdoob