可視化變換控件對象，可以動態拖動每一個組件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 );
        } )

用於動態調整每個控件在控件中位置，實時查看效果，如下