用 CreateLines 生成几条线,对生成的线添加动画,HighlightLayer 添加模糊效果。
// 创建模型护栏特效
class CreateRail {
constructor( scene) {
this.scene = scene;
this.linesArr = [];
this.LineColor = new BABYLON.Color3(1, 1, 0)
};
create() {
const points = [];
this.linesArr.length = 0;
points.push(new BABYLON.Vector3(2, 0, 2));
points.push(new BABYLON.Vector3(2, 0, -2));
points.push(new BABYLON.Vector3(-2, 0, -2));
points.push(new BABYLON.Vector3(-2, 0, 2));
points.push(points[0]); //close the triangle;
var hl = new BABYLON.HighlightLayer("hl1", this.scene, true);
hl.blurVerticalSize = 5; //模糊
hl.blurHorizontalSize = 5;
for (let i = 0; i < 5; i++) {
let LineMesh = BABYLON.MeshBuilder.CreateLines("triangle" + i, { points: points }, this.scene);
this.linesArr.push(LineMesh);
hl.addMesh(LineMesh, this.LineColor);
}
};
startAnimation() {
const frameRate = 10;
const xSlide = new BABYLON.Animation("xSlide", "position.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
const keyFrames = [];
keyFrames.push({
frame: 0,
value: 0
});
keyFrames.push({
frame: 1 * frameRate,
value: 1
});
keyFrames.push({
frame: 2 * frameRate,
value: 2 });
xSlide.setKeys(keyFrames);
this.linesArr.forEach((item, index) => {
console.log(index)
item.animations.push(xSlide);
this.scene.beginAnimation(item, 0, (index + 0.5) * 3, true);
})
};
}