相机跟随物体移动,代码取自以下两个例子
相机跟随物体移动,物体沿某轨迹移动 组合完成 物体随轨迹移动
例子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 targetcamera.radius = 30;// The goal height of camera above local origin (centre) of targetcamera.heightOffset = 10;// The goal rotation of camera around local origin (centre) of target in x y planecamera.rotationOffset = 0;//Acceleration of camera in moving from current to goal positioncamera.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 canvascamera.attachControl(canvas, true);/**********************************************/// lightsvar light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);/*-----------------------Car Body----------------------*///Create body and apply materialvar 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 curvevar points = [];var n = 450; // number of pointsvar r = 50; //radiuspoints.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 curvevar 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 targetcamera.radius = 30;// The goal height of camera above local origin (centre) of targetcamera.heightOffset = 10;// The goal rotation of camera around local origin (centre) of target in x y planecamera.rotationOffset = 0;//Acceleration of camera in moving from current to goal positioncamera.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 canvascamera.attachControl(canvas, true);/*************************************************/// lightsvar light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);/*----------------Car Body-----------*///Create body and apply materialvar 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 curvevar points = [];var n = 450; // number of pointsvar r = 50; //radiusfor (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 curvevar 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();})