three.jsで読み込んだglTFオブジェクトをまとめてドラッグしたいです

Question

three.jsを使ってgltfオブジェクトをドラッグしたいのですが、おそらくマテリアルごと(?) に反応してしまい、分裂してしまいます。
全体をまとめてドラッグしたいのですが、どのようにすればいいのでしょうか？

画像はドラッグしたあとの様子なのですが、赤い面と青い面が別々に動いてしまいます。

Blenderで作成した3Dオブジェクトを .gltf ファイルでエクスポートし、それを
・Three.js
・GLTFLoader.js
・OrbitControls.js
・TrackballControls.js
で描写・操作しています。

Answer 1

three.js の公式サンプルが参考にならないでしょうか？

■ three.js webgl - drag controls
https://threejs.org/examples/misc_controls_drag.html

Comments

[kakeDashMan]

調べているときにこのページは見ましたが、意図した動きとは違いました。

添付画像で言うと同じ色の面(色が塗られていない白い面)はまとまって動いてくれますが、色(作成したマテリアル)が違うと同時にドラッグできません。
また"Shift+Click" でgroupにできるのは分かりましたが、それだと移動の度に毎回グループ化しないといけない上に、グループ解除しないと他のオブジェクトを動かせません。
赤い面を動かしたら青い面も同じ分だけ動いてほしいのですが、これを参考にすればできるのでしょうか？