babylonjs 动画特效
Posted qianbo_insist
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了babylonjs 动画特效相关的知识，希望对你有一定的参考价值。
babylonjs 动画特效
使用babylonjs的animation 动画来制作，方框围绕方形物体做心跳
show me the code
<html>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<body>
<canvas width="1280" height="720"></canvas>
</body>
<script>
var canvas = document.querySelector("canvas");
var engine = new BABYLON.Engine(canvas, true);
var delayCreateScene = function ()
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var box1 = BABYLON.Mesh.CreateBox("Box1", 3.0, scene);
var materialBox = new BABYLON.StandardMaterial("mat", scene);
materialBox.diffuseColor = new BABYLON.Color3(1, 0, 0);
box1.material = materialBox;
//Create a scaling animation at 30 FPS
var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
// Animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push(
frame: 0,
value: 1
);
//At the animation key 20, the value of scaling is "0.2"
keys.push(
frame: 20,
value: 0.2
);
//At the animation key 100, the value of scaling is "1"
keys.push(
frame: 100,
value: 1
);
animationBox.setKeys(keys);
box1.animations.push(animationBox);
setTimeout(async () =>
var anim = scene.beginAnimation(box1, 0, 100, false);
console.log("before");
await anim.waitAsync();
console.log("after");
);
return scene;
var scene = delayCreateScene();
var points = [];
var linesArr = [];
var hl;
var LineColor = new BABYLON.Color3(1, 1, 0)
function create()
linesArr.length = 0;
points.push(new BABYLON.Vector3(5, 0, 5));
points.push(new BABYLON.Vector3(5, 0, -5));
points.push(new BABYLON.Vector3(-5, 0, -5));
points.push(new BABYLON.Vector3(-5, 0, 5));
points.push(points[0]);
hl = new BABYLON.HighlightLayer("hl1", scene, true);
hl.blurVerticalSize = 5; //模糊
hl.blurHorizontalSize = 5;
for (let i = 0; i < 1; i++)
let LineMesh = BABYLON.MeshBuilder.CreateLines("rect" + i, points: points , scene);
linesArr.push(LineMesh);
hl.addMesh(LineMesh, this.LineColor);
;
function 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: 5
);
keyFrames.push(
frame: 2 * frameRate,
value: 10 );
xSlide.setKeys(keyFrames);
linesArr.forEach((item, index) =>
console.log(index)
item.animations.push(xSlide);
this.scene.beginAnimation(item, 0, (index + 1.5) * 3, true);
)
;
create();
startAnimation();
engine.runRenderLoop(function()
scene.render();
);
window.addEventListener("resize", function()
engine.resize();
)
</script>
</html>
以上是关于babylonjs 动画特效的主要内容，如果未能解决你的问题，请参考以下文章
Cesium 与 Babylon.js 可视化 glsl 特效篇（十四）
Cesium 与 Babylon.js 可视化 glsl 特效篇（十八）
Cesium 与 Babylon.js 可视化 glsl 特效篇（二十）
Cesium 与 Babylon.js 可视化 glsl 特效篇（十六）