Fixing the Gap in a Closed Ribbon Mesh

The issue with your ribbon mesh appears to be in how you're attempting to close the loop. Let me suggest some improvements to your approach.

The Problem

When creating a closed ribbon from a curve, there are a few common issues that can cause gaps:

1. The way you're adding the closing points doesn't properly connect to the starting points
2. The order of vertices when creating faces/triangles for the mesh
3. Inconsistency between the first and last Frenet frames

Solution

Here's a modified approach to create a properly closed ribbon:

JAVASCRIPTCopied
// Ribbon mesh creation
let number = 1000;
let closed = true; // Ensure the curve is treated as closed
let frenetFrames = this.curve.computeFrenetFrames(number, closed);
let spacedPoints = this.curve.getSpacedPoints(number);
let dimensions = [-0.1, 0.1];

let finalPoints = [];

// First side of the ribbon
for (let i = 0; i <= number; i++) {
    // Use modulo to wrap around to the first point when i === number
    const idx = i % number;
    const point = spacedPoints[idx].clone();
    const binormalShift = frenetFrames.binormals[idx].clone().multiplyScalar(dimensions[0]);
    finalPoints.push(point.add(binormalShift));
}

// Second side of the ribbon (in reverse order to ensure proper face creation)
for (let i = number; i >= 0; i--) {
    const idx = i % number;
    const point = spacedPoints[idx].clone();
    const binormalShift = frenetFrames.binormals[idx].clone().multiplyScalar(dimensions[1]);
    finalPoints.push(point.add(binormalShift));
}

// Now create your geometry from finalPoints
// Make sure to create faces/triangles that connect the last points to the first points

Key Changes

1. Loop Structure: Changed the loop to go from 0 to number (inclusive) and use modulo to wrap around
2. Point Order: Added the second side in reverse order, which helps when creating faces
3. Explicit Closing: Made sure the last point connects back to the first point by using the same index

Additional Tips

If you're using a BufferGeometry to create the mesh, ensure you're properly defining the indices to create faces that connect the end of the ribbon to the beginning.

For a complete solution, you might want to look at how Three.js handles tube geometry creation, as it solves similar problems when creating closed tubes along paths.