3D 模型动画分享

收藏

随着3D模型现在越来越多的公司使用，相信很多同学也都有所涉及了。

而wyn中也有对应的3D场景，但是只是3D的接入肯定还是不满足的，我们更多希望的。肯定是有一些交互能力，或者动画操作。需要能让我的模型也动起来。
那么基于此呢，我今天分享几个简单的模型动画，来帮助大家，把模型动起来。

当然如果了解wyn的3D模型的，那么应该知道wyn中是可以直接在场景设计器里面些代码的，也就是我们利用代码去控制模型移动。而我们今天也就是分享的已经做好的方法。好了，直接上干货

1.准备一个模型。
今天我们也准备了一个模型给大家使用:

car.glb (3.48 MB, 下载次数: 162)

2024-6-27 15:03 上传

点击文件名下载附件

2.模型移动:
今天总共分享三个简单的动画，包括模型移动、模型旋转、模型缩放。我们以模型移动举例。
先贴代码:

move("myCar",{x:0,y:0,z:40.36},30,false,null)
function move(name,position,frame,loop,moveAfter) {
var box = scene.getMeshByName(name);
// 创建一个动画
var animation = new BABYLON.Animation("moveAnimation", "position", 60, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
// 定义关键帧
var keys = [];
keys.push({
frame: 0,
value: box.position // 起始位置
});
keys.push({
frame: 30,
value: new BABYLON.Vector3(position.x, position.y, position.z) // 目标位置
});
// 设置关键帧
animation.setKeys(keys);
// 应用动画
box.animations = [];
box.animations.push(animation);
// 运行动画
scene.beginAnimation(box, 0, frame, loop); // 从0帧到100帧，循环播放
// 如果需要在动画结束后执行某些操作，可以监听动画结束事件
animation.onAnimationEnd = moveAfter
}

复制代码

这是一个move的function。在这个方法中，我们已经封装好了一套移动的方法，而我们就给大家说一下需要注意的点即可。
首先是方法里面的 animation动画，我们创建了一个 animation 对象。
这个对象里面其他的我们都可以不用管，第三个参数我们传递了一个60.而这个60就代表了我动画每秒60帧。
然后下面有个key的数组，里面也传递了一个 0和30.而这个则是代表了我这个动画从第0帧开始执行，第30帧结束。
那么就等于我这个动画总共执行时间是0.5秒，我们也就是通过这个来控制动画执行时长。
那么这个介绍完，我们就可以直接调用方法了。
方法总共5个入参，分别对应:
name:模型节点名称
position:模型需要到的移动的位置
frame: 动画执行到多少帧
loop：是否重复执行
moveAfter:动画执行结束，回调函数

所有参数，只有模型节点名称和位置可能我们初始不知道，所以我们需要利用wyn的3D场景设计器来获取。首先模型节点名称:
image.png484515990.png

选择到模型节点，然后下面的名称就是模型节点名称，我们也可以根据自己的定义去改变名称。
2.模型移动的位置，我们可以利用右下角的移动按钮来手动移动模型，然后记录对应的位置:

在上述动画中我们自定义改变位置，然后记录位置那里的XYZ即可，传递使用如下传递:
{x:0,y:0,z:40.36}

总体调用就是：

move("myCar",{x:0,y:0,z:40.36},30,false,null)

至此，一个模型移动动画就完成了，是不是很简单下面也分享一下其他的动画:

scaling.js (867 Bytes, 下载次数: 81)

		自动登录	找回密码
密码			立即注册

[仪表板] 3D 模型动画分享

0 个回复

Wyn高级认证

Wyn认证