如何使用three.js绘制平行线？ [英] How to draw parallel line using three.js?

问题描述

我对矩阵变换的概念很陌生，我尝试在正交方向上偏移一条线。我想到的是：
$ b $ pre $ line.translate（offsetPixels，new THREE.Vector3（1,1,0））;


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

解决方案

也许我错了，但我不能看看THREE.Line或它的超类THREE.Object3D在哪里有一个名为translate的方法......当然你可以创建自己的翻译函数，这不会太难。

 函数translate（object，offset，direction）{
 if（offset< = 0）返回false; 
 if（！（对象instanceof THREE.Object3D））返回false; 
 if（！（方向instanceof THREE.Vector3））返回false; 
 
 direction.normalize（）; 
 object.position.x + = offset * direction.x; 
 object.position.y + = offset * direction.y; 
 object.position.z + = offset * direction.z; 
 
返回true; 
 
 $ / code $ 
 
 
 
我写的这个函数将会翻译任何种类的来自类THREE .Object3D。你传入一个像上面那样的偏移量，以及一个指定方向的Vector3。
 
 
 
这个调用将会在负x方向上将lineA平移30次：
 
 $ b $ 
  translate（lineA，30，new THREE.Vector3（-1,0,0）; 
  
 
 
 
以下内容相同，因为方向矢量是归一化的（除以它的长度）：
 
 
  translate（lineA，30，new THREE.Vector3（-5,0,0）; 
  
现在使用像这样的翻译函数将不允许你创建平行线，因为这个函数只会移动一条已经创建的线，我创建了这个  demo fiddle here  ，它会创建两条平行线（如果线具有相同的斜率，则线平行）。取消注释翻译电话会将第二行移至第一行。
 
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?
解决方案
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.

                        
这篇关于如何使用three.js绘制平行线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！