JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script src="https://threejs.org/examples/js/math/ConvexHull.js"></script>

<script src="https://threejs.org/examples/js/geometries/ConvexGeometry.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2.5, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper());

var curve = new THREE.CatmullRomCurve3([
	new THREE.Vector3(),
  new THREE.Vector3(2,0, 0),
  new THREE.Vector3(2, 2, 2)
]);

var geom = new THREE.TubeBufferGeometry( curve, 10, 0.5, 10, false );
var mat = new THREE.MeshBasicMaterial({color:"aqua", wireframe:true});
var tube = new THREE.Mesh(geom, mat);
scene.add(tube);

var pos = geom.attributes.position;
var startPoints = [];
for(let i = 0; i <= geom.parameters.radialSegments; i++){

	startPoints.push(curve.getPoint(0));
	startPoints.push(new THREE.Vector3().fromBufferAttribute(pos, i));
  
}

var pointsStart = new THREE.Points(new THREE.BufferGeometry().setFromPoints(startPoints), new THREE.PointsMaterial({size: 0.25, color: "yellow"}));
console.log(pointsStart.geometry.attributes.position.count);
scene.add(pointsStart);

var endPoints = [];
for (let i = (geom.parameters.radialSegments + 1) * geom.parameters.tubularSegments; i < pos.count; i++){
	endPoints.push(curve.getPoint(1));
	endPoints.push(new THREE.Vector3().fromBufferAttribute(pos, i));
}
/* var pointsEnd = new THREE.Mesh( new THREE.BufferGeometry().setFromPoints(endPoints), new THREE.PointsMaterial({color: "magenta", size: 0.25}));
console.log(pointsEnd.geometry.attributes.position.count); */
var geom = new THREE.ConvexGeometry( endPoints );
var meshMaterial = new THREE.MeshLambertMaterial( {
					color: 0xffffff,
					opacity: 0.5,
					transparent: true
				} );
var pointsEnd = new THREE.Mesh(geom, meshMaterial);
scene.add(pointsEnd);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
})