如何使用three.js绘制平行线？答案

【问题标题】：How to draw parallel line using three.js?如何使用three.js绘制平行线？
【发布时间】：2012-06-17 21:13:17
【问题描述】：

我是矩阵变换概念的新手，我尝试在正交方向上偏移一条线。我想出的是：

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

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

【问题讨论】：

标签： geometry three.js

【解决方案1】：

也许我弄错了，但我看不到 THREE.Line 或其超类 THREE.Object3D 有一个名为 translate 的方法...当然您可以创建自己的 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);

现在使用这样的翻译功能将不允许您创建平行线，因为此功能只会移动已创建的线。我创建了这个 demo fiddle here，它创建了两条平行线（如果它们具有相同的斜率，则线是平行的）。如果您取消注释翻译调用，它会将第二行移到第一行之上。

【讨论】：

谢谢科里，太好了。另一件事是有一个垂直于线的方向。如何获得？
可能值得它自己的问题。我会创建另一个问题页面，并具体说明您要完成的工作。我建议对诸如此类的答案以及对您有帮助的其他答案进行投票，或者至少通过点击答案旁边的复选框来“接受”它们。否则，人们不会倾向于回答。
谢谢，没关系。这就是我要求的（正交方向）。对不起，如果我犯了一个错误并且不清楚