TransformControls.js：滑鼠操控物體移動、縮放、旋轉的控制元件（物體操作工具）

該控制元件可以實現視覺化操作三維模型，通過選中一個三維模型，然後通過控制元件物件的方法attach()可以把選中的三維模型與控制元件TransformControls繫結， 你可以把控制元件物件TransformControls理解為一個特殊的三維模型，比如平移狀態，控制元件物件TransformControls就是一個三維座標軸，通過拖動座標軸就可以移動與座標軸繫結的三維模型。

import TransformControls from 'three/examples/js/controls/TransformControls';
 

通過該控制元件物件方法setMode的值可以實現三維模型的平移、旋轉和縮放對應不同的視覺化操作，比如平移是通過三維座標軸實現，旋轉通過一個三維圓弧線實現。  

method
    dispose() //解綁所有事件
    attach() //設定當前物件
    detach() //解除物件
    setMode(mode)
     - mode[scale/rotate/translate][string]
     //設定場景編輯模式 
    setTranslationSnap()
    setRotationSnap()
    setSize() // 設定大小
    setSpace() // 設定區域性 世界空間
    update() // 更新
 

旋轉、縮放操作

通過控制元件物件transformControl的方法setMode("rotate")設定旋轉操作，上面的程式中並沒有設定控制元件物件transformControl方法setMode的引數，但程式預設的是"translate"，表示平移。

transformControl.setMode('rotate')

縮放操作，模式設定方法setMode的引數使用"scale"。

transformControl.setMode('scale')

 
/**
 * 開啟物體控制元件
 * */
THREEObject.prototype.initTransFormControls = function () {
  // 新增平移控制元件
  let _this = this;
  _this.transformControls = new TransformControls(_this.camera, _this.renderer.domElement);
  _this.transformControls.addEventListener( 'dragging-changed', function ( event ) {
	_this.controls.enabled = !event.value
  } );
  _this.scene.add(_this.transformControls);
  _this.transformControls.attach(_this.DeletsChildren);
  _this.transformControls.setMode('scale');
  _this.controls.enabled = false;
};
/**
 * 關閉物體控制元件
 * */
THREEObject.prototype.DeleteTransFormControls = function () {
  let _this = this;
  _this.transformControls.detach();
  _this.controls.enabled = true;
  _this.scene.remove(_this.transformControls);
};