El CSS2DRenderer me permite colocar un elemento HTML en una escena en función de una posición 3D, que a su vez puede corresponder a algún objeto colocado en la escena 3D. Por ejemplo, puedo hacer:
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) Esto colocará el hello world div directamente centrado en la malla, por ejemplo
_________________ | | | hello world | |_______________| ¿Cómo podría cambiar las coordenadas del hello world div para que se coloque con respecto a la parte superior izquierda del div, en lugar de con respecto al centro del div? p.ej
_________________ | | | hello world |_______________|EDITAR: tenga en cuenta que el objetivo no es solo compensar el texto. Quiero cambiar la alineación. Entonces, por ejemplo, si solo estuviera tratando de compensar, más texto se vería así:
_________________ | | | hello world blah blah blah |_______________|donde cambiar la alineación se vería así
_________________ | | | hello world blah blah blah |_______________|Si establece una posición en objectCSS , se aplicará como un desplazamiento de la malla.
Prueba: objectCSS.position.set(10, 0, 0)
Consulte este ejemplo para obtener más detalles: https://threejs.org/examples/#css2d_label
Específicamente en esta línea: https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html#L132
Terminé siendo capaz de hacer esto utilizando algunos contenedores div anidados. Mi código final terminó pareciéndose a esto:
const mesh; // <some other mesh in the scene> // Create the relevant html elements. const el = document.createElement('div') const container = documnet.createElement('div'); const inner = document.createElmeent('div'); // Add styling. container.style.display = 'flex' container.style.flexDirection = 'column' container.style.width = 'fit-content' // needed to 'reset' the width calculations // Set the text. inner.innerHTML = 'HELLO WORLD' // Set the rest of the THREE object. const objectCSS = new CSS2DObject(el) objectCSS.position.set(0, 0, 0) objectCSS.element.style.overflow = 'visible' objectCSS.element.style.width = '1px' // I dont know if this is strictly needed objectCSS.element.style.height = '1px' mesh.add(objectCSS)Me he encontrado con el mismo problema. Las líneas 131 o 135 en CSS2DRenderer se transforman para translate(-50%,-50%) para centrar el elemento html alrededor de la posición dada. Probablemente, la mejor solución sería tener algún tipo de control sobre esto al crear el CSS2DObject , ¿tal vez pasar un argumento de argumento opcional? ¿Valdría la pena hacer un PR?