three.js - 行旁边的文本答案

【问题标题】：three.js - text next to linethree.js - 行旁边的文本
【发布时间】：2013-04-07 21:29:34
【问题描述】：

我在一个场景中有一个管道几何图形，它是根据作为 JSON 加载的数据构建的。我必须在每个段上放一条线作为标记。为此，我将面的质心作为起点，并将质心的每个坐标添加 10 作为线的终点。

请在下面找到从人脸中心添加线条的代码。

var lineGeo, lineMat, line;
var fx=tube.faces[3].centroid.x;
var fy=tube.faces[3].centroid.y;
var fz=tube.faces[3].centroid.z;
lineGeo = new THREE.Geometry();
lineGeo.vertices.push(new THREE.Vector3(fx, fy, fz), new THREE.Vector3(fx+50, fy+50, fz+50));

lineMat = new THREE.LineBasicMaterial({color: 0x000000, lineWidth: 2});                 
line = new THREE.Line(lineGeo, lineMat);
line.type = THREE.Lines;
tubeMesh.add(line);

现在如何将文本放在行尾？在生产环境中，管是用 2000 个坐标构建的，将有 200 条线作为标记。我必须将文本放在每个标记（行）的末尾。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

你为什么不拿你的线的坐标，应用一些偏移量，然后在它上面建一个平面。这样您就可以在该平面上显示带有文本的纹理。稍后，只需将“不透明度”参数默认设置为“0”，然后在您选择脸部时将其返回为“1”。您可以通过几种方法制作这些纹理：

1) 您可以将所有文本作为图像导入（这不是您的情况，因为您将有超过 200 个文本）。

2) 您可以创建画布元素，使用 CSS 在其上绘制一些文本，然后将此画布用作特定平面的纹理。个人认为这是您情况的最佳解决方案，因为生成实时 3D 动态文本只会让您的 fps 陷入困境。

所以首先你创建一个新的画布元素：

texture_placeholder = document.createElement( 'canvas' );
texture_placeholder.width = 100;
texture_placeholder.height = 20;

然后在画布内设置一些文本：

var context = texture_placeholder.getContext( '2d' );
context.fillStyle = '#f00'; 
context.textAlign = "center";
context.textBaseline = "middle";           
context.font = ' bold 150px';             
context.fillText('This is the 3rd face!', texture_placeholder.width / 2, texture_placeholder.height / 2);

然后基于canvas创建纹理：

var texture = new THREE.Texture( texture_placeholder );
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true, side:THREE.DoubleSide } );

最后，设置你的新平面网格：

var plane = new THREE.PlaneGeometry( 100, 20 );
var text = new THREE.Mesh( plane, material )

希望对您有所帮助！这是您的示例：http://jsfiddle.net/WT6jL/1/

【讨论】：

感谢您提供详细示例。添加 3d 文本 fps 突然下降后，您就对了。我会尽力让你知道。使用画布作为纹理还可以解决我面临的另一个问题。-@Alex Under
它工作正常。是否可以为整个管几何创建这样的地图？ @亚历克斯下
好吧，基本上你所做的只是将你的纹理源设置为你的特定画布元素的源（它可以包含你喜欢的任何东西，如果你愿意，可以包含整个网站）。换句话说，您不是从服务器上的外包图像（或从网络上的其他地方）创建纹理贴图，而是从您自己页面的元素中创建。
可以这样想：“画布”是画家用来画画的东西。所以，最后——他们的画布上有了他们的艺术品（一张照片）。另一方面——你也有照片和图片（图像）。因此，对于 three.js 纹理，您使用哪种“图片”并不重要——照片、图像、彩绘图片或其他任何东西。唯一的区别是你是画家，可以在画布上绘制任何你想要的东西，然后将它设置为你的纹理贴图。是的，您可以在 three.js 中将画布纹理贴图应用于场景中的任何网格。
忘了提及一个细节：（据我所知）当您使用画布作为纹理时 - 您不依赖 GPU，因此使用这种方法可能会减慢速度。考虑到这一点。尽可能使用 three.js 适当的图像加载器：THREE.ImageUtils.loadTexture(img.src);

【解决方案2】：

这是另一个完整的详细示例，它通过文本在画布元素上创建图像，然后将该图像作为纹理应用到 three.js：

http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

希望对你有帮助！

【讨论】：