drag the object group in XY plane only in three.js

Question

The objective is to drag the objects in the scene using mouse. zoom in and zoom out are working properly. while dragging the object is rotated, but not dragged. what is the issue here?

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);

const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#grid")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(400, 400);
scene.background = new THREE.Color(0xffffff);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

for (let i = 0; i < 3; i++) {
    const geometry = new THREE.PlaneGeometry(9, 10);
    const material = new THREE.MeshBasicMaterial({ color: 0x9c8af5, side: THREE.DoubleSide });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = -i * 10.1;
    scene.add(cube);
} 

camera.position.set(0, 0, 100);
renderer.render(scene, camera);

render();

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<canvas id="grid" style="border: 1px solid black;">
</canvas>

Answer 1

here is a workaround. what have done is that :

1. created a transparent plane with width and height that of the window.
2. added all the created cubes to the plane
3. using the DragControls controls the dragging is enabled for the plane.
4. now if we drag the plane all the cubes will get dragged at the same unit.

note: if you want just to drag the individual cubes, just change the objects to cube in let controls = new THREE.DragControls(objects, camera, renderer.domElement);. also then we need to place this DragControls code inside the loop after creating the cube.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#grid")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(400, 400);
scene.background = new THREE.Color(0xffffff);

var objects = [];

var scenePlane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight);
const scenePlaneMaterial = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide} );
scenePlaneMaterial.transparent = false;
const plane = new THREE.Mesh( scenePlane, scenePlaneMaterial );
objects.push(plane);


let controls = new THREE.DragControls(objects, camera, renderer.domElement);

for (let i = 0; i < 3; i++) {
    const geometry = new THREE.PlaneGeometry(9, 10);
    const material = new THREE.MeshBasicMaterial({ color: 0x9c8af5, side: THREE.DoubleSide });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = -i * 10.1;
    plane.add(cube);
} 
scene.add(plane);





camera.position.set(0, 0, 100);
renderer.render(scene, camera);

render();

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/DragControls.js"></script>
<canvas id="grid" style="border: 1px solid black;">
</canvas>