如何在ThreeJS中实时更新3D时钟的文本内容？

你的代码主要有两个问题导致文本不更新：

1. 仅在字体加载时创建了一次Date对象，后续updateTime里的时间都是基于这个旧对象，不会获取当前实时时间；
2. 即使更新了时间变量，也没有重新生成文本几何体并替换到网格上，视觉上不会有变化。

以下是简化的修复方案，核心思路是每次更新时获取新时间，仅在时间变化时重建文本几何体并替换：

fontLoader.load('./fonts/Digital-7_Regular.json', function (font) {
    let hour, minute, second;
    let textMesh;

    // 初始化时间并创建初始文本
    function initText() {
        const time = new Date();
        hour = time.getHours();
        minute = time.getMinutes();
        second = time.getSeconds();

        const textGeometry = new THREE.TextGeometry(`${hour}:${minute}:${second}`, {
            font: font,
            size: 1,
            height: 1
        });
        textGeometry.center(); // 让文本居中，避免位置偏移

        textMesh = new THREE.Mesh(textGeometry, [
            new THREE.MeshBasicMaterial({ color: 0x00ff00 })
        ]);
        scene.add(textMesh);
        textMesh.scale.set(.3, .3, .3);
        textMesh.position.x = -0.45;
        textMesh.position.y = -0.75;
        textMesh.position.z = 0.06;
    }

    initText();

    function updateTime(){
        const newTime = new Date();
        const newHour = newTime.getHours();
        const newMinute = newTime.getMinutes();
        const newSecond = newTime.getSeconds();

        // 仅当时间发生变化时更新文本，避免不必要的性能消耗
        if (newHour !== hour || newMinute !== minute || newSecond !== second) {
            hour = newHour;
            minute = newMinute;
            second = newSecond;

            // 销毁旧几何体，防止内存泄漏
            textMesh.geometry.dispose();
            // 创建新的文本几何体
            const newTextGeometry = new THREE.TextGeometry(`${hour}:${minute}:${second}`, {
                font: font,
                size: 1,
                height: 1
            });
            newTextGeometry.center();
            // 更新网格的几何体
            textMesh.geometry = newTextGeometry;
            // 保持原位置
            textMesh.position.x = -0.45;
            textMesh.position.y = -0.75;
            textMesh.position.z = 0.06;
        }

        window.requestAnimationFrame(updateTime);
    }
    
    updateTime()
})

关键说明： #

• 每次updateTime都创建新的Date对象，确保获取实时时间；
• 只有时间变化时才重建文本几何体，减少性能开销；
• 销毁旧的geometry对象，避免ThreeJS内存泄漏；
• 调用textGeometry.center()让文本的中心点对齐网格原点，保证更新后位置一致。

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