JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r81/three.js"></script>

JavaScript

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 30;

const cubicBezierCurve = new THREE.CubicBezierCurve3(
	new THREE.Vector3( -10, -5, 0 ),
	new THREE.Vector3( -5, 10, 0 ),
	new THREE.Vector3( 0, -10, 0 ),
	new THREE.Vector3( 5, 5, 0 )
);

const lineCurve = new THREE.LineCurve3( 
	new THREE.Vector3( 5, 5, 0 ), 
  new THREE.Vector3( 10, 0, 0 ) 
);

const curvePath = new THREE.CurvePath();
curvePath.add( cubicBezierCurve );
curvePath.add( lineCurve );
curvePath.closePath();

// create curve mesh

const geometry = new THREE.Geometry();
geometry.vertices = curvePath.getPoints( 100 );

const material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
const curveObject = new THREE.Line( geometry, material );
scene.add( curveObject );

// visualize spaced points 

const sphereGeomtry = new THREE.SphereBufferGeometry( 0.1 );
const sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

const spacedPoints = curvePath.getSpacedPoints( 20 );

for ( point of spacedPoints ) {

	const helper = new THREE.Mesh( sphereGeomtry, sphereMaterial );
	helper.position.copy( point );
	scene.add( helper );

}

// renderer

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x20252f );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

animate();

window.addEventListener( 'resize', onResize, false );

function onResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

	requestAnimationFrame( animate );

	render();

}

function render() {

	renderer.render( scene, camera );

}