JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<p> Click to add a random point to the path </p>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 10;

var points = [], radius = 5;
for (var i=0, l=10; i<=l; i++) {
    points.push(new THREE.Vector3(radius*Math.cos(2*Math.PI/l*i), radius*Math.sin(2*Math.PI/l*i), 0));
}

var spline = new THREE.SplineCurve3(points);
var t = 0;
    
var render = function () {
    requestAnimationFrame(render);
    
    point = spline.getPoint(t);
    cube.position.x = point.x; 
    cube.position.y = point.y; 
    t = (t + 0.005) % 1;
    
    renderer.render(scene, camera);
};

function onClick(event) {
    spline.points.splice(5,0,new THREE.Vector3((Math.random()*2-1)*radius,(Math.random()*2-1)*radius, 0));
}

document.addEventListener( 'click', onClick, false );

render();