Edit the 3D text Properties to position and align width Cube using Three.js

问题

I have the fiddle created using Three.js, where it shows "Lines" along with "Cube" to show the guidelines for the Cube. Here is the Fiddle for the same: http://jsfiddle.net/boquqL84/8/

Now I want to add text also so I can show the heading for each guideline like which line is "Width", "Height" or "Length" as show in the diagram below:

The text is working fine when I updated the Three.js file and included the font js file.

Now the question is how to align the text, which has the bending backside effect.

// 3D TEXT    
var materialFront = new THREE.MeshBasicMaterial({
    color: 0xff0000
});
var materialSide = new THREE.MeshBasicMaterial({
    color: 0x000088
});
var materialArray = [materialFront, materialSide];
var textGeom = new THREE.TextGeometry("Hello, World!", {
    size: 12,
    height: 4,
    curveSegments: 3,
    font: "arial",
    weight: "bold",
    style: "normal",
    bevelThickness: 1,
    bevelSize: 2,
    bevelEnabled: true,
    material: 0,
    extrudeMaterial: 1
});
// font: helvetiker, gentilis, droid sans, droid serif, optimer
// weight: normal, bold

var textMaterial = new THREE.MeshFaceMaterial(materialArray);
var textMesh = new THREE.Mesh(textGeom, textMaterial);

textGeom.computeBoundingBox();
var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;

textMesh.position.set(-0.5 * textWidth, 50, 100);
textMesh.rotation.x = -Math.PI / 4;
cube.add(textMesh);

Here is the fiddle with the 3D Text code: http://jsfiddle.net/fo4dcqLd/4/

Let me know if you need any other information.

Please suggest.

来源：https://stackoverflow.com/questions/25514547/edit-the-3d-text-properties-to-position-and-align-width-cube-using-three-js

标签

javascript

text

three.js