Closed edboxin closed 6 years ago
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
Ohhh WestLangley, Thank you so much !!! Quick and easy.
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:
Oh. Interesting finding... It's CSS3DRenderer
problem.
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
).
Do you think we can close the issue now? I would say the code in the fiddle caused the actual problem.
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?