babylonjs followCamera

Posted May 27, 20204 min read

The camera follows the object, the code is taken from the following two examples

The camera moves with the object , The object moves along a track Combination completes the movement of objects along the track

Example 1:
The camera follows the object in a straight line

var canvas = document.getElementById('carCanvas');
var engine = new BABYLON.Engine(canvas, true);
//This creates a basic Babylon Scene object(non-mesh)
var scene = new BABYLON.Scene(engine);

//This creates and initially positions a follow camera
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

//The goal distance of camera from target
camera.radius = 30;

//The goal height of camera above local origin(centre) of target
camera.heightOffset = 10;

//The goal rotation of camera around local origin(centre) of target in x y plane
camera.rotationOffset = 0;

//Acceleration of camera in moving from current to goal position
camera.cameraAcceleration = 0.005

//The speed at which acceleration is halted
camera.maxCameraSpeed   = 10

//camera.target is set after the target's creation

//This attaches the camera to the canvas
camera.attachControl(canvas, true);

/** /

//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);

/* ----------------------- Car Body ---------------------- * /

//Create body and apply material
var carBody = BABYLON.MeshBuilder.CreateBox("box", {
        size:5
    }, scene);
    carBody.position = new BABYLON.Vector3(0, 0, 0);

/* --------------- End Car Body -------------------- * /

/* --------------- Path ---------------------------- * /

//Create array of points to describe the curve
var points = [];
var n = 450; //number of points
var r = 50; //radius
points.push(new BABYLON.Vector3(0,0,0));
for(var i = 0; i <200; i ++) {
    points.push(new BABYLON.Vector3(i, 0,0));
}
for(var i = 0; i <200; i ++) {
    points.push(new BABYLON.Vector3(200,0, i));
}

//Draw the curve
var track = BABYLON.MeshBuilder.CreateLines('track', {
    points:points
}, scene);
track.color = new BABYLON.Color3(0, 0, 0);

/* -------------- End Path ----------------------------- * /

/* -------------- Ground ------------------------------ * /
var ground = BABYLON.MeshBuilder.CreateGround("ground", {
width:3 * r,
height:3 * r
}, scene);
/* ----------- End Ground -------------------- * /

/* ---------- Position and Rotate Car at Start -------- * /
carBody.position.y = 4;
carBody.position.z = r;

var path3d = new BABYLON.Path3D(points);
var normals = path3d.getNormals();
var theta = Math.acos(BABYLON.Vector3.Dot(BABYLON.Axis.Z, normals [0]));
carBody.rotate(BABYLON.Axis.Y, theta, BABYLON.Space.WORLD);
var startRotation = carBody.rotationQuaternion;

/* ------ End Position and Rotate Car at Start ------- * /

/*** SET TARGET FOR CAMERA**** /
camera.lockedTarget = carBody;
/*** /

/* ---------------- Animation Loop -------------- * /
var i = 0;
scene.registerAfterRender(function() {
carBody.position.x = points [i].x;
carBody.position.y = points [i].y;
carBody.position.z = points [i].z;

    i ++; ////continuous looping
    if(i == 450) i = 0;
    if(i == 0) {
        carBody.rotationQuaternion = startRotation;
    }
});

/* ---------------- End Animation Loop ------------------ * /
engine.runRenderLoop(function() {
scene.render();
})

Example 2:The camera follows the curve of the object

var canvas = document.getElementById('carCanvas');
var engine = new BABYLON.Engine(canvas, true);
//This creates a basic Babylon Scene object(non-mesh)
var scene = new BABYLON.Scene(engine);

//This creates and initially positions a follow camera
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

//The goal distance of camera from target
camera.radius = 30;

//The goal height of camera above local origin(centre) of target
camera.heightOffset = 10;

//The goal rotation of camera around local origin(centre) of target in x y plane
camera.rotationOffset = 0;

//Acceleration of camera in moving from current to goal position
camera.cameraAcceleration = 0.005

//The speed at which acceleration is halted
camera.maxCameraSpeed   = 10

//camera.target is set after the target's creation

//This attaches the camera to the canvas
camera.attachControl(canvas, true);

/***** /

//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);

/* ---------------- Car Body ----------- * /

//Create body and apply material
var carBody = BABYLON.MeshBuilder.CreateBox("box", {
        size:5
    }, scene);
    carBody.position = new BABYLON.Vector3(0, 0, 0);

/* ------------------ End Car Body -------------- * /

/* ------------- Path ------------- * /

//Create array of points to describe the curve
var points = [];
var n = 450; //number of points
var r = 50; //radius
for(var i = 0; i <n + 1; i ++) {
     points.push(new BABYLON.Vector3((r +(r/5) * Math.sin(8 * i * Math.PI/n)) * Math.sin(2 * i * Math.PI/n), 0 ,(r +(r/10) * Math.sin(6 * i * Math.PI/n)) * Math.cos(2 * i * Math.PI/n)));
}

//Draw the curve
var track = BABYLON.MeshBuilder.CreateLines('track', {
    points:points
}, scene);
track.color = new BABYLON.Color3(0, 0, 0);

/* ----------------------- End Path ---------------- * /

/* ----------------------- Ground ---------------- * /
var ground = BABYLON.MeshBuilder.CreateGround("ground", {
width:3 * r,
height:3 * r
}, scene);
/* ----------------------- End Ground ----------------- * /

/* ---------------- Position and Rotate Car at Start ------- * /
carBody.position.y = 4;
carBody.position.z = r;

var path3d = new BABYLON.Path3D(points);
var normals = path3d.getNormals();
var theta = Math.acos(BABYLON.Vector3.Dot(BABYLON.Axis.Z, normals [0]));
carBody.rotate(BABYLON.Axis.Y, theta, BABYLON.Space.WORLD);
var startRotation = carBody.rotationQuaternion;

/* ---------------- End Position and Rotate Car at Start ------ * /

/***** SET TARGET FOR CAMERA ***** /
camera.lockedTarget = carBody;
/***** /

/* ------------- Animation Loop --------------------- * /
var i = 0;
scene.registerAfterRender(function() {
carBody.position.x = points [i].x;
carBody.position.y = points [i].y;
carBody.position.z = points [i].z;

    theta = Math.acos(BABYLON.Vector3.Dot(normals [i], normals [i + 1]));
    var dir = BABYLON.Vector3.Cross(normals [i], normals [i + 1]). y;
    var dir = dir/Math.abs(dir);
    carBody.rotate(BABYLON.Axis.Y, dir * theta, BABYLON.Space.WORLD);

    i =(i + 1)%(n-1); //continuous looping
    if(i == 0) {
        carBody.rotationQuaternion = startRotation;
    }
});

/* ------------- End Animation Loop ---------------------- * /

engine.runRenderLoop(function() {
    scene.render();
})