在three.js中动态创建二维文本 [英] Dynamically create 2D text in three.js

问题描述

我有一个在three.js中创建的3D模型.根据一些数据，我想创建一组由小文本标签装饰的箭头.这些标签应该是二维的.

I have 3D model which I have created in three.js. Based on some data, I want to create a set of arrows which is decorated by a small text label. These labels should be in 2D.

似乎我有两种选择:使用单独的画布元素来创建纹理，然后在 3D 模型中使用该纹理，或者在 3D 模型的画布元素顶部使用 HTML.

It seems like I have two alternatives: either use a separate canvas element to create a texture which in its turn is used in the 3D model, or use HTML on top the 3D model's canvas element.

我想知道如何解决这个问题.哪个是正确"的方法来做到这一点?非常欢迎任何建议和示例代码！

I'm wondering how to go about this. Which is the "correct" way to do this? Any suggestions and example code is very welcome!

推荐答案

如果你不介意文本总是在最上面(例如，如果对象被其他东西挡住了，它的文本标签仍然可见并且最重要的是)，并且文本不会受到任何渲染(如灯光/阴影等)的影响，那么 HTML 是最简单的方法.

If you don't mind that the text will always be on top (e.g. if the object is blocked by something else, its text label will still be visible and on top of everything else), and that the text will not be affected by any rendering like lights/shadow, etc, then HTML is the easiest way to go imho.

这是一些示例代码:

var text2 = document.createElement('div');
text2.style.position = 'absolute';
//text2.style.zIndex = 1;    // if you still don't see the label, try uncommenting this
text2.style.width = 100;
text2.style.height = 100;
text2.style.backgroundColor = "blue";
text2.innerHTML = "hi there!";
text2.style.top = 200 + 'px';
text2.style.left = 200 + 'px';
document.body.appendChild(text2);

将 style.top 和 style.left 变量中的 200 替换为您希望放置文本的 y 和 x 坐标(分别).它们将是正值，其中 (0,0) 是画布的左上角.有关如何从画布中的 3D 点投影到浏览器窗口中以像素为单位的 2D 点的一些指导，请使用如下代码片段:

Substitute 200 in the style.top and style.left variables for the y and x coordinates (respectively) you wish to place the text. They will be positive values where (0,0) is the top left of the canvas. For some guidance on how to project from the 3D point in your canvas to a 2D point in pixels in your browser window, use a code snippet like the following:

function toXYCoords (pos) {
        var vector = projector.projectVector(pos.clone(), camera);
        vector.x = (vector.x + 1)/2 * window.innerWidth;
        vector.y = -(vector.y - 1)/2 * window.innerHeight;
        return vector;
}

确保您事先调用了 camera.updateMatrixWorld().

Make sure you have called camera.updateMatrixWorld() beforehand.

这篇关于在three.js中动态创建二维文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！