三.js 3D文本弯曲

Three.js 3D Text Bending

本文关键字：弯曲 文本 3D js      更新时间：2023-09-26

这在 r69 中仍然可用吗？在"滚动"我自己的过程中，但在继续前进之前，想要确保我没有忽略任何重要的文档或有用的库......

尝试通过这个例子。查看控制台中的消息。

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

只是想提一下你需要改变弯曲修改器.js根据这里 https://stackoverflow.com/a/40492948/7132939使其适用于三个较新版本.js

BendModifier.js使用THREE。Matrix3.getInverse（） 不再工作了。所以你需要改变弯曲修改器.js使用三个。Matrix4.getInverse（..） 和答案中提到的另一个更改链接。

生成文本已经改变 - 使用 THREE.fontLoader（）

完整的工作示例可以在此链接中找到

网站截图 - 链接

和内部链接的完整答案：

THREE中有一个变化.js但调整BendModifier.js脚本非常容易。只需更改线条

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

和

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

在这两种情况下都到 Matrix4 - 所以它们将读取：

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

和

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

刚刚用 three.min.81 尝试了一下.js它工作正常。

相关文章：