Fixing Text Alignment in TextGeometry

The misalignment issue you're experiencing with TextGeometry is likely due to several factors related to how the text is positioned and rotated. Here are the key issues and solutions:

Main Issues

1. Rotation after positioning: When you apply rotations after setting positions, it can cause misalignment because the rotation changes the effective position of each character.

2. Cumulative error: Small rounding errors or inconsistencies in character widths can accumulate as you add more characters.

3. Transformation order: The order of transformations (translate, rotate, scale) matters in 3D space.

Solution Approach

Here's how to fix the alignment issues:

JAVASCRIPTCopied
const loader = new FontLoader();
loader.load("https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", (font) => {
    textMeshesRef.current = [];
    hoverPlaneRefs.current = [];

    allPosition.forEach(({ title, x, y, z }, index) => {
        const textGroup = new THREE.Group();
        
        // Position and rotate the group first
        textGroup.position.set(x, y, z);
        // Apply the rotation to the group instead of individual characters
        textGroup.lookAt(new THREE.Vector3(x, y + 0.6, z));
        textGroup.rotation.z = -1.5;
        
        textMeshesRef.current[index] = [];
        hoverPlaneRefs.current[index] = [];

        let currentOffset = 0;

        [...title].forEach((char, i) => {
            const geometry = new TextGeometry(char, {
                font,
                size: 0.05,
                height: 0.005,
                // Add these options for better alignment
                curveSegments: 12,
                bevelEnabled: false
            });
            
            geometry.computeBoundingBox();
            const charWidth = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
            const charHeight = geometry.boundingBox.max.y - geometry.boundingBox.min.y;

            const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
            const mesh = new THREE.Mesh(geometry, material);

            // Center the character on its own origin
            geometry.translate(-geometry.boundingBox.min.x, 0, 0);
            
            // Position relative to the group, not in world space
            mesh.position.set(currentOffset, -charHeight / 2, 0);
            mesh.userData.originalPosition = mesh.position.clone();
            
            // No need for individual rotations since the group is already rotated
            
            textMeshesRef.current[index].push(mesh);
            textGroup.add(mesh);

            // Update offset for next character
            currentOffset += charWidth + 0.025;
        });

        sceneRef?.current?.add(textGroup);

        // Update hover plane to match the group's transformation
        const planeGeometry = new THREE.PlaneGeometry(0.5, 0.1);
        const planeMaterial = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            transparent: true,
            opacity: 0
        });

        const hoverPlane = new THREE.Mesh(planeGeometry, planeMaterial);
        // Position relative to the text group
        hoverPlane.position.set(x + 0.025, y, z + 0.2);
        hoverPlane.lookAt(new THREE.Vector3(x + 0.025, y + 0.6, z + 0.2));
        hoverPlane.rotation.z = -1.5;
        sceneRef?.current?.add(hoverPlane);
        hoverPlaneRefs.current[index].push(hoverPlane);
    });

    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("click", onMouseClick);
});

Key Improvements

1. Group-based transformations: Apply rotations to the entire text group rather than individual characters.

2. Proper character centering: Use geometry.translate() to center each character properly.

3. Simplified positioning: Position characters relative to the group, which simplifies the math and reduces cumulative errors.

4. Consistent transformation order: Apply transformations in a consistent order (translate → rotate).

This approach should give you much better text alignment, especially for longer strings of text.