three.js 的动画,不同设备的动画效果不同。

在使用Vue3和Three.js开发项目时,作者遇到电脑配置差异导致模型位移动画效果不一致的问题。原因是requestAnimationFrame在高性能电脑上可能导致过度渲染。解决方案是限制帧率,确保在不同配置的电脑上都能稳定执行。通过设置帧数和规定时间,只在达到特定间隔时执行渲染,从而实现动画效果的一致性。
摘要由CSDN通过智能技术生成
  1. 近期在做vue3加three.js的项目时,遇到一个问题,记录一下。。

  1. 在做项目时,加载模型之后,给位移动画效果时,在我自己的电脑上没问题(自己电脑配置不好)。但是在我们公司的电脑上(配置比较好)会出现位移不到指定的位置。一开始我自己也是满头雾水,这不是硬件方面的问题吗?

  1. 最后还是我们组里的大佬解决了。主要就是因为我们使用requestAnimationFrame(),再渲染期间,他是要不停的调用的,硬件好的电脑你不会出现掉帧的问题,也就是画面可以很流畅的执行并到达指定位置,硬件不好的就眼泪直流。

  1. 主要的解决方法就是,让requestAnimationFrame()的调用次数减少,这样就会是两台电脑达到相差无几的效果。

  1. 自己的部分代码,仅供参考。

var FPS = 32;//帧数
var renderT = 1 / FPS;//规定的时间。
var timeS = 0;

animate(); //执行的动画函数
function animate(){
    requestAnimationFrame(animate);//连续调用
    var T = clock.getDelta(); //获取每次执行帧之间的间隔时间
    timeS = timeS + T;
    if (timeS > renderT) {//只有当执行帧间隔大于你所规定的时间时,才会执行渲染动作
        render(YzqTaskTarGets);
        timeS = 0;
    }
}

6.这样就可以解决问题了。兄弟们可以帮忙点点赞。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值