Javascript 放大和缩小到场景THREE.js和TWEEN.js中的特定点

我试着从外部放大这个立方体内部的所有部分（我使用tween.js来做到这一点），缩放距离很好，但是正如您在代码片段中看到的，相机实际上并没有放大立方体，立方体将从相机旁边飞过，然后，如果您单击窗口上的任何位置，它（立方体）就会发生这种情况会弹回原位。这些不需要的事件仅在添加动态观察控件后发生。我实在想不起这件事。任何帮助都将不胜感激。（只需全屏运行代码段）

让摄影机、渲染器、场景、控件、立方体；
函数init（）{
//场景渲染器和摄影机
const canvas=document.getElementById（“canvas”）；
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（10,2,20,200）；
renderer=new THREE.WebGLRenderer（{canvas，antialas:true}）；
摄像机位置设置（0,0,170）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enablePan=false；
controls.enableZoom=false；
//立方体几何
const geometry=新的3.BoxGeometry（10,10,10）；
const material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
立方体=新的三个网格（几何体、材质）；
立方体位置集（0,0,0）；
场景.添加（立方体）；
//边缘几何
var edgeGeometry=new THREE.edgesgometry（cube.geometry）；//或线框几何
var edgeMaterial=新的三个.LineBasicMaterial（{颜色：0xffffff，线宽：2}）；
边缘=新的三条线段（边缘测量法、边缘材质）；
立方体。添加（边）；
渲染器。渲染（场景、摄影机）；
制作动画（）；
};
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
立方体旋转y+=0.0003；
立方体旋转.x+=0.0003；
TWEEN.update（）；
}
init（）；
var scrollEvent=0；
window.addEventListener（'wheel'，函数（事件）
{
如果（（event.deltaY<0）和&scrollEvent>=1）
{
var-xTarget=0；
var-yTarget=0；
var zTarget=170；
变量tweenDuration=0；
功能panCam（xTarget、yTarget、zTarget、tweenDuration）{
TWEEN.removeAll（）；
var-camNewPosition={x:xTarget，y:yTarget，z:zTarget}；
var-targetNewPos={x:xTarget，y:yTarget，z:0}；
var camTween=new TWEEN.TWEEN（camera.position）.to（camNewPosition，tweenDuration）.easing（TWEEN.easing.Quadratic.InOut）
.onComplete（函数（）{
照相机.位置.复制（camNewPosition）；
})
.start（）；
var targetTween=newtween.TWEEN（controls.target）.to（targetNewPos，tweenDuration）.easing（TWEEN.easing.Quadratic.InOut）
.onComplete（函数（）{
控件.target.copy（targetNewPos）；
})
.start（）；
}
潘卡姆(0,01701000);；
scrollEvent=0；
}
else if（event.deltaY>0&&scrollEvent==0）
{
scrollEvent+=1；
var-xTarget=0；
var-yTarget=0；
var zTarget=20；
变量tweenDuration=0；
功能panCam（xTarget、yTarget、zTarget、tweenDuration）{
TWEEN.removeAll（）；
var-camNewPosition={x:xTarget，y:yTarget，z:zTarget}；
var-targetNewPos={x:xTarget，y:yTarget，z:0}；
var camTween=new TWEEN.TWEEN（camera.position）.to（camNewPosition，tweenDuration）.easing（TWEEN.easing.Quadratic.InOut）
.onComplete（函数（）{
照相机.位置.复制（camNewPosition）；
})
.start（）；
var targetTween=newtween.TWEEN（controls.target）.to（targetNewPos，tweenDuration）.easing（TWEEN.easing.Quadratic.InOut）
.onComplete（函数（）{
控件.target.copy（targetNewPos）；
})
.start（）；
}
潘卡姆（0,0,201000）；
}});
正文{
保证金：0；
填充：0；
溢出：隐藏；
背景#f1f1；
}
场景
帆布{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：透明；
}

您能否澄清一下，期望的结果是什么？如果你想进入框中，那么使用它的
。位置
坐标作为相机和控件的目标`
目标
。因此，如果你删除轨道控件代码，我想要的结果基本上就是你看到的结果。相机将能够成功地从立方体外部放大到立方体内部，依此类推。我添加动态观察控件的原因是，用户可以旋转立方体，但是，一旦我添加动态观察控件，放大和缩小将不再产生所需的结果，即您在问题的代码段中看到的结果@棱镜849