How can I make Css3D and WebGL objects coexist inside of a same tree of transforms?

Questions
,
1

Hello everybody,
I’m having a problem with quite some time now. I want my Css3D objects and my WebGL objects to coexist inside of a same tree. The problem is that the Css3DRenderer and the WebGLRenderer don’t use the same coordinate system. So I can’t get them to properly align. I tried adding the transform that allows to go from one coordinate system to the other, corresponding to the group2 below, above my root node. I then attached the css scene above that transform and the gl scene below. That didn’t work. I tried many combinations of solutions like the one above that didn’t work as well. Could somebody please tell me the proper way to achieve this mixing of objects. Thank you.

var group2 = new THREE.Group();
group2.position.x = $wnd.innerWidth/2;
group2.position.y = $wnd.innerHeight/2;
group2.position.z = -$wnd.innerHeight/2;
group2.scale.x = $wnd.innerWidth/2;
group2.scale.y = -$wnd.innerWidth/2;
group2.scale.z = $wnd.innerWidth/2;
2

Uh? How so?

3

Css3d coordinate system has its origin at the top left of the view, with one pixel corresponds to the unit, and webgl coordinate system is centered in the middle of the view, with half the view width as a unit no?

4

Can you add a working example of your problem? I’ve ussed CSS3D objects plenty of times, and I’ve never run into the issue you’re describing. The coordinate systems are always the same.

2 Likes