Matrix4 to CSS matrix3d without CSSRenderer

Questions
,
1

I’m currently trying to take a Object3D and convert it’s matrix to a CSS matrix3d so the CSS is on top of 3D object. The reason I don’t want to use CSSRenderer is because we’re hooking these elements into react and need complex interactions with the CSS. I’ve tried to strip the CSSRenderer down and take out the important parts and that seems to have given me

I’ve noticed both matrices are column major so it should be fairly straight forward but I’m having issues. I know there’s some y or z axis flip but I can’t seem to find a comparison of the CSS coordinate space to ThreeJS coordinate space

I’ve tried things like Object.modelviewmatrix flipping the y scale.
Following the CSSRenderer but I’m currently missing a detail since it’s not working
example of my CSS renderer here


css seems to be rotating the wrong way, and zooming in and out is incorrect, and positions are incorrect

Would greatly appreciate if anyone knows how to take an objects position in threejs and convert it to a CSS position on the DOM. thanks

2

Try this recent example by @PavelBoytchev
https://codepen.io/boytchev/pen/PoXrVVz

It doesn’t use CSS3DRenderer

It uses Vector3.project to convert a world coordinate into the cameras normalised device coordinate which can then be used to position the html label within the canvas dimensions.

2 Likes
3

this is all done in react, drei/Html. it goes so far that it can optionally embed html where 3d objects can be before and behind. the html is regular react, too. it is nested directly into the meshes and moves along.

<mesh>
  <boxGeometry />
  <meshBasicMateriial />
  <Html>
    <div>hello 👋</div>
  </Html>
</mesh>

if you use vanilla three in react instead of react-three-fiber, that would be a mistake. you’re loosing the largest eco system that threejs has. there are countless of components and helpers in drei and otherwise, all have react integration. the reason you struggle with css3drenderer is just that, integration, if you’re mixing a declarative world with imperative oop there can be no interop or understanding between the two.