The CSS2DRenderer allows me to place an HTML element in a scene based on a 3D position, which can in turn correspond to some object placed in the 3D scene. For example, I can do:
const mesh; // <some other mesh in the scene> const el = document.createElement('div') el.innerHTML = 'hello world' const objectCSS = new CSS2DObject(el) objectCSS.position.set(0, 0, 0) mesh.add(objectCSS)
This will place the
hello world div directly centered on the mesh, e.g.
_________________ | | | | | hello world | | | |_______________|
How could I change the coordinates of the
hello world div so that it is placed with respect to the top left of the div, instead of with respect to the center of the div? e.g.
_________________ | | | | | hello world | | |_______________|
Note that the goal is not to just offset the text. I want to change the alignment. So for example, if I was just trying to offset, more text would look like like this:
_________________ | | | | |hello world bla| | | |_______________|
wheres changing the alignment would look like this
_________________ | | | | | hello world bla | | |_______________|
Similarly, adding more text in the default offset view would look like:
_________________ | | | hello world | | hello world | | hello world | |_______________|
but I want
_________________ | | | | | hello world | hello world |_______hello world