三.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

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

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) 您可以创建画布元素，使用 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.

所以首先你创建新的画布元素:

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, 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/

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