1.导入

说明：相机围绕目标进行轨道运动。也就是可以通过鼠标拖拽进行移动视角。

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

2.使用

说明：构造controls对象，再调用update方法；为了使效果更为明显，为此我添加了网格地面。

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

网格地面： GridHelper方法参数一是坐标格尺寸，参数二是坐标格细分次数，参数三是中线颜色，参数四为网格线显色。

 const GridHelper=new THREE.GridHelper(10,10,0x444444,'red')
  scene.add(GridHelper)

 3.属性

说明：

1. controls.autoRotate = true：这行代码将相机的自动旋转功能设置为启用状态。当设置为true时，相机将自动旋转，使用户能够以360度的视角观察场景。

2. controls.dampingFactor = 0.01：这行代码设置了相机旋转时的阻尼因子。阻尼因子用于控制相机旋转的速度和平滑度。较小的阻尼因子值会使相机旋转更快，较大的值则会使旋转更慢。在这里，阻尼因子被设置为0.01。

3. controls.enableDamping = true：这行代码启用了相机旋转的阻尼效果。当设置为true时，相机旋转的速度会受到阻尼因子的影响，从而实现平滑的旋转动画。

controls.autoRotate=true
controls.dampingFactor=0.01
controls.enableDamping=true

4.展示

5.源码

<script setup>
import * as THREE from 'three';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const width = window.innerWidth, height = window.innerHeight;

// init

const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.set(5,2,2)



const scene = new THREE.Scene();
 // 添加网格地面
 const GridHelper=new THREE.GridHelper(10,10,0x444444,'red')
  scene.add(GridHelper)
//   立方体的猖狂
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
const controls = new OrbitControls( camera, renderer.domElement );
// 自动旋转
controls.autoRotate=true
controls.dampingFactor=0.01
controls.enableDamping=true
renderer.setSize( width, height );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

// animation

function animation( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;
    controls.update()
	renderer.render( scene, camera );

}
</script>

<template>
<div>

  </div>

</template>

<style scoped>
</style>