JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.114/build/three.js"></script>

CSS

body {
	margin: 0;
}
canvas {
	display: block;
}

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 )
);


// create curve mesh

const geometry = new THREE.BufferGeometry().setFromPoints( cubicBezierCurve.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 = cubicBezierCurve.getPoints( 20 );

for ( let 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 );

}