How to set Text position steady? - three.js

Question

With the help of TextGeometry, I am drawing text around meshes. PerspectiveCamera is in steady mode, My cube is moving itself in the scene. How can text take a look to the object rotation?
Check this I want to do like this same.
var storeCamera = new THREE.PerspectiveCamera(75, $domElement.innerWidth() / $domElement.innerHeight(), 1, 10000);
dist = (largestSide - 0) / 2 + (largestSide - 0) / (2 * Math.tan(storeCamera.fov * Math.PI / 360));
storeCamera.position.z = dist;
var axisHelperScene = new THREE.Scene();
var axisHelperCamera = new THREE.PerspectiveCamera(75, $domElement.find('.axis-helper').innerWidth() / $domElement.find('.axis-helper').innerHeight(), 1, 10000);
axisHelperCamera.position.z = 350;
var axisHelperRenderer = new THREE.WebGLRenderer({
antialias: true, alpha: true
});
axisHelperRenderer.setSize($domElement.find('.axis-helper').innerWidth(), $domElement.find('.axis-helper').innerHeight());
$domElement.find('.axis-helper').append(axisHelperRenderer.domElement);
var directionX = new THREE.Vector3(1, 0, 0);
var directionY = new THREE.Vector3(0, 0, -1);
var directionZ = new THREE.Vector3(0, 1, 0);
var origin = new THREE.Vector3(0, 0, 0);
var length = 150;
var color = 0x4a4f65;
var headLength = 45;
var headWidth = 30;
// creating axes
var arrowHelperX = new THREE.ArrowHelper(directionX, origin, length, color, headLength, headWidth);
arrowHelperX.line.material.linewidth = 4;
var arrowHelperY = new THREE.ArrowHelper(directionY, origin, length, color, headLength, headWidth);
arrowHelperX.line.material.linewidth = 4;
var arrowHelperZ = new THREE.ArrowHelper(directionZ, origin, length, color, headLength, headWidth);
arrowHelperX.line.material.linewidth = 4;
// origin sphere
var axisSphere = new THREE.Mesh(new THREE.SphereGeometry(15, 40, 40, 40),
new THREE.MeshLambertMaterial({ color: 0x4a4f65 }));
var axisGroup = new THREE.Group();
axisGroup.add(arrowHelperX);
axisGroup.add(arrowHelperY);
axisGroup.add(arrowHelperZ);
axisGroup.add(axisSphere);
axisGroup.rotation.x = 0.60;
axisGroup.rotation.y = -0.50;
// #region Adding axis labels
var fontLoader = new THREE.FontLoader();
var jsonFont = String.format("{0}Scripts/threejs/json/helvetiker_regular.typeface.json", GetResourceFromClient("RootUrl"));
fontLoader.load(jsonFont, function (theFont) {
var xLabel = new THREE.TextGeometry("X", {
font: theFont,
size: 35,
height: 10,
curveSegments: 12,
bevelThickness: 1,
bevelSize: 1,
bevelEnabled: true
});
var yLabel = new THREE.TextGeometry("Y", {
font: theFont,
size: 35,
height: 10,
curveSegments: 12,
bevelThickness: 1,
bevelSize: 1,
bevelEnabled: true
});
var zLabel = new THREE.TextGeometry("Z", {
font: theFont,
size: 35,
height: 10,
curveSegments: 12,
bevelThickness: 1,
bevelSize: 1,
bevelEnabled: true
});
var textMaterial = new THREE.MeshLambertMaterial({
color: 0x4a4f65
});
var xMesh = new THREE.Mesh(xLabel, textMaterial);
xMesh.position.x = 160;
xMesh.position.y = -10;
axisGroup.add(xMesh);
var yMesh = new THREE.Mesh(yLabel, textMaterial);
yMesh.position.x = -10;
yMesh.position.z = -160;
axisGroup.add(yMesh);
var zMesh = new THREE.Mesh(zLabel, textMaterial);
zMesh.position.x = -10;
zMesh.position.y = 160;
axisGroup.add(zMesh);
});
// #endregion Adding axis labels
function render() {
storeRenderer.render(storeScene, storeCamera);
axisHelperRenderer.render(axisHelperScene, axisHelperCamera);
requestAnimFrame(render);
}

Answer 1

Instead of using a TextGeometry for the axis labels a sprite could be an option
var xLabel = makeTextSprite(" X ", { fontsize: 100, borderColor: { r: 0, g: 0, b: 0, a: 1.0 }, backgroundColor: { r: 255, g: 255, b: 255, a: 0.8 } , borderThickness: 5});
xLabel.position.set(150, 0, 0);
axisGroup.add(xLabel);
// creates a THREE.Sprite object with the given text and parameters
function makeTextSprite(theMessage, theParameters) {
if (theParameters === undefined) theParameters = {
};
var fontface = theParameters.hasOwnProperty("fontface") ?
theParameters["fontface"] : "Arial";
var fontsize = theParameters.hasOwnProperty("fontsize") ?
theParameters["fontsize"] : 18;
var borderThickness = theParameters.hasOwnProperty("borderThickness") ?
theParameters["borderThickness"] : 4;
var borderColor = theParameters.hasOwnProperty("borderColor") ?
theParameters["borderColor"] : {
r: 0, g: 0, b: 0, a: 1.0
};
var backgroundColor = theParameters.hasOwnProperty("backgroundColor") ?
theParameters["backgroundColor"] : {
r: 255, g: 255, b: 255, a: 1.0
};
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = "Bold " + fontsize + "px " + fontface;
// get size data (height depends only on font size)
var metrics = context.measureText(theMessage);
var textWidth = metrics.width;
// background color
context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + ","
+ backgroundColor.b + "," + backgroundColor.a + ")";
// border color
context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + ","
+ borderColor.b + "," + borderColor.a + ")";
context.lineWidth = borderThickness;
roundRect(context, borderThickness / 2, borderThickness / 2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6);
// 1.4 is extra height factor for text below baseline: g,j,p,q.
// text color
context.fillStyle = "rgba(0, 0, 0, 1.0)";
context.fillText(theMessage, borderThickness, fontsize + borderThickness);
// canvas contents will be used for a texture
var texture = new THREE.Texture(canvas)
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial(
{
map: texture, useScreenCoordinates: false
});
var sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(100, 50, 1.0);
return sprite;
}
// function for drawing rounded rectangles
function roundRect(ctx, x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h - r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}