Three.js 3D文本弯曲

Question

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

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

Answer 2

只是想提一下，您需要根据此处更改 BendModifier.js /sf/answers/2834506391/ 以使其适用于较新版本的three.js

BendModifier.js 使用不再工作的 THREE.Matrix3.getInverse()。因此，您需要更改 BendModifier.js 以使用 THREE.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 试了一下，效果很好。