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.属性
说明：
-
controls.autoRotate = true：这行代码将相机的自动旋转功能设置为启用状态。当设置为true时，相机将自动旋转，使用户能够以360度的视角观察场景。 -
controls.dampingFactor = 0.01：这行代码设置了相机旋转时的阻尼因子。阻尼因子用于控制相机旋转的速度和平滑度。较小的阻尼因子值会使相机旋转更快，较大的值则会使旋转更慢。在这里，阻尼因子被设置为0.01。 -
controls.enableDamping = true：这行代码启用了相机旋转的阻尼效果。当设置为true时，相机旋转的速度会受到阻尼因子的影响，从而实现平滑的旋转动画。
controls.autoRotate=true
controls.dampingFactor=0.01
controls.enableDamping=true4.展示
5.源码
<script setup>
import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = window.innerWidth, height = window.innerHeight;// initconst 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 );// animationfunction 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>
)
