为什么我的threejs 3d textgeometry从某个Angular 看时字母重叠？

下面是代码：

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()
    }
}