Three.js 同步两个相机对象状态 - 文章教程

Three.js 同步两个相机对象状态

发布于 2021-09-06 字数 1507 浏览 1014 评论 0

正投影相机对象 camera2 和正投影相机对象 camera 的状态保持一致,比如通过相机的控件OrbitControls改变camera的状态进行旋转、缩放时候,camera2 保持同步也进行旋转、缩放变化。

//相机对象camera作为参数   控件可以监听鼠标的变化,改变相机对象的属性
var controls = new THREE.OrbitControls(camera);
// .position属性记录相机的位置状态,位置变化改变相机对象的视图矩阵
camera2.position.copy(camera.position);
// 四元数属性.quaternion记录的角度状态,角度姿态变化改变相机对象的视图矩阵
camera2.quaternion.copy(camera.quaternion);
//.zoom是相机的缩放属性
camera2.zoom = camera.zoom
// 改变相机.zoom属性的时候,需要手动执行updateProjectionMatrix方法更新相机对象的投影矩阵
camera2.updateProjectionMatrix()

两个正投影相机

var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
//创建相机对象  小窗口宽高度相同
var width2 = 200; //小窗口宽度
var height2 = 200; //小窗口高度
var camera2 = new THREE.OrthographicCamera(-s, s, s, -s, 1, 1000);
camera2.position.set(200, 300, 200); //设置相机位置
camera2.lookAt(scene.position); //设置相机方向(指向的场景对象)

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

清晨说ぺ晚安

我之所以活到现在的全部意义,是为了此刻能对你说,我爱你,我会在你身后永远守护你。

16 文章
2 评论
21567 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0