上节实现了滚动控制骨骼动画：
但是有的动画很长，一屏滚动控制进度的话，会动画太快：
只是正常的滚动速度，但是动画就很快了。
这种情况怎么办呢？
我们可以通过多屏滚动来实现。
比如之前是 3.5 到 4.5，现在可以多加两屏，3.5 到 6.5 来控制进度。
首先，我们加强下环境光，不然太暗了：
然后多加两屏：
<div className='section section6'>
</div>
<div className='section section7'>
</div>
<div className='section section8'>
<h1>页面尾部</h1>
</div>
现在中间多了两屏空白。
我们要在这三屏的滚动内，不改变相机位置，始终对着人物：
if(pageNo >= 4 && pageNo < 6.5) {
camera.position.y = -2000;
}
可以看到，在 4、5、6 这三屏，人物始终在中央，到了第 7 屏消失。
然后跳舞的进度控制也变成 3 屏：
const pageNo = window.scrollY /window.innerHeight;
if(pageNo >= 3.5 && pageNo < 6.5) {
const percent = (window.scrollY / window.innerHeight - 3.5)/3;
clipAction.time = gltf.animations[0].duration * percent;
}
现在是在 3 屏的滚动范围内播放这个动画。
跳舞速度就比较正常了。
那鱼的鱼尾摆动动画太慢了，一屏看不出什么效果怎么办呢？
我们同样可以把它加快：
const percent = (window.scrollY / window.innerHeight - 2.5) / (1/5) % 1把它除以五分之一，然后模 1
也就是分成了五段的 0 到 1
看下效果：
可以看到，现在就是一屏内重复 5 次动画了。
我们可以根据不同的骨骼动画分别用一屏内运行多次，还是多屏运行一次来控制。
案例代码上传了小册仓库
总结
这节我们进一步完善了下交互效果。
有的模型一屏内控制会显得动画过快，这种我们可以用多屏来控制 0 到 1 的进度。
有的模型骨骼动画幅度太小，我们可以一屏运行多次，比如 / (1/5) % 1 来控制。
这样，我们就可以通过滚动控制 3D 动画了，官网的交互体验会更好。