解决three.js导入模型拖拽问题

最近在使用three.js做3D项目，要实现一个功能，就是能拖动模型，在网上找了很久，通过使用DragControls.js和TransformControls.js确实可以实现，但是遇到一个问题，使用网上的这种方式只能实现单个Mesh的拖动，而项目中经常会遇到导入的模型不是单个的Mesh，而是一个group，在这种情况下，该如何实现整个模型的拖动。
解决办法：当导入外部模型时可以在模型的外部套一层Mesh，拖动的过程中，拖动外部的Mesh，让里面的模型位置跟着一起变化，大体的思路就是这样，下面用代码展示。

var myModelGroup // 外部导入的模型，具体以实际项目中的为准，这里只是一个标识
var geometry = new THREE.BoxGeometry(modelLength, modelWidth, modelHeight);
var material = new THREE.MeshBasicMaterial({
     
	color: 0xfff,
	transparent: true,
	opacity: 0.1
});
outerMesh = new THREE.Mesh(geometry, material);

outerMesh.position.x = positionX;
outerMesh.position.y = positionY;
outerMesh.position.z = positionZ;

outerMesh.rotation.x = rotation.x
outerMesh.rotation.y = rotation.y
outerMesh.rotation.z = rotation.z


outerMesh.scale.set(scale.x, scale.y, scale.z)
outerMesh.name = 'myModelGroup' // 使用name属性标记内部模型的名称
scene.add(outerMesh)
objectNodes.push(outerMesh)
initDragControls(objectNodes)


// 添加拖拽控件
function initDragControls(objects) {
     
	// 添加平移控件
	var transformControls = new THREE.TransformControls(camera, renderer.domElement);
	scene.add(transformControls);

	// 初始化拖拽控件
	var dragControls = new THREE.DragControls(objects, camera, renderer.domElement);

	// 鼠标略过事件
	dragControls.addEventListener('hoveron', function (event) {
     
		// 让变换控件对象和选中的对象绑定
		transformControls.attach(event.object);
	});
	// 开始拖拽
	dragControls.addEventListener('dragstart', function (event) {
     
		controls.enabled = false;
	});
	// 拖拽过程
	dragControls.addEventListener('drag', function (event) {
     
		var name = event.object.name; // event.object即为外部模型，在这里可以通过外层模型的name属性找到内部模型
		
		var x = event.object.position.x
		var y = event.object.position.y
		var z = event.object.position.z
		
		myModelGroup.position.x = x // 给内部模型位置赋值
		myModelGroup.position.y = y
		myModelGroup.position.z = z
		
	});
	// 拖拽结束
	dragControls.addEventListener('dragend', function (event) {
     
		controls.enabled = true;
	});
}

单个Mesh的拖动方法，可以参考文章
https://blog.csdn.net/ithanmang/article/details/80901893