In my current scene, I have a camera following a spline path.
This spline is generated using the CatmullRomCurve3() method in three.js.
However, there are bumps appearing automatically before and after the curve descends.
I am looking to eliminate these bumps so that the spline follows a smooth descent without any disruptions (while still maintaining the curvature).
I have experimented with different curve types like centripetal, chordal, and catmullrom, but the bumps persist.
If anyone has suggestions on how to achieve this, I would greatly appreciate it! Thank you
var renderer, scene, camera, spline;
renderer = new THREE.WebGLRenderer();
scene = new THREE.Scene();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, .1, 2000 );
camera.position.set(0, 0, 40);
camera.lookAt(0,0, 0);
spline = new THREE.CatmullRomCurve3([
new THREE.Vector3( -70, 9 ),
new THREE.Vector3( -12, 9 ),
new THREE.Vector3( -8, 9 ),
new THREE.Vector3( 8, -9 ),
new THREE.Vector3( 12, -9 ),
new THREE.Vector3( 70, -9 ),
]);
var points = spline.getPoints(500);
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xffffff } );
// Create the final object to add to the scene
var splineObject = new THREE.Line( geometry, material );
scene.add(splineObject);
renderer.render(scene, camera);<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>