Three.js中TextGeometry创建的3D文字视角倾斜时字母重叠问题

使用Three.js的TextGeometry创建3D文字时，从倾斜视角查看出现字母重叠现象，问题截图如下：

以下是实现该3D文字的TypeScript代码：

class MyScene {
    scene: THREE.Scene
    camera: THREE.PerspectiveCamera
    renderer: THREE.WebGLRenderer
    group: THREE.Group
    elementSelector: string
    cameraTarget: THREE.Vector3

    constructor(elementSelector: string) {
        this.elementSelector = elementSelector

        const scene = new THREE.Scene();
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        const camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, -1, 1500);


        scene.background = new THREE.Color(0xffffff);
        // scene.fog = new THREE.Fog(0xffffff, 250, 1400);

        camera.position.set(0, 400, 3000);

        this.cameraTarget = new THREE.Vector3(0, 150, 0);

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        const dirLight = new THREE.DirectionalLight(0xffffff, 0.2);
        dirLight.position.set(0, 0, 1).normalize();
        scene.add(dirLight);

        const pointLight = new THREE.PointLight(0xffffff, 1.5);
        pointLight.position.set(0, 400, 100);
        scene.add(pointLight);


        this.scene = scene
        this.camera = camera
        this.renderer = renderer

        const resizeObserver = new ResizeObserver(() => this._onResize());
        let containerElement = document.querySelector(elementSelector)
        if (!containerElement) {
            containerElement = document.body
        }
        resizeObserver.observe(containerElement, { box: 'content-box' });

        const group = new THREE.Group();
        // group.position.y = 100;
        scene.add(group);
        this.group = group

        var loader = new FontLoader()
        loader.load('assets/fonts/sourcecodepro_bold.typeface.json', font => {
            const textGeo = new TextGeometry("MyText", {
                font: font,
                size: 200,
                height: 50,
                curveSegments: 12,
                bevelEnabled: false,
                bevelThickness: 0.5,
                bevelSize: 0.3,
                bevelOffset: 0,
                bevelSegments: 5,
            })

            // const materials = [
            //     new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // front
            //     new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // side
            // ]
            const materials = [
                new THREE.MeshPhongMaterial({ color: 0x00ff00, flatShading: true }), // front
                new THREE.MeshPhongMaterial({ color: 0x00ff00 }) // side
            ]
            const textMesh = new THREE.Mesh(textGeo, materials);

            textGeo.computeBoundingBox();
            const centerOffset = - 0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);

            textMesh.position.x = centerOffset;
            textMesh.position.y = 30;
            textMesh.position.z = 0;

            textMesh.rotation.x = 0;
            textMesh.rotation.y = Math.PI * 2;

            group.add(textMesh);
        })


        // container.appendChild(renderer.domElement);
    }

    _onResize() {
        const container = document.querySelector(this.elementSelector);
        const width = container ? container.clientWidth : 100;
        const height = container ? container.clientHeight : 100;

        this.renderer.setSize(width, height);
        this.renderer.render(this.scene, this.camera);
    }

    onCreated() {
        this.mounted = true
        const root = this
        const animate = function () {
            requestAnimationFrame(animate)
            root.group.rotation.y += 0.02;
            root.camera.lookAt(root.cameraTarget);
            root.renderer.render(root.scene, root.camera)
        }
        animate()
    }
}

出现这个问题的核心原因是相机的近裁剪面设置为负数，导致渲染时深度排序逻辑出错，进而引发字母重叠的视觉问题。

修复步骤： #

• 将相机的近裁剪面参数从 -1 修改为正数，比如 1。
• 确保远裁剪面参数大于场景中物体的最大距离，避免物体被意外裁剪。

修改后的相机初始化代码：

const camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 1, 1500);

额外优化建议： #

1. 显式启用渲染器的深度测试（默认已开启，但可确保设置生效）：

   renderer.setDepthTest(true);
   

2. 确保材质开启深度写入（默认开启，若之前修改过需恢复）：

   new THREE.MeshPhongMaterial({ color: 0x00ff00, flatShading: true, depthWrite: true })
   

修改完成后，倾斜视角下的3D文字将正确显示，不会出现重叠现象。

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