javascript - 如何使组拖入three.js？

我制作了一个平面和球体，纹理多维数据集和简单的多维数据集以及一个加载的amf，如何拖动或平移该平面并将所有提到的对象拖到一起，实际上我进行了分组，并从trackBallControl和OrbitControl获得了帮助。
这是我的代码的一部分，我真的不知道该怎么做。我可以单独拖动，但不能成组拖动。

var grid = new THREE.GridHelper(50, 50, 0xffffff, 0x555555);
        grid.rotateOnAxis(new THREE.Vector3(1, 0, 0), 90 * (Math.PI / 180));
        scene.add(grid);
var grids= [grid];
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 10;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
var dragControls = new THREE.DragControls(grids, camera, renderer.domElement);
dragControls.addEventListener('dragstart', function (event) {
controls.enabled = false;
        });

dragControls.addEventListener('dragend', function (event) {
controls.enabled = true;
        });

最佳答案

如果我说对了。您可以将所有内容（平面和球体，纹理立方体和简单立方体以及已加载的amf）添加为grid（即THREE.GridHelper()）的子代：

var objects = [];

var grid = new THREE.GridHelper(10, 10);
scene.add(grid);
objects.push(grid); // add to the array for DragControls

var sphere = new THREE.Mesh(...);
sphere.position.set(-1, 1, 0);
grid.add(sphere); // as a child of the grid

var cube = new THREE.Mesh(...);
cube.position.set(1, 1, 0);
grid.add(cube); // as a child of the grid

var dragControls = new THREE.DragControls(objects, camera, renderer.domElement);
dragControls.addEventListener('dragstart', function(event) {
  controls.enabled = false;
});
dragControls.addEventListener('dragend', function(event) {
  controls.enabled = true;
});

jsfiddle示例。如果我错过了您的问题，请澄清。