如何使用 Three.js 绘制平行线？

我对矩阵变换的概念很陌生，我尝试在正交方向上偏移一条线。我想到的是：

line.translate( offsetPixels,  new THREE.Vector3( 1, 1, 0 )  );

它沿着向量中定义的轴平移一条线。所以我的问题是如何定义向量中的轴以获得平行线？

也许我错了，但我看不到 THREE.Line 或其超类 THREE.Object3D 有一个名为“translate”的方法...当然，您可以创建自己的翻译函数，这不会太难。

function translate(object, offset, direction) {
    if (offset <= 0) return false;
    if (!(object instanceof THREE.Object3D)) return false;
    if (!(direction instanceof THREE.Vector3)) return false;

    direction.normalize();
    object.position.x += offset * direction.x;
    object.position.y += offset * direction.y;
    object.position.z += offset * direction.z;

    return true;
}

我编写的这个函数将转换从类 THREE.Object3D 派生的任何类型的对象。您可以像上面那样传递偏移量以及指定方向的 Vector3。

此调用会将 lineA 沿负 x 方向平移 30：

translate(lineA, 30, new THREE.Vector3(-1,0,0);

以下是相同的，因为方向向量是标准化的（除以它的长度）：

translate(lineA, 30, new THREE.Vector3(-5,0,0);

现在使用这样的翻译函数将不允许您创建平行线，因为该函数只会移动已经创建的线。我已经创建了这个演示小提琴在这里这会创建两条平行线（如果线具有相同的斜率，则它们是平行的）。如果您取消注释翻译调用，它将把第二行移到第一行的上面。