4

我在一个场景中有一个管道几何图形，它是根据作为 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 条线作为标记。我必须将文本放在每个标记（行）的末尾。

4

2 回答 2

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

然后基于画布创建纹理：

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/

于 2012-12-05T13:14:03.530 回答
1

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

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

希望能帮助到你！

于 2013-03-12T22:06:19.970 回答