#yyds干货盘点#three.js中相机的lookAt和control的target区别

Posted 2021-12-09 歆冉

1.改变相机的lookAt，效果如下:

会发现：

• 场景是没移动的
• 改变的是相机的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的值，效果如下：

  

  会发现

• 相机是没有变化的
• 整个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控制到底控制的是什么, 控制的的是整个场景对象