change the camera follow

[lalexl]

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 :

 

http://tokadoki.com/HTML5/plateform/index.html (move z,q,s,d)

 

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 :

 

var BABYLON;

(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)

                return;

            var yRotation;

            if (cameraTarget.rotationQuaternion) {

                var rotMatrix = new BABYLON.Matrix();

                cameraTarget.rotationQuaternion.toRotationMatrix(rotMatrix);

                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);

            this.setTarget(cameraTarget.position);

        };

        FollowCamera.prototype._update = function () {

            _super.prototype._update.call(this);

            this.follow(this.target);

        };

        return FollowCamera;

    })(BABYLON.TargetCamera);

    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 __();

};

 

 

 

 

[Wingnut]

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. 

[RaananW]

Hi, have you tried using the ArcFollowCamera? 

It follows the mesh's position while maintaining the rdius/alpha/beta variables. You can use the beta variable to change the "y" rotation, as you implemented in the follow camera. Would be great to know if it works :-)

[dbawel]

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.

 

DB

[lalexl]

yay ^^ thank you for your note, so I managed with ArcFollowCamera yes that sounds like a good solution, with improved course

 

http://tokadoki.com/HTML5/plateform01/index.html

 

ps: there has been there a solution to disable the left and middle click order not to influence the camera with buttons?