Jump to content

change the camera follow


Recommended Posts

hello, sorry I'm french I used a translator


I started on babylon js, I would change the file follow camera because I lack a setting.

I would like to keep close enough for my camera model with a radius asser near, and to be able to see my character:


My current camera follow :


var camera = new BABYLON.FollowCamera("mainCamera", new BABYLON.Vector3(0, 0, 10), scene);
camera.radius = 4;
camera.heightOffset = 3;
camera.rotationOffset = 0; // the viewing angle
camera.cameraAcceleration = 0.03; // how fast to move
camera.maxCameraSpeed = 10; // speed limit
camera.position = new BABYLON.Vector3(0, 50, 100);


Example of the scene :



I would like to mount the camera on the y axis in gardantles all properties of the camera follow.


but I think for that you need to touch the babylon js code by adding a parameter or modifying

somebody would have the solution if it please you thank you :



code babylon.js :


(function (BABYLON) {
var FollowCamera = (function (_super) {
__extends(FollowCamera, _super);
function FollowCamera(name, position, scene) {
_super.call(this, name, position, scene);
this.radius = 12;
this.rotationOffset = 0;
this.heightOffset = 4;
this.cameraAcceleration = 0.05;
this.maxCameraSpeed = 20;
FollowCamera.prototype.getRadians = function (degrees) {
return degrees * Math.PI / 180;
FollowCamera.prototype.follow = function (cameraTarget) {
if (!cameraTarget)
var yRotation;
if (cameraTarget.rotationQuaternion) {
var rotMatrix = new BABYLON.Matrix();
yRotation = Math.atan2(rotMatrix.m[8], rotMatrix.m[10]);
else {
yRotation = cameraTarget.rotation.y;
var radians = this.getRadians(this.rotationOffset) + yRotation;
var targetX = cameraTarget.position.x + Math.sin(radians) * this.radius;
var targetZ = cameraTarget.position.z + Math.cos(radians) * this.radius;
var dx = targetX - this.position.x;
var dy = (cameraTarget.position.y + this.heightOffset) - this.position.y;
var dz = (targetZ) - this.position.z;
var vx = dx * this.cameraAcceleration * 2; //this is set to .05
var vy = dy * this.cameraAcceleration;
var vz = dz * this.cameraAcceleration * 2;
if (vx > this.maxCameraSpeed || vx < -this.maxCameraSpeed) {
vx = vx < 1 ? -this.maxCameraSpeed : this.maxCameraSpeed;
if (vy > this.maxCameraSpeed || vy < -this.maxCameraSpeed) {
vy = vy < 1 ? -this.maxCameraSpeed : this.maxCameraSpeed;
if (vz > this.maxCameraSpeed || vz < -this.maxCameraSpeed) {
vz = vz < 1 ? -this.maxCameraSpeed : this.maxCameraSpeed;
this.position = new BABYLON.Vector3(this.position.x + vx, this.position.y + vy, this.position.z + vz);
FollowCamera.prototype._update = function () {
return FollowCamera;
BABYLON.FollowCamera = FollowCamera;
})(BABYLON || (BABYLON = {}));
//# sourceMappingURL=babylon.followCamera.js.map
var __extends = this.__extends || function (d, {
for (var p in if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();





Link to comment
Share on other sites

Hello lalexl!


I think you have a good idea. 


Fellow users/coders, what if followCamera.rotationOffset was a vector2 instead of a float?  Then lalexl could set an X-axis rotation offset... to tilt the camera UP a bit.  *shrug*  I think that would solve this problem... maybe.  Thoughts, anyone?


Another solve would be to position an invisible box/plane at the player's head or neck area, parent it to the player, and then use the invisible box/plane as the camera target. 

Link to comment
Share on other sites

Both RaananW and Wingnut have provided valid solutions, however my personal preference is to follow behind the character using a parenting control - as this allows great flexibility in animating your camera and aiming it as needed for additional actions in the game such as exploring and picking up additional objects. It also will provide broader cinematic camera moves such as dolly from above and broader camera views to show the character in a larger environment as well as interacting with laeger objects and larger characters - depending on what your stroy requires.


The keyboard controls are a bit odd at this time, as most players expect W, S, D, and A - so it was quite difficult and a bit unintuitive to use the keys you currently have mapped for character movement. And it's always a good idea to use the up, dn, lft. rght, keys in addition to the afore mentioned standard key setup.


And I hope you add an extension such as hand.js or another touch extension to easily move your character on movile devices which will have no eyboard available, and is the largest market for games these days.


Otherwise, the animation appears fluid, and we wish you the very best of luck.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...