three.js - 行旁边的文字 [英] three.js - text next to line

问题描述

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

I've a tube geometry in a scene which is built from data loaded as JSON. I've to put a line as a marker at each segment. And for that I am taking centroid of a face as starting point and added 10 to each co-ordinate of centroid as end point of line.

请找到jsfiddle of < a href =http://jsfiddle.net/RnFqz/13/ =nofollow>带线管

Please find the jsfiddle of tube with line

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

Please find below the code of adding line from the center of a face.

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

Now how do I put text at the end of a line ? In a production environment tube is built with 2000 co-ordinates and there will be 200 lines as marker. I've to put text at the end of each marker (line).

推荐答案

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

Why don't you take the coords of your line, apply some offset to it and build a plane just above it. That way you could display a texture with your text on that plane. Later on, just set 'opacity' param to '0' by default and return it to '1' as you pick your face. And there are few ways you could make those textures:

1）你可以将所有文字导入图像（这不是你的情况，因为你会有更多的超过200）。

1) You can import all of your text as images (which is not your case, since you'll have more than 200 to go).

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

2) You can create canvas element, draw some text on it with CSS and later on use this canvas as your texture for a certain plane. Personally think this is the best solution in your case, since generating real time 3D dynamic text will just put your fps to the floor.

所以首先你要创建一个新的canvas元素：

So first you create new canvas element:

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

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

Then set some text inside of your canvas:

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

然后根据画布创建纹理：

Then create texture based on canvas:

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

Finnaly，设置新的平面网格：

Finnaly, set your new plane mesh:

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

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

Hope that helps! Here is your example: http://jsfiddle.net/WT6jL/1/

这篇关于three.js - 行旁边的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！