1、问题
当我们在项目使用 OrbitControls(控制器)来控制相机进行旋转的时候不可避免就会遇到一个问题,修改相机的 lookAt 和 rotation 无效~
initCamera = () => {
/**
* @param {number} fov 从视图的底部到顶部,以角度表示 默认值是50
* @param {number} aspect 摄像机视锥体的长宽比
* @param {number} near 相机近端面。
* @param {number} far 相机远端面。
* @param {Vector3} position 相机的起始位置
* @param {Vector3} lookAt 相机看向某个点
*/
this.camera.fov = 60 //
this.camera.aspect = window.innerWidth / window.innerHeight //
this.camera.near = 1 //
this.camera.far = 20000 //
this.camera.updateProjectionMaÏtrix() //更新相机投影矩阵
this.camera.rotation.set(-0.156486664,1.53344866,-0.23345885) //修改相机旋转方向
this.camera.lookAt(0, 150, 350) //旋转对象以面对世界空间中的一个点。
window.addEventListener('resize', () => {
this.camera.aspect = window.innerWidth / window.innerHeight
this.camera.updateProjectionMatrix()
})
}
通过 lookAt、和rotation对相机的旋转进行操作后发现相机的位置和角度并没有发生变化,原因是当前相机已经被 OrbitControls 控制器托管了。
2、OrbitControls 介绍
轨道控制允许摄像机围绕一个目标轨道运行
- 轨道控制器默认指向 THREE.Vector3(0,0,0) ,也就是世界坐标系原点。
- 通过 OrbotControls 的实例对象来修改控制器的目标方向 controls.target = new THREE.Vector3(0, 350, -1800)。
- 设置控制器的 target 属性,会改变相机的 lookAt 视点,但是修改相机的 lookAt 属性是不会影响控制器的 target 的。
原因是 控制器 的默认目标并不是 相机的聚焦点,查看 OrbotControls 的源码可以得知 控制器的聚焦点是 this.target = new Vector3()
3、解决
如果场景中没有添加 OrbitControls 的话,设置 camera.lookAt 和 camera.rotation.set 是有效果的
this.camera.rotation.x = -0.3
this.camera.rotation.y = -0.3
this.camera.rotation.z = -0.3
文章来源:https://www.toymoban.com/news/detail-846921.html
当添加了控制器 相机的 lookAt 和 rotation 都会失效(当使用了控制器的时候,一般不会考虑 rotation 的问题),所以想让相机的聚焦点改变的话,就需要改变 OrbitControls 的 target 属性文章来源地址https://www.toymoban.com/news/detail-846921.html
this.control.target = new THREE.Vector3(0, 350, -1800)
以上代码会使相机的聚焦上移350,后退1800距离(threejs是右手坐标系)
到了这里,关于Three.js使用OrbitControls(控制器)后修改相机旋转方向无效问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!