可视化变换控件对象，可以动态拖动每一个组件threejs-TransformControls

    import { TransformControls } from '/three.js/three.js-master/examples/jsm/controls/TransformControls.js';
    import { DragControls } from '/three.js/three.js-master/examples/jsm/controls/DragControls.js';



        //可视化变换控件对象
        var transformControl = new TransformControls( camera,renderer.domElement );
        scene.add( transformControl );//控件对象添加到场景对象
        //transformControl.setMode('rotate');
         //拖拽控件对象
        var dragcontrols = new DragControls(scene.children,camera,renderer.domElement );
        //拖拽控件对象设置鼠标事件
        dragcontrols.addEventListener( 'hoveron', function ( event ) {
            //控件对象transformControl与选中的对象object绑定
            transformControl.attach( event.object );
        } )

用于动态调整每个控件在控件中位置，实时查看效果，如下