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>
)
