我是程序猿

注册

 

发新话题 回复该主题

three.js 变换大小、角度、位移控件 TransformControls.js [复制链接]

1#
TransformControls.js:鼠标操控物体移动、缩放、旋转的控件(物体操作工具)

该控件可以实现可视化操作三维模型,通过选中一个三维模型,然后通过控件对象的方法attach()可以把选中的三维模型与控件TransformControls绑定, 你可以把控件对象TransformControls理解为一个特殊的三维模型,比如平移状态,控件对象TransformControls就是一个三维坐标轴,通过拖动坐标轴就可以移动与坐标轴绑定的三维模型。
  1. import TransformControls from 'three/examples/js/controls/TransformControls';
复制代码
通过该控件对象方法setMode的值可以实现三维模型的平移、旋转和缩放对应不同的可视化操作,比如平移是通过三维坐标轴实现,旋转通过一个三维圆弧线实现。
  1. method
  2.     dispose() //解绑所有事件
  3.     attach() //设置当前对象
  4.     detach() //解除对象
  5.     setMode(mode)
  6.      - mode[scale/rotate/translate][string]
  7.      //设置场景编辑模式
  8.     setTranslationSnap()
  9.     setRotationSnap()
  10.     setSize() // 设置大小
  11.     setSpace() // 设置局部 世界空间
  12.     update() // 更新
复制代码
旋转、缩放操作

通过控件对象transformControl的方法setMode("rotate")设置旋转操作,上面的程序中并没有设置控件对象transformControl方法setMode的参数,但程序默认的是"translate",表示平移。
  1. transformControl.setMode('rotate')
复制代码
缩放操作,模式设置方法setMode的参数使用"scale"。
  1. transformControl.setMode('scale')
复制代码
setSize()方法
通过控件对象transformControl的方法setSize()可以设置三维坐标轴的几何尺寸,方法的参数范围[0.0,1.0]
  1. transformControl.setSize(0.4);// 设置三维坐标轴大小
复制代码
实例操作:
  1. /**
  2. * 开启物体控件
  3. * */
  4. THREEObject.prototype.initTransFormControls = function () {
  5.   // 添加平移控件
  6.   let _this = this;
  7.   _this.transformControls = new TransformControls(_this.camera, _this.renderer.domElement);
  8.   _this.transformControls.addEventListener( 'dragging-changed', function ( event ) {
  9.     _this.controls.enabled = !event.value
  10.   } );
  11.   _this.scene.add(_this.transformControls);
  12.   _this.transformControls.attach(_this.DeletsChildren);
  13.   _this.transformControls.setMode('scale');
  14.   _this.controls.enabled = false;
  15. };
  16. /**
  17. * 关闭物体控件
  18. * */
  19. THREEObject.prototype.DeleteTransFormControls = function () {
  20.   let _this = this;
  21.   _this.transformControls.detach();
  22.   _this.controls.enabled = true;
  23.   _this.scene.remove(_this.transformControls);
  24. };
复制代码
分享 转发
TOP
发新话题 回复该主题