Move camera along spline while still having controls pan the camera

Questions
, , ,
1

I have a spline that my camera moves back and forth on when scrolling with the mouse wheel. My problem is that I am not able to look left/right in my 3d scene anymore.

Here is how I capture the wheel event:

// Increment/Decrement number when scrolling via mouse wheel
let camPosIndex = 0; 
canvas.addEventListener('wheel', (e) => {
    camPosIndex += -Math.sign(e.deltaY) * 0.1;
    if (camPosIndex < 0) {
        camPosIndex = 0;
    }
});

Here is my render function:

    const tick = () => {
      // Update camera around spline
      if (camera && cameraSplinePoints.length > 0 && cameraSpline) {
        const camPos = cameraSpline.getPoint(camPosIndex / 100);
        const camRot = cameraSpline.getTangent(camPosIndex / 100);

        camera.position.x = camPos.x;
        camera.position.y = camPos.y;
        camera.position.z = camPos.z;

        camera.rotation.x = camRot.x;
        camera.rotation.y = camRot.y;
        camera.rotation.z = camRot.z;

        camera.lookAt(cameraSpline.getPointAt((camPosIndex+1) / 100));
    }

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

How can I still have my orbitcontrols look left/right/up/down but also have the mousewheel scroll the camera along the spline?

2

I ain’t no expert in Three, im still experimenting. I just came across this site. Experience the ODD it uses the CatmullRomCurve3 for the camera path. For the camera rotation it uses Firstperson control. Not sure about how we can customise it for our own need. Hope it sheds some light.

3

Was you able to solve it?
Came upon the same thing.

.lookAt is conflicting with camera.rotation on mousemove

Tried to rotate with mousemove the Group(), but it looks bad, and the whole scene is moving unnatural