WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

同步两个相机对象状态

正投影相机对象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); //设置相机方向(指向的场景对象)
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com