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
的,原因是控件的默认目标并不是相机的聚焦点。
3、解决办法
通过OrbitControls的target
属性来控制相机的方向
this.orbitControl.target = mesh.position;
this.orbitControl.update();
需要注意的是,更改target
属性之后,需要调用update
方法来更新相机方向,不然不起作用。