I’m having a little issue here. I’m rendering a THREE.CatmullRomCurve3 but it is not rendering as per the points given. Attaching the code snippet and the snip of the output here.

**Code snippet:**

```
const camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.5, 2000);
camera.position.copy( new THREE.Vector3(1070,-900,0));
camera.lookAt(1078.3760583512485, -896.7445069923997, -25.48);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#233143");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const points= [];
points.push(new THREE.Vector3(1078.3760583512485, -896.7445069923997, -25.48));
points.push(new THREE.Vector3(1078.3294048905373, -896.5172636993229, -25.49));
points.push(new THREE.Vector3(1078.5533414967358, -895.2421761974692, -25.48));
points.push(new THREE.Vector3(1078.8612543307245, -894.7750648967922, -25.71));
points.push(new THREE.Vector3(1079.1878285482526, -894.7119417488575, -25.66));
points.push(new THREE.Vector3(1079.5797176100314, -894.6866924837232, -25.65));
points.push(new THREE.Vector3(1081.27790354006, -894.8381880447268, -25.66));
points.push(new THREE.Vector3(1088.4998590946198, -895.4946687817574, -25.68));
points.push(new THREE.Vector3(1100.3125150762498, -896.832879383117, -25.63));
points.push(new THREE.Vector3(1114.1126084402204, -898.2847114242613, -25.65));
points.push(new THREE.Vector3(1123.1353875361383, -899.1810597889125, -25.66));
points.push(new THREE.Vector3(1133.763045642525, -900.0900326892734, -25.68));
points.push(new THREE.Vector3(1141.0316546559334, -900.7465130649507, -25.68));
points.push(new THREE.Vector3(1141.0316546559334, -900.7465130649507, -24.75));
points.push(new THREE.Vector3(1141.1063001919538, -900.7591376900673, -24.74));
points.push(new THREE.Vector3(1147.6191231589764, -901.2136240750551, -24.74));
points.push(new THREE.Vector3(1150.7169128786772, -901.4282426387072, -24.73));
points.push(new THREE.Vector3(1158.1068208869547, -901.9206028580666, -24.74));
points.push(new THREE.Vector3(1159.9076444301754, -902.0468490608037, -24.74));
points.push(new THREE.Vector3(1169.6115640364587, -902.6275815851986, -24.72));
points.push(new THREE.Vector3(1172.2521498519927, -902.7790770195425, -24.73));
points.push(new THREE.Vector3(1183.6169326212257, -903.359809499234, -24.73));
points.push(new THREE.Vector3(1189.868496214971, -903.6880495809019, -24.72));
// Rendering the curve
const randomSpline = new THREE.CatmullRomCurve3(points);
const extrudeSettings = {
steps: 30,
bevelEnabled: false,
extrudePath: randomSpline
};
const wallShape = new THREE.Shape();
const wallHeight = 1 / 2;
const wallWidth = 0.1 / 2;
wallShape.moveTo(-wallHeight, -wallWidth);
wallShape.lineTo(-wallHeight, wallWidth);
wallShape.lineTo(wallHeight, wallWidth);
wallShape.lineTo(wallHeight, -wallWidth);
const geo = new THREE.ExtrudeBufferGeometry(wallShape, extrudeSettings);
const mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ color: 0xFF5733 }));
scene.add(mesh);
// Line to vsualise the expected curve position
const material = new THREE.LineBasicMaterial( { color: 0xFF5733 } );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const line = new THREE.Line( geometry, material );
scene.add(line);
renderer.render(scene, camera);
```

**Output:**

As seen in the output, the CatmullRomCurve3 is rendered in black color and also, to visualise the exact curve that’s supposed to render I have rendered a THREE.Line as well giving it the same points as of the curve. I suspect the curve is not rendering as expected as the given points are too proximal to each other. Any suggestions to resolve this would be appreciated.