ThreeJS TransformControl 释放控件

Posted 2023-03-16

【中文标题】ThreeJS TransformControl 释放控件

【英文标题】：ThreeJS TransformControl release control

【发布时间】：2021-08-03 22:02:59

【问题描述】：

我正在使用 Typescript 和 Autodesk Forge Viewer 执行此操作。我试图限制 ThreeJS 变换控件的移动。我有一个可以移动网格的定义区域（由 min max 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, 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(), "X", true, color, deltaX * -1);

if (deltaY > 0) 
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "Y", false, color, deltaY * 1);

else if (deltaY < 0) 
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "Y", true, color, deltaY * -1);

if (deltaZ > 0) 
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "Z", true, color, deltaZ);

else if (deltaZ < 0) 
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "Z", false, color, deltaZ * -1);


if (!scaffold_cmn.CubeResizable) 
  scaffold_cmn.ResetAttachedMeshPositionRotation();
  return;

this.m_prevPos = position;

【参考方案1】：

您应该能够通过简单地限制被移动对象的位置来实现这一点，例如，在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。

注意类似