Why does my CatmullRomCurve3 sometimes produce a faceless TubeGeometry? - three.js

Question

I'm visualizing some paths using TubeGeometry from a CatmullRomCurve3. Some paths work fine, but some result in faceless geometries.
Here is one of the paths that doesn't work: https://jsfiddle.net/ot0ejgvb/1/
(Relevant code starts at line 1067)
Part of the code is replicated here:
let coords = [
[102.823, 82.058, 0.2],[102.823, 82.058, 0.2],[102.823, 82.058, 0.2],
[103.865, 81.876, 0.2],[146.022, 81.873, 0.2],[147.129, 82.045, 0.2],
[148.051, 82.44, 0.2],[148.89, 83.075, 0.2],[149.502, 83.802, 0.2],
[149.906, 84.535, 0.2],[152.654, 90.769, 0.2],[152.96, 91.93, 0.2],
[152.914, 93.091, 0.2],[150.307, 106.839, 0.2],[150.105, 107.545, 0.2],
[149.758, 108.186, 0.2],[134.594, 127.839, 0.2],[134.121, 128.348, 0.2],
[133.487, 128.793, 0.2],[132.444, 129.266, 0.2],[131.426, 129.413, 0.2],
[118.676, 129.416, 0.2],[117.579, 129.268, 0.2],[116.498, 128.783, 0.2],
[115.814, 128.29, 0.2],[115.199, 127.575, 0.2],[100.368, 108.359, 0.2],
[99.878, 107.448, 0.2],[99.702, 106.826, 0.2],[97.09, 93.11, 0.2],
[97.018, 92.208, 0.2],[97.275, 90.94, 0.2],[100.091, 84.543, 0.2],
[100.444, 83.885, 0.2],[101.077, 83.108, 0.2],[101.888, 82.475, 0.2],
[102.768, 82.082, 0.2],[102.768, 82.082, 0.2]
];
let curve = new THREE.CatmullRomCurve3(coords.map(([x, y, z]) => new THREE.Vector3(x, y, z)));
var geometry = new THREE.TubeGeometry(curve, coords.length, 2, 8, false);
What's going on, and how do I prevent it?

Answer 1

What's going on, and how do I prevent it?
TubeGeometry computes frenet frame in order to generate the vertex data. This computation produces invalid output if you have duplicated points in your array. If you remove these points, the generation works again.
const renderer = new THREE.WebGLRenderer({
antialias: true
});
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.y = 160;
camera.position.z = 800;
camera.lookAt(new THREE.Vector3(100, 80, 0));
const controls = new THREE.OrbitControls(camera, renderer.domElement);
const light = new THREE.PointLight(0xffffff, 1, 0);
scene.add(light)
const coords = [
[102.823, 82.058, 0.2],
[103.865, 81.876, 0.2],
[146.022, 81.873, 0.2],
[147.129, 82.045, 0.2],
[148.051, 82.44, 0.2],
[148.89, 83.075, 0.2],
[149.502, 83.802, 0.2],
[149.906, 84.535, 0.2],
[152.654, 90.769, 0.2],
[152.96, 91.93, 0.2],
[152.914, 93.091, 0.2],
[150.307, 106.839, 0.2],
[150.105, 107.545, 0.2],
[149.758, 108.186, 0.2],
[134.594, 127.839, 0.2],
[134.121, 128.348, 0.2],
[133.487, 128.793, 0.2],
[132.444, 129.266, 0.2],
[131.426, 129.413, 0.2],
[118.676, 129.416, 0.2],
[117.579, 129.268, 0.2],
[116.498, 128.783, 0.2],
[115.814, 128.29, 0.2],
[115.199, 127.575, 0.2],
[100.368, 108.359, 0.2],
[99.878, 107.448, 0.2],
[99.702, 106.826, 0.2],
[97.09, 93.11, 0.2],
[97.018, 92.208, 0.2],
[97.275, 90.94, 0.2],
[100.091, 84.543, 0.2],
[100.444, 83.885, 0.2],
[101.077, 83.108, 0.2],
[101.888, 82.475, 0.2],
[102.768, 82.082, 0.2]
];
const curve = new THREE.CatmullRomCurve3(coords.map(([x, y, z]) => new THREE.Vector3(x, y, z)));
const material = new THREE.MeshLambertMaterial({
color: 0xff0000,
emissive: 0x555555,
emissiveIntensity: .5,
side: THREE.DoubleSide
});
const geometry = new THREE.TubeGeometry(curve, coords.length, 2, 8, false);
geometry.center();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
body {
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.116.1/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.116.1/examples/js/controls/OrbitControls.js"></script>