babylonjs-followCamera

相机跟随物体移动，代码取自以下两个例子

相机跟随物体移动, 物体沿某轨迹移动 组合完成 物体随轨迹移动

例子 1：
相机跟随物体走直线

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

例子 2: 相机跟随物体走曲线

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