Hi, I tried to add spline to the points using mouse click but not working So Please if any body to fix this problem.
Here is the code That I Use 
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var vec = raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0, 1,1)));
const x = vec.x;
const y =vec.y;
const z = vec.z;
vertices.push( new THREE.Vector3(x, y, z) );
const customgeometry=new THREE.BufferGeometry().setFromPoints(vertices);
const cutomMaterial=new THREE.PointsMaterial( { color: 0x888888,size:0.3 } );
const points = new THREE.Points( customgeometry, cutomMaterial );
scene.add( points );
var curve = new THREE.SplineCurve( [ ] ),
spline = new THREE.Line(
new THREE.BufferGeometry(),
new THREE.LineBasicMaterial( { color: 'green' } )
);
scene.add( spline );
// add the point to the curve
curve.points.push( new THREE.Vector3(mouse.x,mouse.y,mouse.z) );
curve = new THREE.CatmullRomCurve3( curve.points );
var po = curve.getPoints( 20*curve.points.length );
// regenerate its image
spline.geometry.dispose( );
spline.geometry = new THREE.BufferGeometry();
spline.geometry.setFromPoints( po );
I would Like the spline Like This :
Add point to spline
Could you please put the code into a close block? It’s not very readable in the current form so its hard to help 
can you check please I put The code in close block as you request Thank you
I Tried To use This code
const x = vec.x;
const y =vec.y;
const z = vec.z;
vertices.push( new THREE.Vector3(x, y, z) );
const customgeometry=new THREE.BufferGeometry().setFromPoints(vertices);
const cutomMaterial=new THREE.PointsMaterial( { color: 0x888888,size:0.3 } );
const points = new THREE.Points( customgeometry, cutomMaterial );
scene.add( points );
const a = vertices[vertices.length-2].x;
const b =vertices[vertices.length-2].y;
const c = vertices[vertices.length-2].z;
const d = vertices[vertices.length-3].x;
const e =vertices[vertices.length-3].y;
const f = vertices[vertices.length-3].z;
const curve = new THREE.CatmullRomCurve3( [
new THREE.Vector3( x, 0, z ),
new THREE.Vector3(d,0,f ),
new THREE.Vector3( a,0,c ),
] );
const po = curve.getPoints( 150 );
const geometrycu = new THREE.BufferGeometry().setFromPoints( po );
const materialcu = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// Create the final object to add to the scene
const curveObject = new THREE.Line( geometrycu, materialcu );
scene.add( curveObject );
but gave me this
<!DOCTYPE html>
<html>
<head>
<title>Three.js Spline Curve</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
let scene, camera, renderer;
const vertices = [];
const customGeometry = new THREE.BufferGeometry().setFromPoints(vertices);
const customMaterial = new THREE.PointsMaterial({ color: 0x888888, size: 0.3 });
const points = new THREE.Points(customGeometry, customMaterial);
const curveObject = new THREE.Line(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({ color: 0xff0000 }));
function handleClick(event) {
const x = (event.clientX / window.innerWidth) * 2 - 1;
const y = -(event.clientY / window.innerHeight) * 2 + 1;
const vector = new THREE.Vector3(x, y, 0.5);
vector.unproject(camera);
const dir = vector.sub(camera.position).normalize();
const distance = -camera.position.z / dir.z;
const pos = camera.position.clone().add(dir.multiplyScalar(distance));
vertices.push(pos);
const customGeometry = new THREE.BufferGeometry().setFromPoints(vertices);
points.geometry.dispose(), points.geometry = customGeometry;
if (vertices.length >= 3) {
const curve = new THREE.CatmullRomCurve3(vertices);
const po = curve.getPoints(150);
const geometry = new THREE.BufferGeometry().setFromPoints(po);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
curveObject.geometry.dispose(), curveObject.geometry = geometry, curveObject.material = material;
}
}
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(points);
scene.add(curveObject);
window.addEventListener('click', handleClick);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
Thank you sir its worked 
I have another question 
Could you tell how to change planar curve using Math Function I Tried This code but not working:
<!DOCTYPE html>
<html>
<head>
<title>Three.js Spline Curve</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<div id="customGeometry" style="display: block; top: 166px; left: 820px;">
<div id="customGeometryheader">CustomGeometry<button type="button" class="closex" id="closex-14" aria-label="Close">
<span aria-hidden="true">×</span>
</button></div><div class="flexparameter">
<div class="inline">F(x,y)</div>
<div class="inline"><input type="text" class="width" id="customvalue"></div><div class="unit">Area</div>
<div class="inline"><input type="text" class="width" id="Areacustom" disabled="true"></div>
</div>
<div class="flexparameter">
<div class="inline">Position</div><div class="inline">X</div>
<div class="inline"><input type="text" class="widthcordinate" id="X31" value="0"></div><div class="inline">Y</div>
<div class="inline"><input type="text" class="widthcordinate" id="Y31" value="0"></div><div class="inline">Z</div><div class="inline"><input type="text" class="widthcordinate" id="Z31" value="0"></div></div>
<button class="centerbutto" id="geobutton">Go</button>
<button class="centerbutto" id="geoAnimate">Animate</button>
</div></div>
<script src="three.js"></script>
<script src="delaunator.js"></script>
<script>
document.getElementById('geobutton').onclick=function(){
for ( let j = 0; j < 6; j ++ ) {
for ( let i = 0; i < Math.floor(document.getElementById('customvalue').value); i ++ ) {
const x = i;
const y = i+j*Math.cos(j);
const z = j;
vertices.push( new THREE.Vector3(x, y, z) );
}}
const customgeometry=new THREE.BufferGeometry().setFromPoints(vertices);
const cutomMaterial=new THREE.PointsMaterial( { color: 0x888888,size:0.3 } );
const points = new THREE.Points( customgeometry, cutomMaterial );
scene.add( points );
// triangulate x, z
var indexDelaunay = Delaunator.from(
vertices.map(v => {
return [v.x, v.z];
})
);
var meshIndex = []; // delaunay index => three.js index
for (let i = 0; i < indexDelaunay.triangles.length; i++){
meshIndex.push(indexDelaunay.triangles[i]);
}
customgeometry.setIndex(meshIndex); // add three.js index to the existing geometry
customgeometry.computeVertexNormals();
var mesh = new THREE.Mesh(
customgeometry, // re-use the existing geometry
new THREE.MeshNormalMaterial({wireframe:true})
);
mesh.castShadow = true;
scene.add(mesh)
}
</script>
</body>
I need Like this :
The code below kind of works, I debugged it a little but as I didn’t have too much time I couldn’t fully check:
Pay attention to formulaStr
<!DOCTYPE html>
<html>
<head>
<title>Three.js Planar Spline Curve</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
// const formulaStr = '0';
// const formulaStr = 'x+y';
const formulaStr = 'x+y*Math.cos(y)';
const formula = new Function('x', 'y', 'return ' + formulaStr);
let scene, camera, renderer;
const vertices = [];
const customGeometry = new THREE.BufferGeometry().setFromPoints(vertices);
const customMaterial = new THREE.PointsMaterial({ color: 0x888888, size: 0.3 });
const points = new THREE.Points(customGeometry, customMaterial);
const curveObject = new THREE.Line(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({ color: 0xff0000 }));
function handleClick(event) {
const x = (event.clientX / window.innerWidth) * 2 - 1;
const y = -(event.clientY / window.innerHeight) * 2 + 1;
const vector = new THREE.Vector3(x, y, 0.5);
vector.unproject(camera);
const dir = vector.sub(camera.position).normalize();
const distance = -camera.position.z / dir.z;
const pos = camera.position.clone().add(dir.multiplyScalar(distance));
pos.z = formula(pos.x, pos.y);
vertices.push(pos);
const customGeometry = new THREE.BufferGeometry().setFromPoints(vertices);
points.geometry.dispose(), points.geometry = customGeometry;
if (vertices.length >= 3) {
const curve = new THREE.CatmullRomCurve3(vertices);
const po = curve.getPoints(150);
const geometry = new THREE.BufferGeometry().setFromPoints(po);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
curveObject.geometry.dispose(), curveObject.geometry = geometry, curveObject.material = material;
}
}
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(points);
scene.add(curveObject);
window.addEventListener('click', handleClick);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
Thank you very much sir It worked welllllllllllllllllllllll 
