近期在做vue3加three.js的项目时,遇到一个问题,记录一下。。
在做项目时,加载模型之后,给位移动画效果时,在我自己的电脑上没问题(自己电脑配置不好)。但是在我们公司的电脑上(配置比较好)会出现位移不到指定的位置。一开始我自己也是满头雾水,这不是硬件方面的问题吗?
最后还是我们组里的大佬解决了。主要就是因为我们使用requestAnimationFrame(),再渲染期间,他是要不停的调用的,硬件好的电脑你不会出现掉帧的问题,也就是画面可以很流畅的执行并到达指定位置,硬件不好的就眼泪直流。
主要的解决方法就是,让requestAnimationFrame()的调用次数减少,这样就会是两台电脑达到相差无几的效果。
自己的部分代码,仅供参考。
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.这样就可以解决问题了。兄弟们可以帮忙点点赞。