three.js CameraControl - DragControls

import { DragControls } from 'three/examples/jsm/controls/DragControls'

// Mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const meshes = [];
let mesh;
let material;
for (let i = 0; i < 20; i++){
    material = new THREE.MeshStandardMaterial({
        color: `rgb(
            ${ 50 + Math.floor(Math.random() * 205) },
            ${ 50 + Math.floor(Math.random() * 205) },
            ${ 50 + Math.floor(Math.random() * 205) }
        )`
    });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = (Math.random() - 0.5) * 5;
    mesh.position.y = (Math.random() - 0.5) * 5;
    mesh.position.z = (Math.random() - 0.5) * 5;

    mesh.name = `box-${i}`;
    scene.add(mesh);

    meshes.push(mesh);
}

// Controls
const controls = new DragControls(meshes, camera, renderer.domElement);

controls.addEventListener('dragstart', e =>{
    console.log(e.object);
    console.log(e.object.name);
})

DragControls는 드래그이벤트를 다룰 수 있는 컨트롤러이다. 

위 코드에서는 생성한 mesh 각각에 name으로 이름을 부여하고, meshes라는 배열에 넣은 후, 

해당 배열을 DragControls생성자에 할당하여 배열의 오브젝트들을 드래그할 수 있도록 하였다.