Use this method if you wish to draw text easily on a plane in your three.js scene.
3. Create a model in your favourite 3D application and export to three.js
Use this method if you prefer working with your 3d applications and importing the models to three.js
4. Procedural Text Geometry
If you prefer to work purely in THREE.js or to create procedural and dynamic 3D text geometries, you can create a mesh whose geometry is an instance of THREE.TextGeometry:
new THREE.TextGeometry( text, parameters );
In order for this to work, however, your TextGeometry will need an instance of THREE.Font to be set on its "font" parameter. See the TextGeometrypage for more info on how this can be done, descriptions of each accepted parameter, and a list of the JSON fonts that come with the THREE.js distribution itself.
I have created plane geometry and textured 2D text on plane geometry but I am unable to fit the text on plane geometry properly and I need to set the width and height of plane geometry according to the size of text can someone please help me how to do this. I have also uploaded code and image.
for(var i=0; i<spriteResponse.length; i++) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); metrics = null, textHeight = 100, textWidth = 0, actualFontSize = 2; context.font = "normal " + textHeight + "px Arial"; metrics = context.measureText(cardinal.name); var textWidth = metrics.width; canvas.width = textWidth; canvas.height = textHeight; context.font = "normal " + textHeight + "px Arial"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = "#ff0000"; context.fillText(cardinal.name, textWidth / 2, textHeight / 2); var texture = new THREE.Texture(canvas) ; texture.needsUpdate = true; //var spriteAlignment = new THREE.Vector2(0,0) ; var material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide ,map : texture} ); var geometry = new THREE.PlaneGeometry( 0.5, 0.3); plane = new THREE.Mesh( geometry, material ); plane.position.set(X_value,0,Z_value); scene.add(plane); var direction = camera.getWorldDirection(); plane.lookAt(direction); }
I’m new to three.js and have some issues belonging 2D Text:
What I want: I want some Labels for eg. the x,y and z-axis. The labels should always look to the camera. Maybe later they should only be shown, if their hovered but that’s another topic.
long story short, I'm making a live line chart and I'm using three.js due to the high number of lines per second that needs to be pushed inside this thing, so, now I'd need to draw the text values for the x and y axis, after a pretty long struggle ( because I'm a total noob @ threejs ) I figured out the wonderful technique of using the canvas as a sprite ( which is darn rad ). This is the code that I use /// 2D REALM var canvas = document.createElement('canvas'), context = canvas.getContext('2d'), metrics = null, textHeight = 100, textWidth = 0, actualFontSize = 2; context.fillStyle = '#FF0000'; var size = 250; canvas.width = size; canvas.height = size; function addText(position, text) { context.textAlign = 'center'; context.font = '24px Arial'; context.fillText("Game Over", size/2, size/2); var texture = new THREE.Texture(canvas); texture.needsUpdate = true; var material = new THREE.SpriteMaterial( { map: texture, color: 0x333333, fog: false } ); var sprite = new THREE.Sprite( material ); sprite.position.set(0,100,0); return sprite; } . . . $(document).ready(function() { h = $(window).height() - $('.speed-graph').outerHeight() - $('.speed-toolbar').outerHeight() - $('.channel-toolbar').outerHeight() - $('.status_bar').outerHeight() + 1; w = $(window).width() - $('.palette').outerWidth(); camera = new THREE.PerspectiveCamera( 75, parseFloat(w) / parseFloat(h), 0.1, 5000 ); //renderer.setSize( window.innerWidth, window.innerHeight ); console.log("w: " + w + " | h: " + h); renderer.setSize(w, h); $('body').append( renderer.domElement ); var material = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 1 }); var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3(-10 , 0, 0 ) ); geometry.vertices.push( new THREE.Vector3(8 , 0, 0 ) ); lines['line'].push( new THREE.Line( geometry, material )) text = addText(new Array(0, 9), "lorem ipsum"); //lines['label'].push( addText(new Array(0, 9), "0") ); scene.add( lines['line'][0] ); scene.add( text ); camera.position.z = 5; render(); }); now, the lines get drawn as they should, but I had no luck at all with the text. I can't understand the reason why I can't see the text, because I don't get any compiler error.
in the end, I figured it out by myself, problem was that the canvas didn't had a proper size, plus a bunch of other stuff. for the sake of the solution, and hoping to help others in the future, here's the working code along with a codepen to see it live in action. /// 2D REALM //var canvas = document.createElement('canvas'), var canvas, context, metrics = null, textHeight = 10, textWidth = 0, actualFontSize = 0.12; canvas = document.createElement('canvas'), context = canvas.getContext('2d'); context.fillStyle = '#FF0000'; function addText(position, text) { // 2d duty metrics = context.measureText(text); var textWidth = metrics.width; canvas.width = textWidth; canvas.height = textHeight; context.font = "normal " + textHeight + "px Arial"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = "#ff0000"; context.fillText(text, textWidth / 2, textHeight / 2); var texture = new THREE.Texture(canvas); texture.needsUpdate = true; var material = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates: false }); var sprite = new THREE.Sprite( material ); var textObject = new THREE.Object3D(); // var sprite = new THREE.Sprite(texture); textObject.textHeight = actualFontSize; textObject.textWidth = (textWidth / textHeight) * textObject.textHeight; sprite.scale.set(textWidth / textHeight * actualFontSize, actualFontSize, 1); // sprite.position.set(10,10,0); textObject.add(sprite); return textObject; } varscene = new THREE.Scene(); var camera; var renderer = new THREE.WebGLRenderer({ alpha: 1, antialias: true, clearColor: 0xffffff }); $(document).ready(function() { h = $(window).height() - $('.speed-graph').outerHeight() - $('.speed-toolbar').outerHeight() - $('.channel-toolbar').outerHeight() - $('.status_bar').outerHeight() + 1; w = $(window).width() - $('.palette').outerWidth(); camera = new THREE.PerspectiveCamera( 75, parseFloat(w) / parseFloat(h), 0.1, 5000 ); console.log("w: " + w + " | h: " + h); renderer.setSize(w, h); $('body').append( renderer.domElement ); text = addText(new Array(0, 9), "it works!!"); scene.add( text ); console.log(text.position); // text.position.x = 3.0; camera.position.z = 5; render(); }); // render the whole things up function render() { requestAnimationFrame(render); renderer.render(scene, camera); }
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var maxWidth = 400;
var lineHeight = 25;
var x = (canvas.width - maxWidth) / 2;
var y = 60;
var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';
context.font = '16pt Calibri';
context.fillStyle = '#333';
wrapText(context, text, x, y, maxWidth, lineHeight);
</script>
</body>
</html>
Discussion
To wrap text with HTML5 Canvas, we can create a custom function that requires the canvas context, a text string, a position, a max width, and a line height. The function should use the measureText() method of the canvas context to calculate when the next line should wrap.
To draw text using HTML5 Canvas, we can use the font property and the fillText() method of the canvas context.
To set the font, size, and style of HTML5 Canvas text, we can set the font property of the canvas context to a string containing the font style, size, and family, delimited by spaces. The style can be normal, italic, or bold. unless otherwise specified, the font style is defaulted to normal.
Once the font property has been set, we can draw the text with the fillText() method, which requires a string and an x and y position.
Text (and numbers) is something that is very useful to render, it's very often both the easiest and best way of conveying information. WebGL does not have any in-build text rendering functions, based as it is on the OpenGL ES 2.0 specification. There are two options available to us when we wish to render text, using HTML and overlaying it on top of the canvas or rendering the text as a texture within WebGL (technically it's probably possible to render it using a shader too).
If you're making a UI / menu system, it would be fairly crazy not use the HTML method as coupled with CSS that's one of it's main strengths. However if you want to have the text in the game world, a HUD or an interface that isn't going to take the user's full attention you will probably want to render the text in WebGL. (Note: If you try overlaying a HUD written in HTML you will encounter issues when trying to click and drag on the canvas element, you will get the text cursor even if you've overridden it as described in my controlling the cursor articleand as far as I can tell there is no way around this).
For the purposes of this article I will assume you are familiar with the basics of WebGL, up to and including the creation of textures from files. I am going to use a modified version of learningWebGL's lesson 7, if you are not familiar with the basics required to render textured 3D shapes you should review the lessons at learningWebGL site.
There are three main (fairly small) hurdles to rendering your text as a texture.
Drawing text with the canvas element
Sizing the canvas/texture appropriately
Binding the canvas to a WebGL texture
I'll go through each of these and then at the bottom will have a texture generator and a WebGL display of this texture.
Drawing text using the canvas element
There are plenty of tutorials on how to render text using the canvas element, and you can figure out most of it from the MDN's drawing text using a canvas reference page. I'm going to repeat the basics of what we need here for completeness, first we need a canvas element and to get it's 2D context.
<canvas id="textureCanvas">I'm sorry your browser does not support the HTML5 canvas element.</canvas> <script> var canvas document.getElementById('textureCanvas'); var ctx = canvas.getContext('2d'); // More code to go here! </script>
When it comes time to combine this with WebGL this should be a separate canvas to the one we are using for WebGL as it will be using a different context, but don't worry you can "display: none;" the canvas you are using for the texture with CSS and the method will still work.
Next we need to set up the properties of the text we wish to render, these include colour, size, font, alignment and vertical alignment, see the MDN reference for a full list of options and their descriptions, we'll stick the simple ones for now.
var canvas document.getElementById('textureCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "#333333"; // This determines the text colour, it can take a hex value or rgba value (e.g. rgba(255,0,0,0.5)) ctx.textAlign = "center"; // This determines the alignment of text, e.g. left, center, right ctx.textBaseline = "middle"; // This determines the baseline of the text, e.g. top, middle, bottom ctx.font = "12px monospace"; // This determines the size of the text and the font family used
Finally we render our text to the canvas, we provide an x and y coordinate (this is in pixels relative to the top-left of the canvas) at which to render the text. Where the text then appears relative to these coordinates is determined by the textAlign and textBaseline we specified. Baseline works as you expect and the baseline as specified is rendered at the y-coordinate. However textAlign is slightly more complex:
"left" or equivalent will cause the text to appear to the right of the specified x-coordinate
"center" will cause the text to appear centered on the specified x-coordinate
"right" or equivalent will cause the text to appear to the left of the specified x-coordinate
So for left aligned text we would probably specify 0 as the x-coordinate, and the full canvas width as the x-coordinate for right aligned text. As we have chosen center aligned we will specify the middle of the canvas.
You can also give the text an outline using ctx.strokeStyle, ctx.strokeText, but we are not going to cover that for our texture generator.
Sizing the canvas and multi-line text
We need to ensure that the canvas is larger than the text we are rendering and for some implementations of WebGL textures are required to be a power of two. We'll start by automatically working out the size we need the for text rendered as a single line, then we will look at specifying a maximum width and spliting the text into multiple lines to be rendered. To do this we'll use the measureText function, this returns an object who's width property is the width in pixels of the text specified if drawn with the current settings. We also need a function to get the first power of 2 greater than or equal to this value.
function getPowerOfTwo(value, pow) { var pow = pow || 1; while(pow<value) { pow *= 2; } return pow; } var canvas = document.getElementById('textureCanvas'); var ctx = canvas.getContext('2d'); var textToWrite = "HTML5 Rocks!"; var textSize = 12; ctx.font = textSize+"px monospace"; // Set the font of the text before measuring the width! var canvas.width = getPowerOfTwo(ctx.measureText(textToWrite).width); var canvas.height = getPowerOfTwo(2*textSize); // Omitted: Set all properties of the text again (including font) // Omitted: Draw the text
I've omitted the code for setting the properties and drawing the text as it won't have *really* changed. As well as setting the width of the canvas to the first power of two greater than the width of the text, we've also set the height to the first power of two greater than twice the height of the text we'll be drawing (to allow space for larger characters and to ensure a bit of padding). Note that you must set the font property of the context a second time after measuring the text or you'll get the default font and size rendering our calculation inaccurate!
Now for the possiblity of splitting up long text into multiple lines. We'll do this by specifying a maximum width, and breaking the text into an array of words and compare the specified width to text constructed from a decreasing number of words from that array of words, then from that we can build up an array of text lines which are smaller than the maximum width. The function below does this, the array to write the lines of text to is passed as an argument so that the maximum width of the calculated lines can be returned, it also replaces any newline characters with a space, this is because the drawText function ignores them and we are using the position of spaces to create our array of words.
function createMultilineText(ctx, textToWrite, maxWidth, text) { textToWrite = textToWrite.replace("\n"," "); var currentText = textToWrite; var futureText; var subWidth = 0; var maxLineWidth = 0; var wordArray = textToWrite.split(" "); var wordsInCurrent, wordArrayLength; wordsInCurrent = wordArrayLength = wordArray.length; // Reduce currentText until it is less than maxWidth or is a single word // futureText var keeps track of text not yet written to a text line while (measureText(ctx, currentText) > maxWidth && wordsInCurrent > 1) { wordsInCurrent--; var linebreak = false; currentText = futureText = ""; for(var i = 0; i < wordArrayLength; i++) { if (i < wordsInCurrent) { currentText += wordArray[i]; if (i+1 < wordsInCurrent) { currentText += " "; } } else { futureText += wordArray[i]; if(i+1 < wordArrayLength) { futureText += " "; } } } } text.push(currentText); // Write this line of text to the array maxLineWidth = measureText(ctx, currentText); // If there is any text left to be written call the function again if(futureText) { subWidth = createMultilineText(ctx, futureText, maxWidth, text); if (subWidth > maxLineWidth) { maxLineWidth = subWidth; } } // Return the maximum line width return maxLineWidth; }
The eagle eyed amoung you will have noticed that the maximum width can be greater than the maximum width specified, this will happen if a single word is greater than the maximum width (e.g. supercalifragilistic...), if you want to make sure that the maximum width specified truly is you'll have to further split words into characters. For now we'll just feed the maximum line width returned by the function into the calculation of the required canvas width.
Now we'll loop over the array to draw our text, splitting the text does complicate choosing the y-coordinate to draw each line at slightly. The code below is again omitts some of the code that we've already covered (setting up the canvas, the functions we just went over, setting the property of the text to draw).
// Omitted: helper functions var text = []; var textX, textY; var textToWrite = "HTML5 Rocks! HTML5 Rocks! HTML5 Rocks!"; var textHeight = 32; var maxWidth = 128; // Omitted: Set up the canvas and get the context ctx.font = textHeight+"px monospace"; maxWidth = createMultilineText(ctx, textToWrite, maxWidth, text); canvasX = nextPowerOfTwo(maxWidth); canvasY = nextPowerOfTwo(textHeight*(text.length+1)); // Omitted: Set canvas width / height // Omitted: Set text properties textX = canvasX/2; var offset = (canvasY - textHeight*(text.length+1)) * 0.5; for(var i = 0; i < text.length; i++) { textY = (i+1)*textHeight + offset; ctx.fillText(text[i], textX, textY); }
Creating the WebGL texture
After all that creating the WebGL texture is relatively straight forward! When loading the texture one must simply pass the DOM object of the canvas where before one would pass the DOM object for the image. Then bind the created texture before rendering our object as normal using gl.bindTexture(gl.TEXTURE_2D, canvasTexture);where gl is the WebGL context.
gl = canvas.getContext("experimental-webgl"); var canvasTexture; function initTexture() { canvasTexture = gl.createTexture(); handleLoadedTexture(canvasTexture, document.getElementById('textureCanvas')); } function handleLoadedTexture(texture, textureCanvas) { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureCanvas); // This is the important line! gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); gl.bindTexture(gl.TEXTURE_2D, null); }
I have combined the above techniques with a quick web form to generate canvas textures and then display them on an altered version of learingWebGL's lesson 7. There is also an option to enforce a square texture (as we're placing it on a cube). You can play around with it below, all the JavaScript is inline so if you view source you can see how it works, it still needs a bit of work to be able to be used in full project but it's a reasonable proof of concept. I hope this article was helpful, if you have any comments or feedback you can contact me via twitter @_delph.
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; var txt="Hello World" ctx.fillText("width:" + ctx.measureText(txt).width,10,50) ctx.fillText(txt,10,100);
The solution using canvas is not the best, each browser deal different canvas size.
Here is a nice solution to get size of text using a temporary element. Demo
EDIT
The canvas spec doesn't give us a method for measuring the height of a string, so for this we can use parseInt(context.font). TO get width and height. This trick work only with px size.
will fail with em, don't know why though since it does work with % and viewport units. Also be carefull, in this context this is the window object, so you are actually creating global variables element and context. – KaiidoJul 9 '15 at 3:03
@Kaiido Thank you for comment. Yes, canvas deals different the % and em size. So this will work only with px dimensions. So the only way to get the width as will be in DOM is to create e temporary element, add-it to DOM, apply styles and the get size. – vasilenicusorJul 9 '15 at 6:06
no actually it does work with % and viewport units (vh, vw...) but it doesn't with em, which is strange – KaiidoJul 9 '15 at 6:08
Temporary elements don't really work due to performance requirements. The canvas thingy is my top candidate atm though. I think of making some zero size canvas with position:fixed and x-index:-1000 and then reusing the context for measureText. – Seppo420Jul 9 '15 at 8:48
em, don't know why though since it does work with%and viewport units. Also be carefull, in this contextthisis thewindowobject, so you are actually creating global variableselementandcontext. – Kaiido Jul 9 '15 at 3:03%and viewport units (vh, vw...) but it doesn't withem, which is strange – Kaiido Jul 9 '15 at 6:08