使用Three.DragControls构造函数报错：THREE.DragControls is not a constructor

我来帮你搞定这个问题～这个报错基本是因为DragControls的导入/使用方式不符合当前Three.js的版本规范，而且你单独安装的three-dragcontrols其实已经被官方整合进Three.js核心包了，完全没必要额外装。下面是具体的解决步骤：

1. 先清理冲突依赖 #

首先卸载单独安装的three-dragcontrols，避免版本冲突：

npm uninstall three-dragcontrols

2. 正确导入DragControls #

根据你的项目模块系统，选对应的导入方式：

情况1：ES模块（Vue/React/Vite等现代项目） #

直接从Three.js的addons目录导入官方控件：

import * as THREE from 'three';
import { DragControls } from 'three/addons/controls/DragControls.js';

情况2：CommonJS（Node.js/旧版Webpack） #

用require语法导入：

const THREE = require('three');
const { DragControls } = require('three/addons/controls/DragControls.js');

情况3：全局引入（HTML直接用script标签） #

如果是直接引入Three.js CDN，需要额外加DragControls的CDN脚本：

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/DragControls.js"></script>

这种情况下，DragControls会挂载到THREE全局对象上，就能直接用new THREE.DragControls()了。

3. 正确初始化DragControls #

初始化时必须传入三个核心参数：要拖动的对象数组、相机、渲染器的DOM元素，示例代码结合你的现有逻辑：

var scene = new THREE.Scene(); 
scene.background = new THREE.Color( 0xf0f0f0 ); 
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 ); 
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 假设你有一个要拖动的网格对象
const boxMesh = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color: 0xff0000})
);
scene.add(boxMesh);

// 初始化DragControls
const dragControls = new DragControls([boxMesh], camera, renderer.domElement);

// 可选：监听拖动事件（比如配合轨道控制时禁用/启用）
dragControls.addEventListener('dragstart', () => {
    // 如果用了OrbitControls，拖动时暂时禁用它
    // orbitControls.enabled = false;
});

dragControls.addEventListener('dragend', () => {
    // 拖动结束恢复轨道控制
    // orbitControls.enabled = true;
});

常见坑点提醒 #

• 别同时用旧的three-dragcontrols包和官方addons控件，会导致命名冲突
• 确保Three.js版本在r130以上，旧版本还没把DragControls整合到addons里
• 初始化时传入的对象数组不能是空的，否则会触发异常

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