yomotsu / camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

Home Page:https://yomotsu.github.io/camera-controls/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Speed up setLookAt or lerpLookAt

Samstiles opened this issue · comments

Hello,

I am trying to make my lerpLookAt or my setLookAt transition much faster.

I want to smooth out my camera movement, but not smooth it out so much that the camera lags greatly behind the player.

No matter what speed I set my lerpLookAt to, it still seems to trail behind the player much too slowly

And on setLookAt, there is no speed parameter for when I am using the enableTransition: boolean flag

I am trying to write a "3rd person follow camera" with an orbit setup. I am manually managing my own pointer lock controls. Do I need to use the built in pointer lock?

Additionally: I am rotating my camera around the player with mouse movement. Because of the lerp, if the player rapidly moves their mouse, the lerp ends up going backwards because the new rotation value ends up being closer in rads than the previous value in the OTHER direction (the opposite way of the players mouse movement). Is there a way to prevent this?

Here is the slow movement follow issue

...The very slow transition makes the game feel very slow and disconnected from the character:

gif

Here is the "over rotating and lerping in the opposite direction of the mouse movement" issue:

gif

And my camera rotation logic:

        // in my camera  constructor
        document.addEventListener("mousemove", (event: MouseEvent) => {
            if (VulpineMiscUtils.IsUndefinedOrNull(this._tagCamera)) return;

            if (GameClient.PointerLock.PointerIsLocked() === true) {
                const { movementX: horizontalMovement, movementY: verticalMovement } = event;

                this._characterFollowLateralAngle += horizontalMovement * Config.Camera.MouseSensitivity;
                this._characterFollowVerticalAngle += verticalMovement * Config.Camera.MouseSensitivity;

                this._characterFollowVerticalAngle = VulpineMathUtils.Clamp(
                    this._characterFollowVerticalAngle,
                    VulpineMathUtils.DegToRads(Config.Camera.CameraPitchDegreesMin),
                    VulpineMathUtils.DegToRads(Config.Camera.CameraPitchDegreesMax)
                );
        });
                // in my update loop

                this._nextCameraLookDirection.x =
                    Math.cos(this._characterFollowLateralAngle - Math.PI / 2) * Math.cos(this._characterFollowVerticalAngle);
                this._nextCameraLookDirection.y = Math.sin(this._characterFollowVerticalAngle);
                this._nextCameraLookDirection.z =
                    Math.sin(this._characterFollowLateralAngle - Math.PI / 2) * Math.cos(this._characterFollowVerticalAngle);

                this._nextCameraPosition.x =
                    this._followTargetObject!.position.x + this._nextCameraLookDirection.x * this._characterFollowDistance;
                this._nextCameraPosition.y =
                    this._followTargetObject!.position.y + this._nextCameraLookDirection.y * this._characterFollowDistance;
                this._nextCameraPosition.z =
                    this._followTargetObject!.position.z + this._nextCameraLookDirection.z * this._characterFollowDistance;

                this._cameraControls.lerpLookAt(
                    this._currentCameraPosition.x,
                    this._currentCameraPosition.y,
                    this._currentCameraPosition.z,
                    this._lastKnownTargetPosition.x,
                    this._lastKnownTargetPosition.y,
                    this._lastKnownTargetPosition.z,
                    this._nextCameraPosition.x,
                    this._nextCameraPosition.y,
                    this._nextCameraPosition.z,
                    this._followTargetObject!.position.x,
                    this._followTargetObject!.position.y + this.cameraLookAtVerticalOffset,
                    this._followTargetObject!.position.z,
                    10,
                    true
                );
                
                

                this._currentCameraLookDirection.copy(this._nextCameraLookDirection);
                this._currentCameraPosition.copy(this._nextCameraPosition);
                this._lastKnownTargetPosition.copy(this._followTargetObject!.position);

                this._cameraControls.update(deltaTimeS);

Thanks for using camera-controls.
To solve that delay, you can set 0 to the smoothness value

cameraControlsInstance.smoothTime = 0;
cameraControlsInstance.draggingSmoothTime = 0;

Also, check the third-person demo in the example section and the docs for further information.

Thank you @yomotsu ! Your library is wonderful and I'm enjoying using it.

I have sped up the lerp speed using the parameters you describe above.

I solved my other problem - the over-rotation - by capping how much the camera is allowed to rotate each frame :)

5月にあなたの美しい国に旅行します! 長野と山梨の地域でハイキングする予定です。 あなたの文化と景色を体験することを楽しみにしています。

camera-controls に再び感謝します!

It's good to hear that.

May is one of the best months to visit! Altho, temperatures have been on the rise in recent years.
(My parents in law live in 山梨 btw...)
いい旅を。

let me close the issue then.