Jump to content

dynamic texure - drawText attributes - get text to wrap?


Recommended Posts

Hey all !


I',m playing around with dynamic texture and drawText to layer some text over my mesh.


anyone have any idea on how to wrap the text on the box?


I'm able to position, change font and size as per the documentation - but wrapping is a bit of a mystery!


here - I'm able to layer text over an image of a yellow sticky, but so far - no wrapping....

var sticky = new BABYLON.Mesh.CreateBox("sticky", 0.5, scene);    	if (farWall) {    		sticky.rotation.x = sign * (Math.PI);    		sticky.scaling = new BABYLON.Vector3(1, 1, 0.01);    	} else {    		sticky.scaling = new BABYLON.Vector3(0.01, 1, 1);    		sticky.rotation.x = sign * (-Math.PI / 2);    	}    	sticky.position = new BABYLON.Vector3(pos.x, pos.y, pos.z);    	sticky.material = new BABYLON.StandardMaterial("matPaint", scene);    	sticky.material.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);    	sticky.material.specularColor = new BABYLON.Color3(0, 0, 0);    	sticky.material.diffuseColor = new BABYLON.Color3(0, 0, 0);    	sticky.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);    	var content = new BABYLON.Mesh.CreateBox("content", 0.5, scene);    	if (farWall) {    		//sticky.rotation.x = sign * (Math.PI);    		content.scaling = new BABYLON.Vector3(1, 1, 0.01);    	} else {    		content.scaling = new BABYLON.Vector3(0.01, 1, 1);    		content.rotation.x = sign * (-Math.PI / 2);    	}    	content.position = new BABYLON.Vector3(pos.x, pos.y, pos.z);    	content.material = new BABYLON.StandardMaterial("matPaint", scene);    	content.material.specularColor = new BABYLON.Color3(0, 0, 0);    	content.material.diffuseColor = new BABYLON.Color3(0, 0, 0);    	content.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);    	var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);    	content.material.diffuseTexture = backgroundTexture;    	    	backgroundTexture.drawText(stkyContent, null, 80, "50px Segoe UI", "black", "#F7FAA9");    	//hover over image    	sticky.actionManager = new BABYLON.ActionManager(scene);    	sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, sticky, "visibility", 1, 100));    	sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, sticky, "visibility", 0.6, 100));


Link to comment
Share on other sites

I think this should best operate. With ......        ....  => bad englich

var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);stickyMat.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);stickyMat.specularColor = new BABYLON.Color3(0, 0, 0);stickyMat.diffuseColor = new BABYLON.Color3(0, 0, 0);stickyMat.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);var contentMat = new BABYLON.StandardMaterial("matPaint", scene);contentMat.specularColor = new BABYLON.Color3(0, 0, 0);contentMat.diffuseColor = new BABYLON.Color3(0, 0, 0);contentMat.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);content.material.diffuseTexture = backgroundTexture;
Link to comment
Share on other sites

Hi Z!  Are you talking about WORD-wrapping the text, or uWrap and vWrap of the dynamicTexture?  (I'll assume word wrap.)


I don't think there is a way to word-wrap the text... unless you build your own word-wrap function.  (I could easily be wrong)


But you can use multiple drawText lines...


backgroundTexture.drawText(stkyContentLine1, null, 80, "50px Segoe UI"...

backgroundTexture.drawText(stkyContentLine2, null, 160, "50px Segoe UI"...

backgroundTexture.drawText(stkyContentLine3, null, 240, "50px Segoe UI"...


(To get the most text in the least width, choose your font family carefully.)


You know all this already... so why am I babyloning-on?  :)

Link to comment
Share on other sites

Hi dad - I'm not really sure i understand what you mean - are you saying i should remove sticky.material = new BABYLON.StandardMaterial("matPaint", scene);

and move it to var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);  ?

is it just cleaner code - or something I'm doing wrong?


Hey Wingnut!

yes - word-wrapping is the game!

I'm taking the content from a database

I'm making yellow stickies for the walls on my room.


Maybe I need to find/make a little function that takes the database content, works max characters per line then splits content into those different lines as you show....


Link to comment
Share on other sites

Yes Zimbofly this:



are you saying i should remove sticky.material = new BABYLON.StandardMaterial("matPaint", scene);

and move it to var stickyMat = new BABYLON.StandardMaterial("matPaint", scene); 




var sticky = new BABYLON.Mesh.CreateBox("sticky", 0.5, scene);

var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);
stickyMat.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);

sticky.material = stickyMat;


it is faster and more secure. After I do not know if will solve your problem. but I find this method more secure, more reliable.

Link to comment
Share on other sites

Thanks Dad - just making those changes to see if any improvement...


Next question.....


at the moment, I can double click on yellow sticky on the wall and edit content - then update database - BUT


HOW do I make it refresh the test with new value??????


I have var LoadImagesFromHTML = function () 

I have tried to put this again after submit button - no change...


also tried to copy:

engine.runRenderLoop(function () {
after submit button - no joy
Any ideas?
Link to comment
Share on other sites

  • 2 months later...

This is what i currently use to wrap my text:

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

which gets used as follows:

	textureContext = menuTexture.getContext();	textureContext.font = "bold 40px Calibri";	textureContext.save();	textureContext.fillStyle = "white";	textureContext.textAlign="centre";	wrapText(textureContext,"Lots of really long and exciting text",null,80,300,25);	textureContext.restore();	menuTexture.update(); 
Link to comment
Share on other sites

  • 5 years later...

Rosetta Code has some nice wrapping algorithms:

export function wrap(text, limit) {
  if (text.length > limit) {
    // find the last space within limit
    const edge = text.slice(0, limit).lastIndexOf(" ");
    if (edge > 0) {
      const line = text.slice(0, edge);
      const remainder = text.slice(edge + 1);
      return line + "\n" + wrap(remainder, limit);
  return text;


const longString = "my very long string that has characters greater than 10..."
const arrTextWrap = wrap(longString, 10).split("\n") || [];
let currentHeightPos = 75;
arrTextWrap.forEach((string) => {
  dynamicTexture.drawText(string, 10, currentHeightPos, "20px Segoe UI", "#bf0d0d", "transparent", true);
  currentHeightPos = currentHeightPos + 16;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...