Three.js相机控件OrbitControls基本用法

2022-06-16 14:01:50 阅读：495 来源： 互联网

标签：control 控件 OrbitControls 缩放 Three 旋转相机场景

通过OrbitControls.js可以对Threejs 的三维场景进行缩放，平移，旋转操作，其本质上改变的幷不是场景，而是相机的参数。

OrbitControls.js使用

鼠标操作：通过拖动鼠标左键可以720旋转展示三维场景，通过拖动鼠标右键可以平移三维场景，通过上下滚动鼠标中键可以缩放三维场景。

1.创建控件对象

var control = new THREE.OrbitControls(camera);

2.禁止使用旋转，缩放，平移

control.enableRotate = false; //禁止旋转
control.enablePan = false; //禁止平移
control.enableZoom = false；//禁止缩放

3.启用旋转，缩放，平移

control.enableRotate =true; //启用旋转
control.enablePan = true; //启用平移
control.enableZoom =true；//启用缩放

4.设置缩放范围

使用正投用相机对象 OrthographicCamera

control.minZoom = 0.5;
control.maxZoom = 2;

使用相机空间对象 OrbitControls

//透视投影相机：相机距离目标观察点距离越远显示越小，距离越近显示越大

//相机距离观察目标点极小距离——模型最大状态
control.minDistance = 200;
//相机距离观察目标点极大距离——模型最小状态
control.maxDistance = 500;

5.设置旋转范围

// 上下旋转范围
control.minPolarAngle = 0;
control.maxPolarAngle = Math.PI;
// 左右旋转范围
control.minAzimuthAngle = -Math.PI * (100 / 180);
control.maxAzimuthAngle = Math.PI * (100 / 180);

6.变化事件change

有些静态场景不需要一直周期性调用渲染函数渲染场景，而且鼠标旋转缩放场景的时候才重新渲染，此时可以使用相机空间OrbitControls的变化时间change监听出发函数调用渲染函数render

control.addEventListener('change', render);

7.相机空间的作用窗口范围

使用相机空间OrbitControls创建一个相机空间对象的时候，默认情况下，在浏览器的窗口整个内容区域body发生鼠标事件都会旋转、平移或缩放三维场景。但是在实际应用中如果需要控制OrbitControls的作用范围，你需要通过OrbitControls构造函数的第二个参数设置。

var control = new THREE.OrbitControls(camera, renderer.domElement);

8.相机查看目标

执行THREE.OrbitControls构造函数时候，默认设置.target属性的值是Vector3(0,0,0),如果在执行new THREE.OrbitControls之前设置了camera.lookAt(特定位置);，相当于再次设置camera.lookAt(new THREE.Vector3(0,0,0));

标签：control,控件,OrbitControls,缩放,Three,旋转,相机,场景
来源： https://www.cnblogs.com/wss198909/p/16381706.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Three.js相机控件OrbitControls基本用法