# Matrix4 to CSS matrix3d without CSSRenderer

**URL:** <https://discourse.threejs.org/t/matrix4-to-css-matrix3d-without-cssrenderer/58016>\
**Category:** Questions\
**Tags:** matrix4, math\
**Created:** [November 10, 2023, 5:13pm UTC](https://discourse.threejs.org/t/matrix4-to-css-matrix3d-without-cssrenderer/58016 "2023-11-10T17:13:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kilroymyboy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kilroymyboy/32/18387_2.png) [@Kilroymyboy](https://discourse.threejs.org/u/Kilroymyboy)\
**Post date:** [November 10, 2023, 5:13pm UTC](https://discourse.threejs.org/t/matrix4-to-css-matrix3d-without-cssrenderer/58016/1 "2023-11-10T17:13:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 10, 2023, 10:38pm UTC](https://discourse.threejs.org/t/matrix4-to-css-matrix3d-without-cssrenderer/58016/2 "2023-11-10T22:38:58Z")

</div>

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

It doesn’t use CSS3DRenderer

It uses [Vector3.project](https://threejs.org/docs/?q=css#api/en/math/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.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 11, 2023, 8:49am UTC](https://discourse.threejs.org/t/matrix4-to-css-matrix3d-without-cssrenderer/58016/3 "2023-11-11T08:49:06Z")

</div>

this is all done in react, [drei/Html](https://github.com/pmndrs/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.

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

```

> **[Mixing HTML and WebGL w/ occlusion - CodeSandbox](https://codesandbox.io/s/9keg6)**
>
> Having HTML and WebGL in the same scene with the addition of occlusion.

> **[The three graces - CodeSandbox](https://codesandbox.io/s/0n9it)**
>
> Experimentaing with lights and shadows.

> **[Bouncy watch - CodeSandbox](https://codesandbox.io/s/qyz5r)**
>
> Custom springy controls using use-gesture and react-spring.

> **[Occluded HTML (forked) - CodeSandbox](https://codesandbox.io/s/wp9mkp)**
>
> Shows how to use react-spring mount/unmount transitions, soft-shadows and AO.

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.