Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
563 views
in Technique[技术] by (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...