three.js 变换大小、角度、位移控件 TransformControls.js

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);
};