如何为Three.js的TextGeometry生成中心骨架线条？

嘿，这个需求我之前折腾过，刚好可以给你捋清楚怎么一步步实现～核心思路是先从字体文件里拿到字符的2D轮廓（Shape），再基于这个轮廓生成中心路径，最后把它转换成3D骨架线条。

第一步：先拿到字符的2D轮廓Shape #

原来的代码直接生成了TextGeometry，但我们需要更底层的Shape数据——毕竟TextGeometry就是基于这些Shape挤压出来的。修改你的createText函数，先加载字体，然后用font.generateShapes获取每个字符的2D轮廓：

var scoreForText = 5;
function createTextSkeleton() {
    var loader = new THREE.FontLoader();
    loader.load('/fonts/helvetiker_regular.typeface.json', function (font) {
        // 生成字符的2D Shape集合，参数和TextGeometry保持一致
        var textShapes = font.generateShapes(scoreForText.toString(), {
            size: 80,
            curveSegments: 16 // 调高分段数，让轮廓更平滑
        });

        // 遍历每个Shape，生成对应的骨架线条
        textShapes.forEach(shape => createSkeletonFromShape(shape));
    });
}

第二步：从Shape生成中心骨架线条 #

这里分两种实用的思路，你可以根据自己的需求选：

思路1：快速生成平滑中心曲线（适合简单字符） #

如果你的字符都是单轮廓的（比如S、L、5这类），直接提取Shape的轮廓点，用CatmullRomCurve3生成平滑曲线，再转成管道几何体作为骨架：

function createSkeletonFromShape(shape) {
    // 从Shape中获取均匀分布的轮廓点
    var shapePoints = shape.getSpacedPoints(20); // 20个点，数量越多曲线越平滑
    // 转成3D坐标（Z轴先设为0，后续可以调整挤压方向）
    var curvePoints = shapePoints.map(point => new THREE.Vector3(point.x, point.y, 0));

    // 创建平滑曲线
    var skeletonCurve = new THREE.CatmullRomCurve3(curvePoints);
    // 生成管道几何体，作为可视化的骨架（半径2可以自己调）
    var skeletonGeom = new THREE.TubeGeometry(skeletonCurve, 100, 2, 8, false);
    var skeletonMat = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var skeletonMesh = new THREE.Mesh(skeletonGeom, skeletonMat);

    // 和原TextGeometry对齐位置（每个Shape自带字符的偏移坐标）
    skeletonMesh.position.copy(shape.position);
    scene.add(skeletonMesh);
}

思路2：生成精准的中轴线（适合复杂字符） #

如果需要更精准的字符中轴线（比如带笔画厚度的字符，取轮廓的中线），可以用Shape偏移的方法。Three.js原生没有偏移功能，你可以用第三方工具库three-path-utils来实现：

// 先引入three-path-utils库（npm install three-path-utils）
import { ShapeUtils } from 'three-path-utils';

function createSkeletonFromShape(shape) {
    // 假设字符笔画厚度为10，向内偏移一半厚度得到中轴线
    var strokeWidth = 10;
    var offsetShape = ShapeUtils.offsetShape(shape, -strokeWidth / 2);

    // 提取偏移后的Shape点生成曲线
    var offsetPoints = offsetShape.getSpacedPoints(20);
    var curvePoints = offsetPoints.map(point => new THREE.Vector3(point.x, point.y, 0));
    
    var skeletonCurve = new THREE.CatmullRomCurve3(curvePoints);
    var skeletonGeom = new THREE.TubeGeometry(skeletonCurve, 100, 2, 8, false);
    var skeletonMat = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var skeletonMesh = new THREE.Mesh(skeletonGeom, skeletonMat);
    
    skeletonMesh.position.copy(shape.position);
    scene.add(skeletonMesh);
}

第三步：扩展成3D贯穿骨架（可选） #

如果你需要的是贯穿整个3D文本厚度（也就是原TextGeometry的height方向）的骨架，比如每个2D中心点沿Z轴拉一条线段，可以这样写：

function create3DSkeletonFromShape(shape) {
    var shapePoints = shape.getSpacedPoints(20);
    var extrusionHeight = 5; // 和原TextGeometry的height参数保持一致
    var skeletonGeom = new THREE.BufferGeometry();
    var vertices = [];

    shapePoints.forEach(point => {
        // 每个轮廓中心点生成Z轴方向的线段，从-z/2到z/2
        vertices.push(point.x, point.y, -extrusionHeight/2);
        vertices.push(point.x, point.y, extrusionHeight/2);
    });

    skeletonGeom.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    var skeletonMat = new THREE.LineBasicMaterial({ color: 0x00ff00 });
    var skeletonLines = new THREE.LineSegments(skeletonGeom, skeletonMat);
    
    skeletonLines.position.copy(shape.position);
    scene.add(skeletonLines);
}

这样生成的骨架就完全和你原来的3D文本对齐了，之后你可以删掉TextGeometry，沿着这条骨架路径添加你需要的物体就行～

内容的提问来源于stack exchange，提问作者JJ Gerrish