1、改变相机的lookAt,效果如下:

4.gif

会发现:

  • 场景是没移动的
  • 改变的是相机的lookAt值

    核心代码

    // 添加相机辅助对象,用来查看相机的变化情况
    const cameraHelper = new THREE.CameraHelper(camera)
    scene.add(cameraHelper)
    // 创建一个点
    let pos  = new THREE.Vector3(0, 0, 0)
    let index = 0
    function render() {
    controls.update()
    TWEEN.update()
    renderer.render(scene, camera)
    if (isEnabled) {
        pos.x += 0.5
        camera.lookAt(pos)
    }
    }
    animate()

    2、改变OrbitControls控制器的target的值,效果如下:

    4.gif

    会发现

  • 相机是没有变化的
  • 整个3D场景在朝着反方向移动,所以我们可以得出,其实OrbitControls控制的是场景的变化

    核心代码

    
    let pos  = new THREE.Vector3(0, 0, 0)
    let index = 0
    function render() {
    controls.update()
    TWEEN.update()
    renderer.render(scene, camera)
    if (isEnabled) {
        pos.x += 0.5
        controls.target.copy(pos)
    }
    }
    animate()

## 3、总结
1. 相机的lookAt的使用
2. 明白OrbitControls控制到底控制的是什么, 控制的的是整个场景对象