前言
在三維場景中喉镰，除了用逼近真實(shí)的模型代表現(xiàn)實(shí)中的設(shè)備浓体、標(biāo)識物外，通常還會使用一些動畫來表示模型在現(xiàn)實(shí)中一些行為和作用。常見的動畫比如路徑動畫蒜鸡、旋轉(zhuǎn)動畫、發(fā)光動畫敢课、流動動畫等快压。本文將為大家介紹幾種常用的路徑動畫。首先历造，最簡單的自然是直線路徑動畫甩十。
直線路徑動畫
比如以下場景船庇，地鐵需要從上一站A駛?cè)氘?dāng)前站B，在此過程中侣监，我們將AB組合成一條路徑(假設(shè)路徑為直線)鸭轮，使用動畫，不停的設(shè)置地鐵(模型)的在路徑上的位置橄霉，就可以實(shí)現(xiàn)地鐵從A站-B站的動畫過程窃爷。
const points = [A, B];
// 創(chuàng)建路徑
let path = new mono.Path();
points.forEach((point, i) => {
const { x, y, z } = point;
if (i == 0) {
path.moveTo(x, y, z);
} else {
path.lineTo(x, y, z);
}
});
// 動畫
const instance = new mono.Animate({
form: 0,
to：1,
dur：3000,
delay,
reverse：false,
repeat: 1,
easing,
onPlay,
onUpdate: (val) => {
// 獲取路徑上的點(diǎn)
const point = path.getPointAt(val);
// 設(shè)置實(shí)體位置
entity.setPosition(point);
},
onDone,
});
instance.play();
動畫效果：
至此，直線路徑動畫就實(shí)現(xiàn)了姓蜂。那么現(xiàn)在想想按厘，現(xiàn)實(shí)場景中不可能只有直線運(yùn)動這種場景，比如小車巡檢钱慢，就屬于一個折線場景逮京，那么我們就需要使用折線動畫來完成。
折線路徑動畫
小車在房間內(nèi)不間斷的通過巡檢監(jiān)控束莫，記錄設(shè)備狀態(tài)及檢測相關(guān)數(shù)據(jù)懒棉。模擬小車巡檢動畫，我們需要采集巡檢小車核心點(diǎn)位：A麦箍、B漓藕、C、D挟裂。同樣的將ABCD組合成路徑享钞，不停的設(shè)置小車(模型)位置
const points = [A, B, C, D];
// 創(chuàng)建路徑
let path = new mono.Path();
points.forEach(...);
// 動畫
const instance = new mono.Animate({
...
onUpdate: (val) => {
// 獲取路徑上的點(diǎn)
const point = path.getPointAt(val);
// 設(shè)置實(shí)體位置
entity.setPosition(point);
},
onDone,
});
instance.play();
動畫效果：折線路徑
當(dāng)然，巡檢過程可能是一個循環(huán)的閉合路徑诀蓉，所以可以滿足使用四個點(diǎn)創(chuàng)建閉環(huán)路徑栗竖，行形成閉環(huán)路徑動畫
折線路徑閉環(huán)動畫
const points = [A, B, C, D];
// 創(chuàng)建路徑
let path = new mono.Path();
points.forEach(...);
// 閉環(huán)路徑
path.closePath()
// 動畫
const instance = new mono.Animate({
...
});
instance.play();
動畫效果：閉環(huán)路徑
上面的折線動畫是完成了，但是轉(zhuǎn)彎的時候似乎略顯生硬渠啤，接下來我們再嘗試如何讓轉(zhuǎn)彎更自然狐肢。
圓潤的折線路徑動畫
其實(shí)很簡單，在已有的折線動畫基礎(chǔ)上沥曹，對路徑先進(jìn)行一步拐角處理份名，讓路徑整體顯得很趨于自然。
const points = [A, B, C, D];
// 創(chuàng)建路徑
let path = new mono.Path();
points.forEach(...);
// 閉環(huán)路徑
path.closePath()
// 獲取平滑路徑, 讓轉(zhuǎn)彎更自然
path = mono.PathNode.prototype.adjustPath(path, 20, 1);
// 動畫
const instance = new mono.Animate({
...
});
instance.play();
動畫效果：轉(zhuǎn)彎更加的自然
實(shí)現(xiàn)了圓潤的折線路徑動畫后妓美，貌似看起來已經(jīng)完工了僵腺。其實(shí)再仔細(xì)觀察下，可以發(fā)現(xiàn)壶栋，在轉(zhuǎn)彎的時候辰如，模型沒有同步轉(zhuǎn)向，那么我們需要如何處理呢贵试。
模型與路徑動畫同步旋轉(zhuǎn)
在折線動畫中琉兜，將模型繞對應(yīng)的旋轉(zhuǎn)旋轉(zhuǎn)方向即可
const points = [A, B, C, D];
// 創(chuàng)建路徑
let path = new mono.Path();
points.forEach(...);
// 閉環(huán)路徑 獲取平滑路徑, 讓轉(zhuǎn)彎更自然
...
// 旋轉(zhuǎn)向量
const rotate = new mono.Vec3();
// 動畫
const instance = new mono.Animate({
onUpdate: (val) => {
// 位置
...
// 模型同步旋轉(zhuǎn)
const tangent = path.getTangentAt(val);
var normal = new mono.Vec3(0, 0, -1);
rotate.rotationTowards(normal, tangent);
entity.setRotation(rotate);
}
});
instance.play();
動畫效果：可以看到小車上的攝像頭是一直朝向設(shè)備
那么凯正，直線路徑動畫和折線路徑動畫介紹完了。從上面動畫截圖中可以看出豌蟋，我們是在一個固定的位置查看動畫廊散，那么，能讓鏡頭沿著路徑一起移動么
鏡頭沿路徑動畫一起移動
顯然梧疲，鏡頭是可以沿著路徑同時移動的奸汇。通常用于巡航(自動巡檢)中.主要是在折線動畫的基礎(chǔ)上，同步設(shè)置鏡頭動畫的位置和朝向點(diǎn)往声。
const points = [....];
// 創(chuàng)建路徑
let path = new mono.Path();
points.forEach(...);
// 閉環(huán)路徑 獲取平滑路徑, 讓轉(zhuǎn)彎更自然
...
// 鏡頭初始位置
const pos = camera.p(),
target = camera.t();
const length = pos.clone().sub(target).length();
// 動畫
const instance = new mono.Animate({
onUpdate: (val) => {
// 模型
...
// 鏡頭沿路徑動畫
const tangent = path.getTangentAt(value);
point = path.getPointAt(value);
ntarget = point.clone().add(tangent.multiplyScalar(length));
camera.p(point);
camera.lookAt(ntarget);
}
});
instance.play();
動畫效果：
既然能讓鏡頭沿著路徑同步移動，那么是否能讓鏡頭與路徑保持平行移動呢
鏡頭與路徑保持平行一起移動
保持平行移動戳吝，其實(shí)是在點(diǎn)位的基礎(chǔ)上浩销，將鏡頭位置設(shè)置到對應(yīng)距離點(diǎn)位置。以下是基于動畫鏈完成的某流水線作業(yè)動畫听哭，需要路徑動畫同時慢洋，鏡頭同步移動。對動畫鏈有興趣的可參考前文《基于路徑集合的三維動畫鏈》
const points = [....];
// 創(chuàng)建路徑
let path = new mono.Path();
points.forEach(...);
// 閉環(huán)路徑 獲取平滑路徑, 讓轉(zhuǎn)彎更自然
...
// 鏡頭相對于目標(biāo)動畫模型的距離
const dis = 550
// 動畫
const instance = new mono.Animate({
onUpdate: (val) => {
// 模型
...
// 鏡頭平行X軸動畫
point = path.getPointAt(value);
camera.setPosition(point.clone().add(new mono.Vec3(0, dis, dis)));
camera.lookAt(point);
}
});
instance.play();
動畫效果：
案例說明
上面舉例說明動畫的示意圖陆盘，來自兩個案例普筹，一個是地鐵站三維可視化，可以認(rèn)為是一個軌道交通方面的隘马；另外一個是實(shí)驗(yàn)室車間 流水線可視化太防，主要用于流水線，設(shè)備監(jiān)控等三維可視化呈現(xiàn)酸员。
結(jié)語
至此蜒车，路徑動畫已經(jīng)介紹的差不多了。利用常用的動畫能夠讓整個三維場景更豐滿幔嗦，寫實(shí)酿愧。希望在項目中可以多多利用起來。
如果對可視化感興趣邀泉，可以和我交流嬉挡，微信541002349.
