How to correctly rotate objects along a spline - Three.js

Question

I have an object in a scene which performs a raycast for each side of the geometry. From this raycast, I have created a spline using the THREE.CatmullRomCurve3 function and visualised using a TubeGeometry.

I basically want to rotate and position some shapes so they follow the spline's direction. I have tried implementing WestLangley's solution to the following question - Three.JS Object following a spline path - rotation / tanget issues & constant speed issue - It mostly works, the only thing wrong with it is that i can't seem to get the shapes rotation to be consistent. It seems the objects following the horizontal splines are a different orientation to the vertical splines.

Ideally i would like the horizontal shapes to be flipped 90 degrees to match the vertical shapes.

Any ideas would be appreciated? Thanks

Image illustrating the problem

//Create spline
var spline = new THREE.CatmullRomCurve3(splinePoints);

//Add a few shapes
for (var j = 1; j < 4; j++) {

    var curve = new THREE.EllipseCurve(0, 0, 5, 5, 0, Math.PI, false);

    var points = curve.getSpacedPoints(20);
    points.push(points[0].clone());

    var shape = new THREE.Shape(points);
    var geometry = new THREE.ShapeGeometry(shape);

    var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide }));
    scope.add(mesh);

    placeObjectOnSpline(spline, j / 4, mesh);
}

function placeObjectOnSpline(spline, pos, mesh) {

    var axis = new THREE.Vector3();

    var up = new THREE.Vector3(0, 1, 0);

    mesh.position.copy(spline.getPointAt(pos));

    var tangent = spline.getTangentAt(pos).normalize();

    axis.crossVectors(up, tangent).normalize();

    var radians = Math.acos(up.dot(tangent));

    mesh.quaternion.setFromAxisAngle(axis, radians);
}