76 - three.js 笔记 - OrbitControls 轨道控件的围绕目标 target 参数

1、简介

THREE.OrbitControls是最常用的用来控制相机的控件，并且也是官方文档中唯一有介绍的控件。

轨道控制允许摄像机围绕一个目标轨道运行

这个目标默认为THREE.Vector3()，也就是(0, 0, 0)世界坐标的原点。
可以通过THREE.OrbotControls的实例对象来修改.target = new THREE.Vector3(...)
设置控件的target属性，会改变相机的lookAt视点，但是修改相机的lookAt是不会影响THREE.OrbitControls的target的，原因是控件的默认目标并不是相机的聚焦点。
查看OrbitControls源码可以得知

THREE.OrbitControls = function ( object, domElement ) {

    this.object = object;

    this.domElement = ( domElement !== undefined ) ? domElement : document;

    // "target" sets the location of focus, where the object orbits around
    this.target = new THREE.Vector3();

    ......
}

默认的聚焦点this.target = new THREE.Vector3();

2、使用案例

2.1、设置相机聚焦点

如果场景中没有添加OrbitControls的话，设置camera.lookAt()是有效的。添加了控件则相机的lookAt()失效，所以如果想让相机的聚焦点改变的话，就需要改变OrbitControls的target属性。

controls.target = new THREE.Vector3(0, 10, 0);

以上代码会使场景的聚焦点向上移动10距离。

2.2、执行动画时改变 `target`

顾名思义OrbitControls为轨道控件，因此当相机移动的时候，必须有一个一直围绕的中心点。
如果想要实现一个相机随着路线移动的动画，那就需要相机一直注视着前方，所以此时的视点就是前方的一个Vector3向量，而不是固定的target，若是固定的target则会在相机移动的时候，使镜头改变不再注视前方。
如下的示例，让相机从A点到B点，途径原点o(0, 0, 0)此时，看一下相机的视角状态
这里写图片描述
看一下相机在场景中运行的效果，发现与设想并不符合，因为相机走到原点的时候镜头发生了变动

这里写图片描述

然后看一下此时相机的运行轨迹，可以看出，相机的聚焦点确实一直注视着场景的中心，并没有一直向前
这里写图片描述
设想中的相机运行轨迹应该如下

其实以上原因是因为相机的OrbitControls的target在动画的过程中，一直注视着场景的中心Vector3(0, 0, 0)导致的，解决办法就是，在动画的过程中，修改控件的target属性。

let tween = new TWEEN.Tween(camera.position);

tween.to({x:0, y:5, z:-20}, 5000);
tween.delay(2000);
controls.target = new THREE.Vector3(0, 5, -20);

tween.start();

此时在执行动画的时候，就不会因为target而导致相机的镜头改变了
这里写图片描述