如何使用three.js绘制平行线?

时间:2012-06-14 19:15:30

标签: geometry three.js

我是矩阵变换概念的新手,我尝试在正交方向上偏移一条线。我的目标是:

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

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

1 个答案:

答案 0 :(得分:2)

也许我错了,但我看不到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。

此调用将在负x方向将lineA转换为30:

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

以下是相同的,因为方向向量被归一化(除以其长度):

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

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