Three.js 3D 文字弯曲

Question

这在r69版本中还可用吗？我正准备“滚动”我的程序，但在继续之前，想确保自己没有漏看任何重要的文件或有用的库...

- user1440197

Answer 1

尝试完成这个示例。查看控制台中的信息。

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

- gevaraweb

---

这很有帮助。不过链接很难找，你是怎么找到它的？ - user1440197

Answer 2

我想提醒你需要根据此处https://stackoverflow.com/a/40492948/7132939更改BendModifier.js以使其与更新版本的three.js一起工作。BendModifier.js使用的THREE.Matrix3.getInverse()不再起作用。因此，您需要更改BendModifier.js以使用THREE.Matrix4.getInverse(..)和链接中提到的其他更改。生成文本的方法也已更改，应使用THREE.fontLoader()。可通过此链接找到完整的工作示例。其中包含网站截图的链接为此处。在两个地方将Matrix3更改为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，并且它可以正常工作。

- Joat Mofa

---

虽然此链接可能回答了问题，但最好在这里包含答案的必要部分，并提供链接作为参考。如果链接页面更改，仅有链接的回答可能会失效。-【来自审查】 - Liam

外部链接只是一个例子 - 链接到其他stackoverflow答案的链接包含所需的代码更改 - 但我理解你的观点。 - Joat Mofa

感谢上帝您发布了这个答案，您让我的一天 :P - Abdur Rahman