如何在ThreeJS中实现模型的鼠标拖拽视角旋转功能？

直接用ThreeJS官方提供的OrbitControls就能快速实现你要的拖拽旋转视角功能，不用自己写复杂的鼠标事件逻辑。下面是修改后的完整代码，我会标注关键改动：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 新增：导入OrbitControls
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const loader = new GLTFLoader();

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000000000 );
camera.position.set(15, 20, 110); // 合并位置设置，更简洁
const light = new THREE.AmbientLight( 0xffffff ); // White light
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
scene.add( light );
renderer.setClearColor(0x000000);
document.body.appendChild( renderer.domElement );

// 新增：创建OrbitControls实例，关联相机和渲染器DOM元素
const controls = new OrbitControls(camera, renderer.domElement);
// 启用阻尼，让旋转动作更平滑（需在动画循环里更新控制器）
controls.enableDamping = true;
// 阻尼系数，数值越小旋转越平滑
controls.dampingFactor = 0.05;
// 可选：禁止缩放，若只需要旋转功能
// controls.enableZoom = false;
// 可选：禁止平移
// controls.enablePan = false;

loader.load( 'plane.gltf', function ( gltf ) {
    scene.add( gltf.scene );
    // 可选：让控制器默认围绕模型旋转，初始视角对准模型
    controls.target.copy(gltf.scene.position);
    controls.update();
}, undefined, function ( error ) {
    console.error( error );
} );

// 新增：处理窗口resize事件，避免画面变形
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

function animate() {
    // 启用阻尼后，必须在动画循环里更新控制器
    controls.update();
    renderer.render( scene, camera );
}
renderer.setAnimationLoop(animate);

关键说明： #

• OrbitControls会自动监听鼠标拖拽、滚轮等事件，实现绕目标点旋转视角、缩放、平移的功能，完全匹配3D模型查看的操作逻辑。
• 开启enableDamping后，旋转视角会有平滑减速效果，提升交互体验，但必须在animate函数中调用controls.update()才能生效。
• 加载模型后设置controls.target为模型位置，能让控制器默认围绕模型旋转，无需手动调整初始视角。
• 窗口resize事件处理是必要的，防止窗口尺寸变化时渲染画面变形。

内容的提问来源于stack exchange，提问作者bingandabong