相机跟随物体移动，代码取自以下两个例子
相机跟随物体移动,物体沿某轨迹移动 组合完成 物体随轨迹移动
例子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();
})