如何从偏移向量转换向量

Question

如何从偏移向量转换向量。

我有一条线，其中有 2 个点，一个在该线的起点，一个在该线的终点向量。

我想基于 DragConstrols 位置而不是基于线位置来平移线和点我只是根据线开始和结束向量更新线几何顶点和点位置。

记住点不是线的子节点，所有对象都是场景的子节点 该线将点存储在该线的 userData 内。

我的目标是从拖动偏移量 Vector3 转换所有这 3 个对象

这是带有点的线的屏幕截图。 start_vector = (-140, 60, 0) end_vector = (-70, 100, 0)

在用户拖动线 v1 = (-140, 60, 0) 之前，我知道线的起始向量，并且我 知道拖动前的线端向量v2 = (-70, 100, 0)

现在，当用户使用 DragConstrols 拖动线条时，我不让 dragControls 更改线条位置，我得到了 dragConstrol vector3，我想根据该矢量平移线条顶点。

DragControls 总是从 (0, 0, 0) 开始，所以我尝试将线向量 (v1, v2) 与位置相加，但我得到了这个结果。

谁能告诉我如何从 dragControls 位置设置行开始和结束向量。 或者如何从偏移向量转换向量。

谢谢。

到目前为止我的代码。

请记住，这条线是 Line2（胖线）three/examples/jsm/lines/Line2

class NewLine extends Line2 {

  private _start = new Vector3();
  private _end = new Vector3();

  /** The viewport width */
  public viewportWidth: number;

  /** The viewport height */
  public viewportHeight: number;

  /** The line3 */
  public line3 = new Line3();

  public get start() { return this._start; }
  public set start(v: Vector3) {
    this._start = v;
    this.line3.set(v, this._end);
    this.geometry['setPositions']([
      v.x,
      v.y,
      v.z,
      this._end.x,
      this._end.y,
      this._end.z
    ]);
    this.geometry['verticesNeedUpdate'] = true;  // maybe i don't need that
    this.geometry.computeBoundingSphere();
    this.computeLineDistances();
  }

  public get end() { return this._end; }
  public set end(v: Vector3) {
    this._end = v;
    this.line3.set(this._start, v);
    this.geometry['setPositions']([
      this._start.x,
      this._start.y,
      this._start.z,
      v.x,
      v.y,
      v.z,
    ]);
    this.geometry['verticesNeedUpdate'] = true; // maybe i don't need that
    this.geometry.computeBoundingSphere();
    this.computeLineDistances();
  }


  constructor( start: Vector3, end: Vector3 ) {
    super();

    // create geometry
    const geometry = new LineGeometry();
    geometry.setPositions([
      start.x, start.y, start.z,
      end.x, end.y, end.z
    ]);
    this.geometry = geometry;

    // create material
    const material = new LineMaterial({
      color: 0x000000,
      linewidth:5,
      depthTest: false, // new
      vertexColors: false,
    });
    this.material = material;

    this.computeLineDistances();
    this.scale.set( 1, 1, 1 );
    this.line3.set(start, end);

  }

}



/**
 * Translates a line base on DragControls position.
 * line: The NewLine
 * position: The new Vector3 position from dragControls
 */
translateLineFromVector(line: NewLine, position: Vector3) {

  const v1 = line.start;
  const v2 = line.end;

  const offset_start = line.start.clone().add( position ).sub(line.position);
  const offset_end = line.end.clone().add( position ).sub(line.position);

  line.start.copy( offset_start );
  line.end.copy( offset_end );
}

Answer 1

标准的拖拽方式：

On mouse down(X,Y):
    If Clicked at object and not Dragging:
         Dragging = True
         X0 = X
         Y0 = Y
         //important - remember object coordinates at this moment!
         V1_0 = V1
         V2_0 = V2

On mouse moving (X,Y) :
   If Dragging: 
       //Draw object at coordinates shifted by (X - X0), (Y - Y0)
       //from initial position, not from the current one
       V1.X = V1_0.X + X - X0
       V1.Y = V1_0.Y + Y - Y0
       same for V2
       DrawObject(V1,V2)


On Mouse Up(X,Y):
   If Dragging: 
       Fragging = False
       Fix positions V1,V2 if needed