In my website I have a floating island and a camera that follows a curve. I would like this camera following the curve to only occur on load of the website. That way it’s a bit like a guided tour for the user, but once it reaches the end I would like it to stop where it is, and give control back to the user.
Right now in my code the camera follows the curve just fine, but it loops. Once the camera reaches the end it jumps back to the start and plays again. Below is my code:
var curve = new THREE.CubicBezierCurve3(
new THREE.Vector3(200, 200, 800),
new THREE.Vector3(100, 150, -200),
new THREE.Vector3(-50, 10, -150),
new THREE.Vector3(-50, 10, 0),
new THREE.Vector3(-20, 0, 10)
);
var points = curve.getPoints(50);
var geometry6 = new THREE.BufferGeometry().setFromPoints(points);
var material6 = new THREE.LineBasicMaterial({ color: 0xffffff });
// Create the final object to add to the scene
var curveObject = new THREE.Line(geometry6, material6);
scene.add(curveObject);
var clock = new THREE.Clock();
clock.start();
var speed = 0.1;
var pathTarget = new THREE.Vector3(0,10,0);
var render = function () {
curve.getPoint((clock.getElapsedTime() * speed) % 1.0, pathTarget)
// cube.position.copy(pathTarget)
camera.position.copy(pathTarget)
camera.lookAt(cube.position)
requestAnimationFrame( render );
// cube.rotation.x += 0.1;
// cube.rotation.y += 0.1;
renderer.render(scene, camera);
setTimeout(() => scene.remove(curveObject), 5000);
}