three.js camera.lookAt不起作用的原因

1、问题描述

在场景中添加了一个PlaneGeometry来实现草地效果时，使用camera.lookAt(mesh.position)使相机看向mesh的位置，

初始化后相机方向正确，能看向mesh的中心点，但是当拖动场景后，相机又看向了场景坐标原点。

代码如下：

var geometry = new THREE.PlaneGeometry(4000, 4000); //矩形平面
// 加载树纹理贴图
var texture = new THREE.TextureLoader().load("./img/caodi.jpg");
// 设置阵列
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(10, 10);
var material = new THREE.MeshLambertMaterial({
    map: texture,
});
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
this.scene.add(mesh); //网格模型添加到场景中
mesh.rotateX(-Math.PI / 2);
mesh.position.y = -800;

this.camera.lookAt(mesh.position);
this.camera.updateProjectionMatrix();

 效果：

  拖动后变成看向坐标原点  

 

---

2、问题原因

代码中使用了OrbitControls轨道控件来控制相机，这个目标默认为THREE.Vector3()，也就是(0, 0, 0)世界坐标的原点。

设置控件的target属性，会改变相机的lookAt视点，但是修改相机的lookAt是不会影响THREE.OrbitControls的target的，原因是控件的默认目标并不是相机的聚焦点。

https://blog.csdn.net/ithanmang/article/details/82735273

---

3、解决办法

通过OrbitControls的target属性来控制相机的方向

this.orbitControl.target = mesh.position;
this.orbitControl.update();

需要注意的是，更改target属性之后，需要调用update方法来更新相机方向，不然不起作用。