How to merge LineSegmentsGeometry and ShapeGeometry?

Questions
,
1

I want to combine a shape geometry and a LineSegmentsGeometry and addgroup the two materials into one object, but the shape is not rendering correctly. Looking for someone who can tell me where the problem is

/**
 *
 * @param geometry
 * @param thickness Line Width
 * @param edge Edge Color
 * @param fill Fill Color
 * @returns
 */
export function triangle(
    geometry: BufferGeometry,
    thickness: number,
    edge: RGBA,
    fill: RGBA,
) {
    const edgeGeometry = new Three.EdgesGeometry(geometry);
    const triangleGeometry = new LineSegmentsGeometry().fromEdgesGeometry(
        edgeGeometry,
    );

    triangleGeometry.addGroup(
        0,
        (triangleGeometry.attributes.position as BufferAttribute).array.length,
        0,
    );
    triangleGeometry.addGroup(
        (triangleGeometry.attributes.position as BufferAttribute).array.length,
        (geometry.attributes.position as BufferAttribute).array.length,
        1,
    );

    const edgePosition = (
        triangleGeometry.attributes.position as BufferAttribute
    ).array;
    const geometryPosition = (geometry.attributes.position as BufferAttribute)
        .array;

    const normal = new Float32Array(
        edgePosition.length + geometryPosition.length,
    );

    for (
        let i = edgePosition.length;
        i < edgePosition.length + geometryPosition.length;
        i += 3
    ) {
        normal[i] = (geometry.attributes.position as BufferAttribute).array[
            i - edgePosition.length
        ];
        normal[i + 1] = (geometry.attributes.position as BufferAttribute).array[
            i + 1 - edgePosition.length
        ];
        normal[i + 2] = 0;
    }

    const mergePosition = new Float32Array(
        (triangleGeometry.attributes.position as BufferAttribute).array.length +
            (geometry.attributes.position as BufferAttribute).array.length,
    );
    const mergeUv = new Float32Array(
        (triangleGeometry.attributes.uv as BufferAttribute).array.length +
            (geometry.attributes.uv as BufferAttribute).array.length,
    );
    const mergeIndex = new Uint16Array(
        (triangleGeometry.index as BufferAttribute).array.length +
            (geometry.index as BufferAttribute).array.length,
    );

    for (
        let i = 0;
        i <
        (triangleGeometry.attributes.position as BufferAttribute).array.length;
        i += 3
    ) {
        mergePosition[i] = (
            triangleGeometry.attributes.position as BufferAttribute
        ).array[i];
        mergePosition[i + 1] = (
            triangleGeometry.attributes.position as BufferAttribute
        ).array[i + 1];
        mergePosition[i + 2] = (
            triangleGeometry.attributes.position as BufferAttribute
        ).array[i + 2];
    }
    for (
        let i = (triangleGeometry.attributes.position as BufferAttribute).array
            .length;
        i < mergePosition.length;
        i += 3
    ) {
        mergePosition[i] = (
            geometry.attributes.position as BufferAttribute
        ).array[
            i -
                (triangleGeometry.attributes.position as BufferAttribute).array
                    .length
        ];
        mergePosition[i + 1] = (
            geometry.attributes.position as BufferAttribute
        ).array[
            i +
                1 -
                (triangleGeometry.attributes.position as BufferAttribute).array
                    .length
        ];
        mergePosition[i + 2] = (
            geometry.attributes.position as BufferAttribute
        ).array[
            i +
                2 -
                (triangleGeometry.attributes.position as BufferAttribute).array
                    .length
        ];
    }

    for (
        let i = 0;
        i <
        (triangleGeometry.attributes.position as BufferAttribute).array.length;
        i += 3
    ) {
        mergeUv[i] = (triangleGeometry.attributes.uv as BufferAttribute).array[
            i
        ];
        mergeUv[i + 1] = (
            triangleGeometry.attributes.uv as BufferAttribute
        ).array[i + 1];
        mergeUv[i + 2] = (
            triangleGeometry.attributes.uv as BufferAttribute
        ).array[i + 2];
    }
    for (
        let i = (triangleGeometry.attributes.uv as BufferAttribute).array
            .length;
        i < mergeUv.length;
        i += 2
    ) {
        mergeUv[i] = (geometry.attributes.uv as BufferAttribute).array[
            i - (triangleGeometry.attributes.uv as BufferAttribute).array.length
        ];
        mergeUv[i + 1] = (geometry.attributes.uv as BufferAttribute).array[
            i +
                1 -
                (triangleGeometry.attributes.uv as BufferAttribute).array.length
        ];
        mergeUv[i + 2] = (geometry.attributes.uv as BufferAttribute).array[
            i +
                2 -
                (triangleGeometry.attributes.uv as BufferAttribute).array.length
        ];
    }

    for (
        let i = 0;
        i < (triangleGeometry.index as BufferAttribute).array.length;
        i += 1
    ) {
        mergeIndex[i] = (triangleGeometry.index as BufferAttribute).array[i];
    }
    for (
        let i = (triangleGeometry.index as BufferAttribute).array.length;
        i < mergeIndex.length;
        i += 1
    ) {
        mergeIndex[i] = (geometry.index as BufferAttribute).array[
            i - (triangleGeometry.index as BufferAttribute).array.length
        ];
    }

    triangleGeometry.setAttribute(
        'position',
        new BufferAttribute(mergePosition, 3),
    );
    triangleGeometry.setAttribute('uv', new BufferAttribute(mergeUv, 2));
    triangleGeometry.setIndex(new BufferAttribute(mergeIndex, 1));
    triangleGeometry.setAttribute('normal', new BufferAttribute(normal, 3));


    const lineMaterial = [
        new LineMaterial({
            color: new Three.Color(
                `rgb(${edge.r},${edge.g},${edge.b})`,
            ).getHex(),
            linewidth: thickness,
            transparent: true,
            opacity: edge.a,
        }),
        new Three.MeshBasicMaterial({
            color: new Three.Color(`rgb(${fill.r},${fill.g},${fill.b})`),
            transparent: true,
            opacity: fill.a,
            side: Three.DoubleSide,
        }),
    ];

    const triangle = new Three.Mesh(triangleGeometry, lineMaterial);

    return triangle;
}