ThreeJS TransformControl 释放控件

如何解决ThreeJS TransformControl 释放控件

我正在使用 Typescript 和 Autodesk Forge Viewer 执行此操作。我试图限制 ThreeJS 变换控件的移动。我有一个可以移动网格的定义区域（由最小最大 X、Y、Z 定义）。我还使用 prev_pos 变量记录了网格位置的变化。

在变换控件的“更改”事件侦听器中，我会根据最小 X、Y、Z 值检查当前网格位置。

在这里，检查后，如果网格位置在区域外，我将网格位置重置为限制。我还将 prev_pos 设置为这个极限位置。但是，我也想从变换控件中释放控件，以便变换控件将其位置重置为附加的网格位置。

当前，附加的网格重置为限制，但仍然可以拖动控件。之后，控件的位置从网格偏移，每次我将鼠标悬停在控件上时，尽管没有按下移动按钮，网格也会自行移动。我还尝试使用 transformControl.position.copy(mesh.position) 重置控制位置，但没有奏效。这是“更改”事件的代码：

 public onTxChange() {
console.log("TxChange");
if (!this.allowUpdate) {
  return;
}
let position: THREE.Vector3 = new THREE.Vector3(0,0);
if (this.m_mesh !== null) {

  position.x = this.m_mesh.position.x;
  position.y = this.m_mesh.position.y;
  position.z = this.m_mesh.position.z;

}
else {
  return;
}
const scaffoldGroupInfo: scaffold_group_info = g_scaffold_docking_panel_cmn.getScaffoldGroupInfo();
const color: string = scaffoldGroupInfo.color;
let deltaX: number = position.x - this.m_prevPos.x;
let deltaY: number = position.y - this.m_prevPos.y;
let deltaZ: number = position.z - this.m_prevPos.z;
console.log("DeltaX");
console.log(deltaX);
if (deltaX > 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(),"X",false,color,deltaX);
}
else if (deltaX < 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(),true,deltaX * -1);
}
if (deltaY > 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(),"Y",deltaY * 1);
}
else if (deltaY < 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(),deltaY * -1);
}
if (deltaZ > 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(),"Z",deltaZ);
}
else if (deltaZ < 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(),deltaZ * -1);
}

if (!scaffold_cmn.CubeResizable) {
  scaffold_cmn.ResetAttachedMeshPositionRotation();
  return;
}
this.m_prevPos = position;

}

解决方法

您应该能够通过简单地限制正在移动的对象的位置来实现这一点，例如，在 change 事件处理程序中使用此代码（如 this Three.js discourse thread ):

const min = new THREE.Vector3(-100,-100,-100);
const max = new THREE.Vector3(100,100,100);
transformControl.object.position.clamp(min,max);

下次调用其 update 方法时，变换控件的位置应更新为对象的位置，如下所示：https://github.com/mrdoob/three.js/blob/r71/examples/js/controls/TransformControls.js#L702。

注意类似