DragControls 是 Three.js 提供的一个控制器，用于在 3D 场景中通过鼠标或触控拖拽物体。它的主要作用是帮助开发者在交互式的 Three.js 项目中更轻松地实现拖动操作。

注意，这个拖放控制主要功能是将场景中的物体直接通过属标控制位置，极大的简化了 three 中对物体位置操作的使用

DragControls 有五个属性五个事件

DragControls( objects : Array, camera : Camera, domElement : HTMLDOMElement ) objects: 一组可被拖拽的3D Objects。 camera: 渲染场景的摄像机。 domElement: 用于事件监听的HTML元素。(可选) 创建一个新的 DragControls 实例。

    // 添加环境光和点光源
    const ambientLight = new THREE.AmbientLight(0x404040); // 环境光
    scene.add(ambientLight);
    const pointLight = new THREE.PointLight(0xffffff, 1);
    pointLight.position.set(5, 5, 5);
    scene.add(pointLight);
    // 创建一个可拖拽的立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    // 设置拖拽对象数组（这里是单个立方体）
    const objects = [cube];
    // 初始化 OrbitControls 以便旋转视角
    const orbitControls = new OrbitControls(camera, renderer.domElement);
    // 创建 DragControls 控制器
    const dragControls = new DragControls(objects, camera, renderer.domElement);
    // 监听拖拽事件
    dragControls.addEventListener('dragstart', (event) => {
        orbitControls.enabled = false; // 禁用 OrbitControls，防止拖拽冲突
        event.object.material.color.set(0xff0000); // 开始拖拽时改变颜色
    });
    dragControls.addEventListener('drag', (event) => {
        console.log("拖拽中，位置:", event.object.position); // 输出拖拽位置
    });
    dragControls.addEventListener('dragend', (event) => {
        orbitControls.enabled = true; // 重新启用 OrbitControls
        event.object.material.color.set(0x00ff00); // 结束拖拽时恢复颜色
    });

事件

属性

    // 创建父对象和子对象
    const parentGeometry = new THREE.BoxGeometry(2, 2, 2);
    const parentMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const parentCube = new THREE.Mesh(parentGeometry, parentMaterial);
    scene.add(parentCube);
    const childGeometry = new THREE.BoxGeometry(1, 1, 1);
    const childMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    const childCube = new THREE.Mesh(childGeometry, childMaterial);
    childCube.position.set(1.5, 0, 0); // 子对象在父对象右侧
    parentCube.add(childCube);
    // 设置拖拽对象数组（包含父对象）
    const objects = [parentCube];
    // 创建 DragControls 并设置 recursive 为 false，避免拖动子对象
    const dragControls = new DragControls(objects, camera, renderer.domElement);
    dragControls.recursive = false; // 禁止单独拖动子对象

    // 创建多个对象并添加到场景中
    const objects = [];
    const colors = [0xff0000, 0x00ff00, 0x0000ff];
    for (let i = 0; i < 3; i++) {
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: colors[i] });
        const cube = new THREE.Mesh(geometry, material);
        cube.position.set(i * 2 - 2, 0, 0); // 分散放置
        scene.add(cube);
        objects.push(cube); // 将每个对象添加到拖拽对象数组中
    }
    // 创建 DragControls 并启用 transformGroup，将多个对象视为一个整体
    const dragControls = new DragControls(objects, camera, renderer.domElement);
    dragControls.transformGroup = true; // 设置为 true，将多个对象作为一个整体拖动