Transforming DOM elements with THREE.Object's rotation?

Questions
1

Hi, I want to extract the rotation of my object into a matrix and use the matrix to transform some DOM element using CSS matrix3d().

I am able to extract the rotation, and I am be to target my DOM element that I want to transform.

However, I am having trouble actually applying the matrix transform on to my target DOM element.

Can someone help me find out what I am doing wrong here?

Code example:

2

You may need to hit refresh on the example page

image

3

Try simply using CSS3DRenderer. It takes care of all the local, world, and projection transformation matrices for you.

You can see an example here, all the elements on the screen are standard <div>s with CSS 3D transformations applied.

2 Likes
4

Thank you! Turns out that the example wasn’t working because I had an extra set of unnecessary single quotes inside my CSS for matrix3d(). But before I found out about that, I actually tried out CSS3DRenderer and it worked like a charm!