在three.js中使用camera.lookAt不起作用的问题

分类:计算机 | 三维开发 | 基础理论 | 综合 791
更新:2022-10-10 22:03:54
编辑

1 问题描述

最近在研究three.js,在three.js场景中添加了一个模型,在设置相机的观察点位置时发现设置以后没有效果,代码如下:

camera.position.set(-8,1,0);
camera.up.x = 0;
camera.up.y = 1; //相机以y轴为上方向
camera.up.z = 0;
camera.lookAt(new THREE.Vector3(10,-20,0));
scene.add(camera);

2 问题分析

在网上查了很多资料,发现原来是因为在场景中使用了OrbitControls这个轨道控制器来控制相机,轨道控制器的目标默认为THREE.Vector3(),也就是(0, 0, 0)世界坐标的原点。

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

3 问题解决

需要通过OrbitControls的target属性代替camera.lookAt来设置相机的观察点位置,如下代码:

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

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