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);
};
评论区