The CSS2DRenderer feature allows for the positioning of an HTML element within a 3D scene based on specific coordinates, which can be associated with an object in that scene. For instance, you could execute:
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)
By doing this, the hello world div will be placed directly at the center of the mesh, like so:
_________________
| |
| hello world |
|_______________|
Is there a way to adjust the position of the hello world div so that it aligns with the top left corner of the div, rather than its center? For example:
_________________
| |
| hello world
|_______________|
EDIT: It's important to note that the intention here is not only to shift the text. The goal is to alter the alignment. Simply offsetting the text would result in something like this:
_________________
| |
| hello world blah blah blah
|_______________|
Whereas changing the alignment would yield:
_________________
| |
| hello world blah blah blah
|_______________|