使用 THREE.js CSS2DRenderer 从左上角定位 HTML 元素

Question

CSS2DRenderer 允许我根据 3D 位置在场景中放置一个 HTML 元素，这又可以对应于放置在 3D 场景中的某个对象。例如，我可以这样做：

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)

这会将 hello world div 直接放置在网格的中心，例如

_________________
|               |
|  hello world  |
|_______________|

如何更改 hello world div 的坐标，使其相对于 div 的左上角而不是相对于 div 的中心放置div？例如

 _________________
|               |
|       hello world  
|_______________|

编辑：请注意，目标不仅仅是偏移文本。我想改变对齐方式。因此，例如，如果我只是想偏移，更多文本将如下所示：

_________________
|               |
|  hello world blah blah blah
|_______________|

在哪里更改对齐方式看起来像这样

_________________
|               |
|       hello world blah blah blah
|_______________|

Answer 1

如果您在 objectCSS 上设置位置，它将作为网格的偏移应用。

尝试：objectCSS.position.set(10, 0, 0)

有关详细信息，请参阅此示例：https://threejs.org/examples/#css2d_label

具体在这一行：https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html#L132

Answer 2

我最终能够通过使用一些嵌套的 div 容器来做到这一点。我的最终代码最终看起来像这样：

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)

Answer 3

我遇到了同样的问题。 CSS2DRenderer 中的第 131 或 135 行转换为 translate(-50%,-50%) 以使 html 元素围绕给定位置居中。可能最好的解决方法是在创建 CSS2DObject 时对此进行某种控制，也许传递一个可选参数参数？可能值得制作 PR？

使用 THREE.js CSS2DRenderer 从左上角定位 HTML 元素

Using the THREE.js CSS2DRenderer to position HTML elements from the top left

javascript

three.js