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')

setSize()方法
通过控件对象transformControl的方法setSize()可以设置三维坐标轴的几何尺寸，方法的参数范围[0.0,1.0]

transformControl.setSize(0.4);// 设置三维坐标轴大小

实例操作：


/**
 * 开启物体控件
 * */
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);
};

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

猜你喜欢