Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

three.js - how to rotate the camera around the line between lookAt(object) and camera's position

Tags:

three.js

I am currently trying to rotate the camera around the line that exists between the target object and the camera by looking at an object.

I thought that I can rotate around the Z-axis, but I was wrong. I guess because all axis get rotated so that lookAt(object) works.

Sorry if there is already a solution around here and I was not able to find it..

Thanks for helping out!

draw3d(renderer) {
        let targetPlayer = this.players[this.followPlayer];

        let mesh = targetPlayer.three.mesh;

        let d = 4;

        let relativeCameraOffset = new THREE.Vector3(0, d / 1.2, 2 * d);
        let cameraOffset = relativeCameraOffset.applyMatrix4(mesh.matrixWorld);
        this.three.camera.position.x = cameraOffset.x;
        this.three.camera.position.z = cameraOffset.z;
        this.three.camera.position.y = cameraOffset.y;
        this.three.camera.lookAt(mesh.position);

        // ROTATE CAMERA LOOKAT BY PLAYERS STEERING
        // camera.rotation.z = targetPlayer.steering;

        renderer.render(this.three.scene, this.three.camera);
    }
like image 200
Michael Avatar asked Oct 25 '25 05:10

Michael


1 Answers

I think what you're looking for instead of rotation.z is camera.rotateZ(degs) at the end of the calculation. As you can see in the docs, rotateZ() takes its current rotation, and performs a local-space Z-rotation.

like image 84
Marquizzo Avatar answered Oct 26 '25 20:10

Marquizzo