How to draw parallel line using three.js?

问题:

i'm new to concepts of matrix transformations and i try to offset a line in a orthogonal direction. What i came up to is:

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

which translates a line along an axis defined in a vector. So my question is how to define the axis in a vector to get the parallel line?

回答1:

Perhaps I am mistaken but I cannot see where either THREE.Line or it's superclass THREE.Object3D has a method called translate... of course you could create your own translate function which wouldn't be too hard.

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;
}

This function I wrote up will translate any kind of object descended from the class THREE.Object3D. You pass in an offset like you did above as well as a Vector3 specifying the direction.

This call will translate lineA by 30 in the negative x direction:

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

and the following is identical, because the direction vector is normalized (divided by its length):

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

Now using a translate function like this will not allow you to create parallel lines, as this function will simply move a line that has already been created. I have created this demo fiddle here which creates two parallel lines (lines are parallel if they have the same slope). If you uncomment the call to translate it will move the second line on top of the first.