JavaScript/Three.js-添加mooving过渡曲线以更改z轴上的摄影机位置

我正在尝试将我的第一步变成Three.js，但我有一个小问题。 我有一个旋转二十面体在我的场景中间，当我点击一个按钮，它应该开始旋转更快一点，相机应该更接近它，所以它似乎更大。问题是我正在以线性方式改变距离/旋转速度。我想要实现的是给这个动画添加一些加速曲线

然而。。。我迷路了。我看过大量的教程和示例，但没有一个向我解释如何实现立方贝塞尔效果

我也尝试使用GSAP使其工作，但我没有任何效果。 如果你不能帮助我，那么你可能知道有什么好文章可以让我学到这些东西吗？或者是一个涵盖这些过渡的教程

这是我的代码：

let scene=new THREE.scene（）；
让摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.15000）；
让renderer=new THREE.WebGLRenderer（{alpha:true，antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
window.addEventListener（'resize'，（）=>{
let width=window.innerWidth；
let height=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
});
摄像机位置z=10；
var pointL1=新的三点光源（0xffffff，2，30）；
点1.position.x=-4；
点L1.位置y=7；
点L1.位置z=8；
场景。添加（点L1）；
var geometry1=新的三个二十面体几何（5,1）；
var material1=新的三个.MeshBasicMaterial（{颜色：0x22222，线框：true}）；
var二十面体=新的三网格（几何1，材料1）；
场景。添加（二十面体）；
二十面体。旋转。y-=1；
设MaxCameraRadist=10；
设mincameridist=8；
设cameridist=10；
让我们改变=错误；
函数渲染（）{
如果（更改期间==错误）{
二十面体旋转y+=0.001；
二十面体旋转z+=0.001；
如果（CameraditMinCameradit）{
Cameradit-=0.05；
camera.position.z=camerRadist；
}
}
}
让循环=函数（）{
请求动画帧（循环）；
render（）；
渲染器。渲染（场景、摄影机）；
}
loop（）；
document.querySelector（'button'）。addEventListener（'click'，（）=>{
if（duringChange==false）duringChange=true；else duringChange=false；
})

按钮{
填充：20px；
位置：绝对位置；
z指数：2；
}
帆布{
位置：绝对位置；
z指数：1；
}

改变它

一个未弃用库的示例-GSAP 3

这些文件如下：

let scene=new THREE.scene（）；
让摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.15000）；
let renderer=new THREE.WebGLRenderer({
阿尔法：是的，
反别名：对
});
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
window.addEventListener（'resize'，（）=>{
let width=window.innerWidth；
let height=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
});
摄像机位置z=15；
var pointL1=新的三点光源（0xffffff，2，30）；
点1.position.x=-4；
点L1.位置y=7；
点L1.位置z=8；
场景。添加（点L1）；
var geometry1=新的三个二十面体几何（5,1）；
var material1=新的三种基本材料({
颜色：0x22222，
线框：正确
});
var二十面体=新的三网格（几何1，材料1）；
场景。添加（二十面体）；
二十面体。旋转。y-=1；
让CameraRadistFrom=15；
设cameridito=8；
让旋转速度=0.1；
让时钟=新的三个时钟（）；
函数render（）{
设t=clock.getDelta（）；
二十面体。旋转。y+=旋转速度*t；
二十面体旋转.z+=旋转速度*t；
}
让循环=函数（）{
请求动画帧（循环）；
render（）；
渲染器。渲染（场景、摄影机）；
}
loop（）；
document.querySelector（'button'）。addEventListener（'click'，（）=>{
旋转速度=0.3；
gsap.从到（摄像机位置{
z:从
}, {
z:Cameraditto，
持续时间：1，
放松：“后退。退出（3）”
});
})

正文{
溢出：隐藏；
保证金：0；
}
钮扣{
填充：20px；
位置：绝对位置；
z指数：2；
}
帆布{
位置：绝对位置；
z指数：1；
}

改变它

您可以使用tween.js来实现所需的效果。我使用的是GSAP3，因此tween.js从这一点上来说有点落后。