Search code examples
javascriptthree.jstypography

Three.js 3D Text Bending


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...


Solution

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