Css3d transformations

Questions
1

One question.

I am trying to make my own 3d label system and I want to make my labels draggable.

My problem is that when I move the labels, depites the matrix of my cssobject|element and my plane mesh are equal, the plane is not really moved.

I am getting the matrix from csss3dobject.element.style.transform property, but it seems that I am missing something. The resize works fine.

Here a example: Just doble click on the scene to switch to label context and try to click in a label and move it.

http://jsfiddle.net/wc5obptz/

Here some screenshots:
Here in CSS3D context (1 dbl click)
image

And here again doing a dblclick to switch to glScene context:
image

Is there any way to track this transformations to fit plane Mesh and the cssObject3D projected in it?

Many thanks.

2

You could assign the matrixWorld of the scene plane to the object for the css3d renderer and set matrixAutoUpdate to false for it, that saves updating the same matrix twice and you don’t have to synchronize it.

Edit: you’re moving the dom element and not the css3d object btw

This saves your rather expensive updateLabels function, for the drag & drop take a look at the examples for d&d of meshes, so you only deal with your planes.
http://jsfiddle.net/Fyrestar/890xgzf7/

3

Hi .

You are fully right, I am moving the dom element, not the css3dobject itself.
That was the reason that I was trying to obtain the transformation matrix from the dom object through
csss3dobject.element.style.transform.

The point is that it seems that those transformations are not tracked in the dom element.

Maybe what I am trying makes not sense.

So mean that I should move the mesh plane and not trying to move the dom element?
I can do it by extending the plane and proyect a ray, but I thought that this solution was easier.

By the way, in your example the problem remains and resizing actions don’t update the plane object.

Sorry if I ama bit confussed by your answer, I know that you are very busy withother more important topics and I don’t want to bother you. Just tell me if my second aproach could be a valid solution.

: )

Many many thanks for tour time.

Best regards

4

Hi again.

I think I can track these position displacements in my dom elements using properties offsetLeft and offsetTop and adding these displacements in my mesh planes.

I am making now a test.

:slight_smile:

5

It works.

:slight_smile:

1 Like
6

Yes the fiddle only improved synchronization. I still wouldn’t recommed any css separate transformations but if it works for you that’s fine i guess :+1: