three.js - text next to line

问题

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.

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

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

回答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) You can import all of your text as images (which is not your case, since you'll have more than 200 to go).

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 )

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

回答2:

Here is another complete detailed example of creating an image on a canvas element from text, and then applying that image as a texture in three.js:

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

Hope it helps!

来源：https://stackoverflow.com/questions/13683727/three-js-text-next-to-line

标签

javascript

three.js