Three.js 3D Text Bending

Question

Is this still available in r69? In the process of 'rolling' my own, but before moving forward, want to make sure I have not overlooked any vital documentation or useful libraries...

Answer 1

Try to make through this example. Look at messages in the console.

<script src="js/modifiers/BendModifier.js"></script>
var text = "THREE.BendModifier";
var textGeometry = new THREE.TextGeometry(text, {
    size: 128,
    height: 50,
    curveSegments: 4,
    font: "gentilis",
    weight: "bold",
    style: "normal",
    bevelEnabled: true,
    bevelThickness: 2,
    bevelSize: 1,
});


var textMaterial = new THREE.MeshPhongMaterial({
    color: 0x62254a
});
var text3D = new THREE.Mesh(textGeometry, textMaterial);

var direction = new THREE.Vector3(0, 0, -1);
var axis = new THREE.Vector3(0, 1, 0);
var angle = Math.PI / 6;

var modifier = new THREE.BendModifier();
modifier.set(direction, axis, angle).modify( text3D.geometry );

textGeometry.computeBoundingBox();
var textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
text3D.position.set(-0.5 * textWidth, 500, 0);
scene.add(text3D);

Answer 2

Just wanted to mention that you need to change BendModifier.js according to here https://stackoverflow.com/a/40492948/7132939 to make it work with newer versions of three.js

BendModifier.js uses THREE.Matrix3.getInverse() which is not working any more. So you need to change the BendModifier.js to use THREE.Matrix4.getInverse(..) and one other change as mentioned in the answer linked.

And generating text has changed - using a THREE.fontLoader()

Complete working example can be found following this link

Screenshot of web site - link

And full answer of the internal link:

There was a change in THREE.js but it is quite easy to adjust the BendModifier.js script. Just change the lines

var InverseP = new THREE.Matrix3().getInverse( P );

and

newVertices[i] = new THREE.Vector3(); newVertices[i].copy( geometry.vertices[i] ).applyMatrix3( InverseP );

to Matrix4 in both cases - so they will read:

var InverseP = new THREE.Matrix4().getInverse( P );

and

newVertices[i] = new THREE.Vector3(); newVertices[i].copy( geometry.vertices[i] ).applyMatrix4( InverseP );

Just tried it with three.min.81.js and it works fine.