Vue+Three.js 入门三（使用OrbitControls操作镜头）

 官方列举的属性

.autoRotate : Boolean
将其设为true，以自动围绕目标旋转。
请注意，如果它被启用，你必须在你的动画循环里调用.update()。

.autoRotateSpeed : Float
当 .autoRotate : Boolean为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一次需要30秒。
请注意，如果 .autoRotate : Boolean被启用，你必须在你的动画循环里调用.update()。

.dampingFactor : Float
当 .enableDamping : Boolean设置为true的时候，阻尼惯性有多大。
请注意，要使得这一值生效，你必须在你的动画循环里调用.update()。

.domElement : HTMLDOMElement
用于监听鼠标事件或触摸事件的HTMLDOMElement（DOM元素）。该值必须在构造函数中进行传入； 在此更改它将不会设置新的事件监听器

.enabled : Boolean
控制器是否被启用。

.enableDamping : Boolean
将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。
请注意，如果该值被启用，你将必须在你的动画循环里调用.update()。

.enableKeys : Boolean
启用或禁用键盘控制。

.enablePan : Boolean
启用或禁用摄像机平移，默认为true。

.enableRotate : Boolean
启用或禁用摄像机水平或垂直旋转。默认值为true。
请注意，可以通过将polar angle或者azimuth angle 的min和max设置为相同的值来禁用单个轴， 这将使得水平旋转或垂直旋转固定为所设置的值。

.enableZoom : Boolean
启用或禁用摄像机的缩放。

.keyPanSpeed : Float
当使用键盘按键的时候，相机平移的速度有多快。默认值为每次按下按键时平移7像素。

.keys : Object
这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。
controls.keys = {
	LEFT: 37, //left arrow
	UP: 38, // up arrow
	RIGHT: 39, // right arrow
	BOTTOM: 40 // down arrow
}请参阅this page来查看所有按键的代码列表。

.maxAzimuthAngle : Float
你能够水平旋转的角度的上限，范围是-Math.PI到Math.PI（或Infinity无限制）， 其默认值为Infinity。

.maxDistance : Float
你能够将相机向外移动多少（仅适用于PerspectiveCamera），其默认值为Infinity。

.maxPolarAngle : Float
你能够垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI。

.maxZoom : Float
你能够将相机缩小多少( 仅适用于OrthographicCamera only )，其默认值为Infinity。

.minAzimuthAngle : Float
你能够水平旋转的角度的下限，范围是-Math.PI到Math.PI（或-Infinity无限制）， 其默认值为-Infinity。

.minDistance : Float
你能够将相机向内移动多少（仅适用于PerspectiveCamera），其默认值为0。

.minPolarAngle : Float
你能够垂直旋转的角度的下限，范围是0到Math.PI，其默认值为0。

.minZoom : Float
你能够将相机放大多少( 仅适用于OrthographicCamera )，其默认值为0。

.mouseButtons : Object
这一对象包含了对用于控制的鼠标按钮的引用。
controls.mouseButtons = {
	LEFT: THREE.MOUSE.ROTATE,
	MIDDLE: THREE.MOUSE.DOLLY,
	RIGHT: THREE.MOUSE.PAN
}
.object : Camera
正被控制的摄像机。

.panSpeed : Float
位移的速度，其默认值为1。

.position0 : Vector3
由 .saveState : saveState和 .reset : reset方法在内部使用。

.rotateSpeed : Float
旋转的速度，其默认值为1.

.screenSpacePanning : Boolean
定义当平移的时候摄像机的位置将如何移动。如果为true，摄像机将在屏幕空间内平移。 否则，摄像机将在与摄像机向上方向垂直的平面中平移。其默认值为false。

.target0 : Vector3
由 .saveState : saveState和 .reset : reset方法在内部使用。

.target : Vector3
控制器的焦点，.object的轨道围绕它运行。 它可以在任何时候被手动更新，以更改控制器的焦点。

.touches : Object
This object contains references to the touch actions used by the controls.
controls.touches = {
	ONE: THREE.TOUCH.ROTATE,
	TWO: THREE.TOUCH.DOLLY_PAN
}
.zoom0 : Float
由 .saveState : saveState和 .reset : reset方法在内部使用。

.zoomSpeed : Float
摄像机缩放的速度，其默认值为1。 Speed of zooming / dollying. Default is 1.

实验源码

<template>

  <div class="main-view">

    <div id="demo2" style="width: 100%;height: 100%"></div>



    <el-button class="refresh-btn" @click="refreshView()">刷新视图</el-button>



  </div>

</template>



<script>

  import * as THREE from 'three'

  import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader'


  import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'



  export default {

    data() {

      return {

        camera: null,

        scene: null,

        renderer: null,

        controls: null

      }

    },

    mounted() {

      this.LOG.info(['THREE.REVISION -- ', THREE.REVISION]);

      this.init();

      this.animate();

    },

    methods: {

      init() {

        this.scene = new THREE.Scene();

        const container = document.getElementById('demo2');

        const width = container.clientWidth;

        const height = container.clientHeight;

        this.camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);

        this.camera.position.z = 250;



        this.renderer = new THREE.WebGLRenderer({antialias: true});

        this.renderer.setSize(width, height);

        container.appendChild(this.renderer.domElement);

        //加载一个模型
        const loader = new OBJLoader();

        let material = new THREE.MeshBasicMaterial({color: 'gray', side: THREE.DoubleSide});

        loader.load('./objs/demo2/male02.obj', obj => {

          this.LOG.info(['objs/demo2/male02.obj', obj]);

          obj.traverse(function (child) {

            if (child instanceof THREE.Mesh) {

              child.material = material;

            }

          });

          this.scene.add(obj);

          this.render();
          
          this.initControls();

        }, xhr => {

          this.LOG.warn(['obj -- ', xhr.loaded / xhr.total * 100, ' %']);

        }, error => {

          this.LOG.error(['obj error-- ', error]);

        })


       

      },

      initControls() {

        this.controls = new OrbitControls(this.camera, this.renderer.domElement);

        // 如果使用animate方法时，将此函数删除

        //this.controls.addEventListener( 'change', this.renderer );

        // 使动画循环使用时阻尼或自转 意思是否有惯性

        this.controls.enableDamping = true;

        //动态阻尼系数 就是鼠标拖拽旋转灵敏度

        //controls.dampingFactor = 0.25;

        //是否可以缩放

        this.controls.enableZoom = true;

        //是否自动旋转

        this.controls.autoRotate = true;

        //设置相机距离原点的最远距离

        this.controls.minDistance = 200;

        //设置相机距离原点的最远距离

        this.controls.maxDistance = 600;

        //是否开启右键拖拽

        this.controls.enablePan = true;

      },

      refreshView() {

        const container = document.getElementById('demo2');

        const width = container.clientWidth;

        const height = container.clientHeight;

        // this.camera.aspect = width / height;

        this.camera.updateProjectionMatrix();

        this.renderer.setSize(width, height)

      },

      animate() {

        this.controls.update();

        this.render();

        requestAnimationFrame(this.animate);

      },



      render() {

        this.renderer.render(this.scene, this.camera)

      },




    }

  }

</script>



<style scoped>



  .refresh-btn {

    position: absolute;

    top: 15px;

    right: 15px;

  }



</style>