How to stop follow camera rotation

Hey guys I was wondering how I can stop the the FollowCamera from rotating around my player object?

I’ve tried a few things for so far no luck, I tried setting “followCamera.noRotationConstraint = false;”
But that did not work.

I just want the a camera that follows my player object along the x axis as it moves back and forth.

Any help would be great,

Thank you!

Hi P, sorry for the slow weekend replies.

Many or all BJS cameras have a .target and .lockedTarget properties, and often, they can be EITHER a mesh OR a Vector3 value.

Check out this playground: https://www.babylonjs-playground.com/#LN7YVL#4

Line 7… a standard freeCamera… but in line 25, AFTER the cylinder has been created… we can set the freeCamera .lockedTarget = cylinder. Mouse dragging turns-off because targeting is automated. But, notice that the arrow keys still change the position of the camera itself. The lockedTarget item remains the aim-at target.

Now let’s play with the ArcRotateCamera .lockedTarget. Disable line 7 freeCamera, and activate line 8 standard ArcRotateCamera. Leave line 25 as it is. Click run.

For this method, camera-drag with mouse… still “orbits” around target, like any good ArcCam, and arrow keys do the same. With no camera mouse or arrow keys camera.inputs… camera stays orbit-oriented to its lockedTarget. (a little different from the freeCamera)

And… most/all BJS cameras… allow you to change or remove “keys” property, and/or empty the camera.inputs array… removing player control, if wanted.

.target is almost as much fun as .lockedTarget, but you might need to do camera.target = cylinder… constantly, inside the scene’s render-loop, to get same affect as using .lockedTarget.

To make some code operate (repeatedly and fast) within the scene’s render-loop, many programmers use this method:

    scene.onBeforeRenderObservable.add(function () {
        your code here - runs once per render frame;
    });

Do some experiments on various camera .target and .lockedTarget, even on the followCamera. There’s lots to be learned and plenty of fun, too.

FYI: I THINK… .noRotationConstraint … allows/prevents cameras from becoming upside-down. A within-playground-code SEARCH for noRotationConstraint… will show some examples of usage.

I hope this helps. Ask more things, comment at will, mark as solved, if you wish, we’re here to help, even if we are a bit slow on the weekends. :slight_smile:

Thanks Wingnut, I played around with it and got it to work. The trick was to use camera.targetLocked = myPlayer. Then I simply didn’t attach the camera controls and voila perfect 2D followcamera.

Thank you for the tips.

         let followCamera  = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 0, -20), scene);
         followCamera.radius = -50;
         followCamera.cameraRotation = 0;
         followCamera.heightOffset = 0;
         followCamera.rotationOffset = 0;
         followCamera.cameraAcceleration = 0.5;//0.005;
         followCamera.maxCameraSpeed = 10;

         let spriteManagerPlayer = new BABYLON.SpriteManager('player-manager', "./assets/sprites/ls-sprite-sheet.png", 112, 112, scene);

         let player = new BABYLON.Sprite('player', spriteManagerPlayer);
         player.width = 15;
         player.height = 15;
         player.cellIndex = 54;
         followCamera.lockedTarget = background;

         //REGISTER KEY INPUT EVENTS
         let inputMap ={};
         scene.actionManager = new BABYLON.ActionManager(scene);
         scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) {								
            inputMap[evt.sourceEvent.key] = evt.sourceEvent.type == "keydown";
        }));
        scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) {								
            inputMap[evt.sourceEvent.key] = evt.sourceEvent.type == "keydown";
        }));

        scene.onBeforeRenderObservable.add(()=>{
            let keydown = false;
            if(inputMap["d"] || inputMap["ArrowRight"]){
                player.position.x+=0.5;
                keydown=true;
            }
            if(inputMap["a"] || inputMap["ArrowLeft"]){
                player.position.x-=0.5;
                keydown=true;
            }
            if(inputMap["w"] || inputMap["ArrowUp"]){
                player.position.y+=0.5;
                keydown=true;
            } 
            if(inputMap["s"] || inputMap["ArrowDown"]){
                player.position.y-=0.5;
                keydown=true;
            }  
        });

The only thing now is that the lockedTarget property on the camera doesn’t like the sprite as a target I get an error. I think the camera target only takes meshes as targets not sprites.

1 Like

Mesh, OR a vector3 value, I believe. Test to be sure, of course. :slight_smile: It’s good to hear of your successes, and thanks for sharing your solution! Well done!

Another solution is to change the lockedTarget’s billboardMode to USE_POSITION… This requires a separate camera-target mesh, which is actually a good idea anyway.

I originally added an empty camera-target mesh as a child of the player’s mesh, to adjust where the camera is looking at, since the player mesh’ origin is at the bottom, and I don’t want the camera to point at his feet. Since then, I’ve found other uses for this mesh, such as toggling between rotating/fixed camera, and some effects, like orbiting around the player.

To stop the camera rotating (while still following the player):

camera.locketTarget.billboardMode = Mesh.BILLBOARDMODE_USE_POSITION.