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

问题描述

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

看起来我有两种选择：使用单独的canvas元素来创建纹理，然后在3D模型中使用它，或者在3D模型的画布元素上面使用HTML。

我想知道如何去做这件事。哪一种是正确的方式？任何建议和示例代码是非常受欢迎的！

解决方案

如果您不介意文本始终位于顶部（例如如果对象被别的东西阻挡，它的文本标签仍然可见并且在其他东西之上），并且文本不会受到像灯光/阴影等渲染的影响，那么HTML是最简单的方法

以下是一些示例代码：

  var text2 =使用document.createElement（ 'DIV'）; 
 text2.style.position ='绝对'; 
 //text2.style.zIndex = 1; //如果您仍然看不到标签，请尝试取消注释此
 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）是画布的左上角。有关如何从canvas中的3D点投影到浏览器窗口中像素点的2D点的一些指导，请使用类似以下的代码片段：

  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; 
返回向量; 
} 
  

请确保您事先调用了camera.updateMatrixWorld（）。

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.

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!

解决方案

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.

Here is some sample code:

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);

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;
}

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

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