OrbitControls

通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景，而是相机的参数，相机的位置角度不同，同一个场景的渲染效果是不一样，比如一个相机绕着一个场景旋转，就像场景旋转一样。
如果你想深入了解相机控制器OrbitControls的每一个功能，OrbitControls是如何对Three.js正投影相机和透视投影相机对象进行封装的，可以阅读Three.js\examples\js\controls目录下的OrbitControls.js文件。

鼠标控制相机位置简单demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>OrbitControls 鼠标控制交互</title>
  7.   <style>
  8.     body {
  9.       margin: 0;
  10.       overflow: hidden;
  11.       /* 隐藏body窗口区域滚动条 */
  12.     }
  13.   </style>
  14.   <!--引入three.js三维引擎-->
  15.   <script src="./js-r100/three.js"></script>
  16.   <script src="./js-r100/controls/OrbitControls.js"></script>
  17. </head>
  19. <body>
  20.   <script>
  21.     /**
  22.      * 创建场景对象Scene
  23.      */
  24.     var scene = new THREE.Scene();
  25.     /**
  26.      * 创建网格模型
  27.      */
  28.     // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
  29.     var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
  30.     var material = new THREE.MeshLambertMaterial({
  31.       color: 0x0000ff
  32.     }); //材质对象Material
  33.     var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  34.     scene.add(mesh); //网格模型添加到场景中
  35.     /**
  36.      * 光源设置
  37.      */
  38.     //点光源
  39.     var point = new THREE.PointLight(0xffffff);
  40.     point.position.set(400, 200, 300); //点光源位置
  41.     scene.add(point); //点光源添加到场景中
  42.     //环境光
  43.     var ambient = new THREE.AmbientLight(0x444444);
  44.     scene.add(ambient);
  45.     /**
  46.      * 相机设置
  47.      */
  48.     var width = window.innerWidth; //窗口宽度
  49.     var height = window.innerHeight; //窗口高度
  50.     var k = width / height; //窗口宽高比
  51.     var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  52.     //创建相机对象
  53.     var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  54.     camera.position.set(200, 300, 200); //设置相机位置
  55.     camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  56.     /**
  57.      * 创建渲染器对象
  58.      */
  59.     var renderer = new THREE.WebGLRenderer();
  60.     renderer.setSize(width, height);//设置渲染区域尺寸
  61.     renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  62.     document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  63.     //- 渲染函数
  64.     function render() {
  65.       //执行渲染操作   指定场景、相机作为参数
  66.       renderer.render(scene, camera);
  67.     }
  68.     render();
  69.     //- 添加鼠标对视觉相机的操作
  70.     let controls = new THREE.OrbitControls(camera);
  71.     //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
  72.     controls.addEventListener('change', render, { passive: true });
  73.   </script>
  74. </body>
  75. </html>

上面的代码中,简单的通过引入controls.OrbitControls插件,传入camera对象,进行通过鼠标的操作移动改变相机位置.从而实现鼠标对网格模型的不同角度的观察.
OrbitControls可以实现鼠标左键进行视野旋转,右键平移视野位置,滚轮可以拉动与物体的距离.
OrbitControls高度封装了前面说的3种操作逻辑.关键代码只有两行

  1. 创建OrbitControls实例,传入camera摄像机对象
  2. 监听OrbitControls实例对象的change事件,重新调用渲染函数render.这里的第三个参数是对于谷歌浏览器的建兼容处理.
    1. //- 添加鼠标对视觉相机的操作
    2. let controls = new THREE.OrbitControls(camera);
    3. //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    4. controls.addEventListener('change', render, { passive: true });

    禁止旋转平移缩放(.enablePan属性)

    比如展示一个三维场景，比如一辆轿车产品，你不希望鼠标右键拖动会产生一个平移效果。可以通过设置相机空间对象OrbitControls的.enablePan属性，查看OrbitControls源码可以看到.enablePan属性的默认值是true。
    1. controls.enablePan = false; //禁止右键拖拽
    通过.enableZoom属性可以控制是否允许鼠标中键缩放场景，.enableZoom属性默认值true。
    1. controls.enableZoom = false;//禁止缩放
    通过.enableRotate属性可以控制是否允许鼠标左键旋转场景，.enableRotate属性默认值true。
    1. controls.enableRotate = false; //禁止旋转

    设置缩放范围

    你想控制一个产品或一个房间户型的缩放范围，可以通过相机空间OrbitControls的.minZoom和.maxZoom属性实现
    1. // 缩放范围
    2. controls.minZoom = 0.5;
    3. controls.maxZoom = 2;

    设置旋转范围

    展示一个三维场景，你想控制360度旋转范围，比如一辆轿车，你不希望用户看到轿车的底盘，你可以通过设置相机的旋转范围属性来实现。
    通过.minPolarAngle和.maxPolarAngle属性控制上下360度的旋转范围，通过.minAzimuthAngle和.maxAzimuthAngle属性控制左右360度的旋转范围，上下左右两个360度旋转也就是常说的720旋转展示。
    1. // 上下旋转范围
    2. controls.minPolarAngle = 0;
    3. controls.maxPolarAngle = Math.PI;
    4. // 左右旋转范围
    5. controls.minAzimuthAngle = -Math.PI * (100 / 180);
    6. controls.maxAzimuthAngle = Math.PI * (100 / 180);

    方向键漫游

    一个大场景中，通过相机空间OrbitControls操作键盘方向键可以控制透视投影相机对象可以在场景中移动漫游。
    如果你想实现一个场景漫游的效果，直接把透视投影相机对象camera作为OrbitControls构造函数的参数就可以。
    1. var controls = new THREE.OrbitControls(camera);

    OrbitControls的变化事件change

    对于一个静态的场景，可能不需要一直周期性调用渲染函数渲染场景，而是鼠标旋转缩放场景的时候才重新渲染，就可以通过相机空间OrbitControls的变化事件change监听触发函数调用渲染函数render。 ```javascript // 渲染函数 function render() { renderer.render(scene, camera); }

var controls = new THREE.OrbitControls(camera); //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果 controls.addEventListener(‘change’, render);

  1. <a name="dmSZF"></a>
  2. ### 相机空间作用的窗口范围
  3. 通过OrbitControls创建一个相机控件对象的时候，默认情况下，在浏览器的窗口整个内容区域body发生鼠标事件都会旋转、平移或缩放三维场景。在实际应用中如果你需要控制OrbitControls的作用范围，你需要通过`OrbitControls`构造函数的参数2设置。<br />Threejs渲染结果所在的Canvas画布，通过通过渲染器的`renderer.domElement`属性可以访问。
  4. ```javascript
  5. <div id="webgl" style="position: absolute;left: 30px;top: 100px;">
  6. <!-- 插入的canvas画布尺寸设置为800pxX600px -->
  7. </div>
  1. // 在id为webgl的元素中插入canvas画布
  2. document.getElementById('webgl').appendChild(renderer.domElement);
  3. //设置canvas画布renderer.domElement渲染区域尺寸
  4. renderer.setSize(800, 600);
  5. ...
  6. var controls = new THREE.OrbitControls(camera, renderer.domElement);