Question

我在场景中有一个管几何体，它是根据加载为JSON的数据构建的。我要在每个段上添加一行作为标记。为此，我将一个面部的质心作为起点，并在每个质心坐标上加上10作为终点。

的jsfiddle

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

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条线作为标记。我要在每个标记（行）的末尾放置文本。

Answer 1

为什么不采取你的线的坐标，对它施加一些偏移并在它上方建立一个平面。这样，您可以在该平面上显示带有文本的纹理。稍后，默认情况下将'opacity'参数设置为'0'，并在选择面部时将其返回到'1'。你可以通过几种方法制作这些纹理：

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

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

首先，您要创建新的canvas元素：

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

然后根据画布创建纹理：

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

Finnaly，设置新的平面网格：

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

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

Answer 2

这是另一个完整的详细示例，用于从文本在canvas元素上创建图像，然后将该图像应用为three.js中的纹理：

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

希望它有所帮助！

three.js - 行旁边的文字

2 个答案: