three.js中轨道控制器（OrbitControls）详解：

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动

1、代码示例：（以下我们以vue3.0项目为例）

<template>
    <div ref="glassRef"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import * as THREE from 'three';

const glassRef = ref();
const init = () => {
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    glassRef.value.appendChild( renderer.domElement );

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

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

    //controls.update() must be called after any manual changes to the camera's transform
    camera.position.set( 0, 20, 100 );
    //监听窗口 resize
    window.addEventListener('resize', onWindowResize);
}
const onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    render();
}
onMounted(() => {
    init();
})
onUnmounted(() => {
    window.removeEventListener('resize', onWindowResize)
})
</script>

2、controls 属性配置:

controls.enablePan = false; //禁止右键拖拽
controls.enableZoom = false;//禁止缩放
controls.enableRotate = false; //禁止旋转
controls.minZoom = 0.5; // 最小缩放比例
controls.maxZoom = 2; // 放大最大比例

// 上下旋转范围
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI;

// 左右旋转范围
controls.minAzimuthAngle = -Math.PI * (100 / 180);
controls.maxAzimuthAngle = Math.PI * (100 / 180);

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

// 当.autoRotate为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一周需要30秒。
controls.autoRotateSpeed = 2

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

controls.keyPanSpeed = 7

// 这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。

controls.keys = {
  LEFT: 'ArrowLeft', //left arrow
  UP: 'ArrowUp', // up arrow
  RIGHT: 'ArrowRight', // right arrow
  BOTTOM: 'ArrowDown' // down arrow
}

// 移除所有的事件监听
controls.dispose () 
// 为指定的DOM元素添加按键监听。推荐将window作为指定的DOM元素。
controls.listenToKeyEvents( domElement : HTMLDOMElement ) 

// 更新控制器。必须在摄像机的变换发生任何手动改变后调用，或如果.autoRotate或.enableDamping被设置时，在update循环里调用。

controls.update ()