How to drag a css2Object attached to a 3D object with the mouse?

[CharlieWhite]

Hi everyone,

What I’have done :

1 - With a drag event attached to a div, I changed the HTML/CSS value. But the div is not moving :

I guess the update function keep the css translate value from the 3D object value. By not changing the value from the 3D object, the html won’t change anyway (or for 1 frame).

2 - Change the css2Object position directly from the 3d object property:

In this case, I change the position of the Css2 Object with a Vector3().
But the problem is how to apply a 2D position (mouse position) to a 3d position (Css2 Object in a 3D world) ?

What I think, is to add a TransformControls to the css2Object but the css2Object behave as a 3D object but it’s not a 3D object.

What should I do ?

https://threejs.org/examples/?q=css2#css2d_label

As this example, I just want to move the label with the mouse. click and move the label where I want.

[Mugen87]

@CharlieWhite

But the problem is how to apply a 2D position (mouse position) to a 3d position (Css2 Object in a 3D world) ?

This question should be answered here:

The object disappear from the screen while trying to change its position

Just assigning the even data to the model’s position does not work. The correct computation of mouse coordinates in NDC space is: mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; You can unproject this vector like so (unprojecting means converting from NDC to world space): worldPosition.set( mouse.x, mouse.y, 0.5 ).unproject( camera ); Live demo: https://jsfiddle.net/rk27L4oh/ However, this approach might not be ideal for y…