如何为Three.js中通过TextGeometry创建的文字对象添加边框

嘿，我来帮你搞定这个问题！你已经用TextGeometry做出了带深度的3D文字，现在想要给它加上那种中间蓝色、外围红色的边框效果对吧？下面给你分享几个实用的方案：

方案一：双重网格叠加（最直观可控） #

这个方法的思路很简单：做两个文字Mesh，一个是你原来的蓝色文字，另一个是放大一点的红色“边框”文字，把边框放在原文字的下面，就能实现你要的效果。

基于你现有的代码，修改后的示例如下：

const font = await loadFont(fontUrl)
// 创建原文字的Geometry和Mesh（你的原有代码）
const textGeometry = new TextGeometry("文字", {
    font: font,
    size: size,
    depth: 10,
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 0
})
const textMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff }) // 蓝色原文字
const textMesh = new THREE.Mesh(textGeometry, textMaterial)

// 创建边框用的Geometry和Mesh
const borderGeometry = new TextGeometry("文字", {
    font: font,
    size: size,
    depth: 10,
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 0
})
const borderMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 }) // 红色边框
const borderMesh = new THREE.Mesh(borderGeometry, borderMaterial)

// 放大边框，让它刚好显示在原文字外围
borderMesh.scale.set(1.05, 1.05, 1)
// 确保原文字在边框上方显示（避免被遮挡）
textMesh.renderOrder = 1
borderMesh.renderOrder = 0

// 把两个Mesh放进同一个组，方便整体控制位置、旋转等
const textGroup = new THREE.Group()
textGroup.add(borderMesh)
textGroup.add(textMesh)
scene.add(textGroup)

小提示： #

• 你可以调整borderMesh.scale的数值来控制边框的粗细，比如想更粗就设成1.08，更细就设成1.03；
• 如果你的文字开启了bevel（倒角），可能需要微调缩放比例或者TextGeometry的参数，让边框贴合得更自然；
• 也可以不用缩放，直接把边框的size参数设得比原文字大一点，效果是一样的。

关于troika-three-text的补充 #

你提到试过troika-three-text，它确实是个很棒的2D文字渲染库，但它本身是面向平面文字设计的，原生没有3D深度支持，所以如果你的需求是带深度的3D文字加边框，还是上面的双重网格方案更适合你。

备选方案：OutlineEffect（轻量但灵活性稍弱） #

如果你不想做两个Mesh，也可以试试Three.js的OutlineEffect，它能给Mesh添加轮廓效果。不过这个方法的样式调整不如双重网格灵活，而且对于带深度的3D文字，轮廓可能会有些边缘奇怪的情况，你可以根据需求尝试：

import { OutlineEffect } from 'three/addons/effects/OutlineEffect.js';

// 初始化Effect
const effect = new OutlineEffect(renderer);

// 渲染时替换原来的renderer.render(scene, camera)
effect.render(scene, camera);

// 设置文字Mesh的轮廓样式
textMesh.material.outlineColor = new THREE.Color(0xff0000);
textMesh.material.outlineWidth = 0.05;

备注：内容来源于stack exchange，提问作者thor lee