Three.js: Orbit control in cssRenderer not work

[edboxin]

Thank you for support.

The controls not work when use orbit controls without canvas or webgl renderer. I need to use the compiled version for cssRenderer only, but i need put this lines:

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Example working
http://jsfiddle.net/edboxin/vmypaqt2/

Not working
http://jsfiddle.net/edboxin/pm080m2s/

Why orbit have troubles with only cssRenderer?

[WestLangley]

Hmm. Passing renderer.domElement to the controls fixes the fiddle, although we do not seem to require doing so in http://threejs.org/examples/css3d_sandbox.html -- even when TrackballControls. is replaced withOrbitControls.

controls = new THREE.OrbitControls( camera, cssRenderer.domElement );

Updated fiddle: http://jsfiddle.net/vmypaqt2/1/

three.js r.71

[edboxin]

Ohhh WestLangley, Thank you so much !!! Quick and easy.

[Mugen87]

I think the problem is related to the following line of code in OrbitControls.
https://github.com/mrdoob/three.js/blob/b8e9e64a64a272d32b9c8177938645354f442111/examples/js/controls/OrbitControls.js#L464
If we don't pass cssRenderer.domElement to the constructor, scope.domElement is the document element of the HTML page. So scope.domElement.body is assigned to element in the above statement.

The problem is that the container element of CSS3DRenderer has a position value of absolute which means, the height of scope.domElement.body element is zero. Because of this, subsequent access to element.clientHeight returns a value of 0 which breaks the controls.

I'm not sure now if this is a problem of OrbitControls or CSS3DRenderer :thinking:

[mrdoob]

Oh. Interesting finding... It's CSS3DRenderer problem.

[Mugen87]

Okay. Removing the following code from the fiddle seems to solve the problem.

cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;

http://jsfiddle.net/vmypaqt2/29/

So it's not a problem inside CSS3DRenderer. But i've noticed that some examples set this style although it's not necessary. I guess you only need position:absolute if you want to overlay the DOM element of CSS3DRenderer over a canvas (like in css3d_sandbox).

[Mugen87]

Do you think we can close the issue now? I would say the code in the fiddle caused the actual problem.