【问题标题】:Apply Rotation to Cylinder based on Tube Ending Normal根据管端法线向圆柱体应用旋转
【发布时间】:2017-02-01 14:10:49
【问题描述】:

我正在尝试在 three.js 中制作一个弯曲的 3D 箭头。为了完成这项任务,我创建了一个遵循弯曲路径的Tube 和一个形状为锥形的Cylinder(通过将radiusTop 设置为很小)。它们目前看起来像这样:

我正在尝试将箭头(圆柱形状为锥形)定位在管的末端,如下所示:(Photoshopped)

我的数学不是特别强,而且对 three.js 很陌生。有人可以帮助我了解如何将两者联系起来吗?

这是我当前的代码:

        import T from 'three';

        var findY = function(r, x)
        {
           return Math.sqrt((r * r) - (x * x));
        }

        var radius = 25;
        var x = 0;
        var z = 0;
        var numberOfPoints = 10;
        var interval =  (radius/numberOfPoints);
        var points = [];

        for (var i = numberOfPoints; i >= 0; i--) 
        {
           var y = findY(radius, x);
           points.push(new T.Vector3(x, y, z))
           x = x + interval;
        }

        x = x - interval;

        for (var i = numberOfPoints - 1 ; i >= 0; i--) 
        {
           y = findY(radius, x) * -1;
           points.push(new T.Vector3(x, y, z));
           x = x - interval;
        }

        var path = new T.CatmullRomCurve3(points);

        var tubeGeometry = new T.TubeGeometry(
            path,  //path
            10,    //segments
            radius / 10,     //radius
            8,     //radiusSegments
            false  //closed
        );

        var coneGeometry = new T.CylinderGeometry(
            radiusTop = 0.1,
            radiusBottom = radius/5,
            height = 10,
            radialSegments = 10,
            heightSegments = 10,
            openEnded = 1
        );

        var material = new T.MeshBasicMaterial( { color: 0x00ff00 } );

        var tube = new T.Mesh( tubeGeometry, material );
        var cone = new T.Mesh( coneGeometry, material );

        // Translate and Rotate cone?

如果有人可以尝试简单地解释一下数学和编程完成的必要条件,我将不胜感激

  • 找到位于管末端的法线
  • 将锥体移动到正确位置

感谢任何帮助!

【问题讨论】:

  • 在我的回答中添加了edit1,2

标签: javascript math three.js geometry coordinates


【解决方案1】:

当您可以直接在原地创建箭头时,请勿为此使用旋转。同样,弯管也可以这样做。唯一需要的就是A,B 端点定义的最后一条线段。

A 为尖点,B 为圆盘基中心。要创建箭头,您需要 2 个额外的基向量,我们将它们称为基盘的 U,V 和半径 r。从它们中,您可以使用如下简单的圆形公式创建圆盘点:

  1. 获取AB端点

  2. 计算U,V基向量

    U,V 应位于箭头的圆盘底部,且应相互垂直。箭头的方向(线|BA|)是圆盘基础法线,因此利用叉积将垂直向量返回到相乘的向量,因此:

    W = B-A;
    W /= |W|;    // unit vector
    T = (1,0,0); // temp any non zero vector not parallel to W
    if ( |(W.T)|>0.75 ) T = (0,1,0); // if abs dot product of T and W is close to 1 it means they are close to parallel so chose different T
    U = (T x W) // U is perpendicular to T,W
    V = (U x W) // V is perpendicular to U,W
    
  3. 创建/渲染箭头几何

    那是简单的展位A,B 是三角扇的中心(需要 2),圆盘基点的计算如下:

    P(ang) = B + U.r.cos(ang) + V.r.sin(ang)
    

    所以只需将ang 循环通过一些步骤,这样您就可以获得足够的积分(通常 36 就足够了),并从它们中做两个三角扇。不要忘记最后一个圆盘点必须与第一个圆盘点相同,否则ang = 0360 度数上会出现丑陋的外观或孔。

如果您仍想进行轮换,则可以这样做。以与上述相同的方式计算U,V,W,并从中构造变换矩阵。原点O 将是点B 和轴X,Y,Z 将是U,V,W 顺序取决于您的箭头型号。 W 应该与模型轴匹配。 U,V 可以按任何顺序排列。所以只需将所有向量复制到它们的位置并使用此矩阵进行渲染。欲了解更多信息,请参阅:

[备注]

如果您不知道如何计算交叉/点积或绝对值等向量运算,请参阅:

// cross product: W = U x V
W.x=(U.y*V.z)-(U.z*V.y)
W.y=(U.z*V.x)-(U.x*V.z)
W.z=(U.x*V.y)-(U.y*V.x)
// dot product: a = (U.V)
a=U.x*V.x+U.y*V.y+U.z*V.z
// abs of vector a = |U|
a=sqrt((U.x*U.x)+(U.y*U.y)+(U.z*U.z))

[Edit1] 简单的 GL 实现

我不在您的环境中编写代码,但由于投票和评论表明你们无法自行将其放在一起,考虑到您已经走到了这一步,这很奇怪,所以这里是简单的 C++/GL 示例如何做到这一点(您可以将其移植到您的环境中):

void glArrowRoundxy(GLfloat x0,GLfloat y0,GLfloat z0,GLfloat r,GLfloat r0,GLfloat r1,GLfloat a0,GLfloat a1,GLfloat a2)
    {
    const int _glCircleN=50;    // points per circle
    const int n=3*_glCircleN;
    int i,j,ix,e;
    float x,y,z,x1,y1,z1,a,b,da,db=pi2/(_glCircleN-1);
    float ux,uy,uz,vx,vy,vz,u,v;
    // buffers
    GLfloat ptab[6*_glCircleN],*p0,*p1,*n0,*n1,*p;
    p0=ptab+(0*_glCircleN);     // previous tube segment circle points
    p1=ptab+(3*_glCircleN);     // actual tube segment circle points
    da=+db; if (a0>a1) da=-db;  // main angle step direction
    ux=0.0;                     // U is normal to arrow plane
    uy=0.0;
    uz=1.0;
    // arc interpolation a=<a0,a1>
    for (e=1,j=0,a=a0;e;j++,a+=da)
        {
        // end conditions
        if ((da>0.0)&&(a>=a1)) { a=a1; e=0; }
        if ((da<0.0)&&(a<=a1)) { a=a1; e=0; }
        // compute actual tube ceneter
        x1=x0+(r*cos(a));
        y1=y0+(r*sin(a));
        z1=z0;
        // V is direction from (x0,y0,z0) to (x1,y1,z1)
        vx=x1-x0;
        vy=y1-y0;
        vz=z1-z0;
        // and unit of coarse
        b=sqrt((vx*vx)+(vy*vy)+(vz*vz));
        if (b>1e-6) b=1.0/b; else b=0.0;
        vx*=b;
        vy*=b;
        vz*=b;
        // tube segment
        for (ix=0,b=0.0,i=0;i<_glCircleN;i++,b+=db)
            {
            u=r0*cos(b);
            v=r0*sin(b);
            p1[ix]=x1+(ux*u)+(vx*v); ix++;
            p1[ix]=y1+(uy*u)+(vy*v); ix++;
            p1[ix]=z1+(uz*u)+(vz*v); ix++;
            }
        if (!j)
            {
            glBegin(GL_TRIANGLE_FAN);
            glVertex3f(x1,y1,z1);
            for (ix=0;ix<n;ix+=3) glVertex3fv(p1+ix);
            glEnd();
            }
        else{
            glBegin(GL_QUAD_STRIP);
            for (ix=0;ix<n;ix+=3)
                {
                glVertex3fv(p0+ix);
                glVertex3fv(p1+ix);
                }
            glEnd();
            }
        // swap buffers
        p=p0; p0=p1; p1=p;
        p=n0; n0=n1; n1=p;
        }
    // arrowhead a=<a1,a2>
    for (ix=0,b=0.0,i=0;i<_glCircleN;i++,b+=db)
        {
        u=r1*cos(b);
        v=r1*sin(b);
        p1[ix]=x1+(ux*u)+(vx*v); ix++;
        p1[ix]=y1+(uy*u)+(vy*v); ix++;
        p1[ix]=z1+(uz*u)+(vz*v); ix++;
        }
    glBegin(GL_TRIANGLE_FAN);
    glVertex3f(x1,y1,z1);
    for (ix=0;ix<n;ix+=3) glVertex3fv(p1+ix);
    glEnd();
    x1=x0+(r*cos(a2));
    y1=y0+(r*sin(a2));
    z1=z0;
    glBegin(GL_TRIANGLE_FAN);
    glVertex3f(x1,y1,z1);
    for (ix=n-3;ix>=0;ix-=3) glVertex3fv(p1+ix);
    glEnd();
    }

这会在 XY 平面上渲染弯曲箭头,中心为 x,y,z,大半径为 rr0 是管半径,r1 是箭头基部半径。因为我没有你的曲线定义,所以我选择 XY 平面中的圆。 a0,a1,a2 是箭头开始 (a0)、箭头开始 (a1) 和结束 (a2) 的角度。 pi2 只是常量 pi2=6.283185307179586476925286766559

我们的想法是记住实际和之前的管段圆点,以便ptab,p0,p1 存在,否则您需要计算所有内容两次。

当我直接选择 XY 平面时,我知道一个基向量是垂直于它的。第二个是垂直于它和箭头方向幸运的是圆形属性提供了它自己,因此在这种情况下不需要叉积。

如果不评论我,希望它足够清楚。

[编辑2]

我需要将它添加到我的引擎中,所以这里是 3D 版本(不仅绑定到轴对齐的箭头,而且圆锥体也弯曲了)。除了基础向量计算之外,它是相同的,我还在标题中稍微改变了角度&lt;a0,a1&gt; 是整个间隔,aa 是箭头大小,但在代码中它被转换为原始约定。我还添加了用于照明计算的法线。我还添加了线性箭头,其中基向量的计算没有利用圆形属性,以防你得到不同的曲线。这里的结果:

//---------------------------------------------------------------------------
const int _glCircleN=50;    // points per circle
//---------------------------------------------------------------------------
void glCircleArrowxy(GLfloat x0,GLfloat y0,GLfloat z0,GLfloat r,GLfloat r0,GLfloat r1,GLfloat a0,GLfloat a1,GLfloat aa)
    {
    double pos[3]={ x0, y0, z0};
    double nor[3]={0.0,0.0,1.0};
    double bin[3]={1.0,0.0,0.0};
    glCircleArrow3D(pos,nor,bin,r,r0,r1,a0,a1,aa);
    }
//---------------------------------------------------------------------------
void glCircleArrowyz(GLfloat x0,GLfloat y0,GLfloat z0,GLfloat r,GLfloat r0,GLfloat r1,GLfloat a0,GLfloat a1,GLfloat aa)
    {
    double pos[3]={ x0, y0, z0};
    double nor[3]={1.0,0.0,0.0};
    double bin[3]={0.0,1.0,0.0};
    glCircleArrow3D(pos,nor,bin,r,r0,r1,a0,a1,aa);
    }
//---------------------------------------------------------------------------
void glCircleArrowxz(GLfloat x0,GLfloat y0,GLfloat z0,GLfloat r,GLfloat r0,GLfloat r1,GLfloat a0,GLfloat a1,GLfloat aa)
    {
    double pos[3]={ x0, y0, z0};
    double nor[3]={0.0,1.0,0.0};
    double bin[3]={0.0,0.0,1.0};
    glCircleArrow3D(pos,nor,bin,r,r0,r1,a0,a1,aa);
    }
//---------------------------------------------------------------------------
void glCircleArrow3D(double *pos,double *nor,double *bin,double r,double r0,double r1,double a0,double a1,double aa)
    {
//  const int _glCircleN=20;    // points per circle
    int e,i,j,N=3*_glCircleN;
    double U[3],V[3],u,v;
    double a,b,da,db=pi2/double(_glCircleN-1),a2,rr;
    double *ptab,*p0,*p1,*n0,*n1,*pp,p[3],q[3],c[3],n[3],tan[3];
    // buffers
    ptab=new double [12*_glCircleN]; if (ptab==NULL) return;
    p0=ptab+(0*_glCircleN);
    n0=ptab+(3*_glCircleN);
    p1=ptab+(6*_glCircleN);
    n1=ptab+(9*_glCircleN);
    // prepare angles
    a2=a1; da=db; aa=fabs(aa);
    if (a0>a1) { da=-da; aa=-aa; }
    a1-=aa;
    // compute missing basis vectors
    vector_copy(U,nor);         // U is normal to arrow plane
    vector_mul(tan,nor,bin);    // tangent is perpendicular to normal and binormal
    // arc interpolation a=<a0,a2>
    for (e=0,j=0,a=a0;e<5;j++,a+=da)
        {
        // end conditions
        if (e==0)   // e=0
            {
            if ((da>0.0)&&(a>=a1)) { a=a1; e++; }
            if ((da<0.0)&&(a<=a1)) { a=a1; e++; }
            rr=r0;
            }
        else{       // e=1,2,3,4
            if ((da>0.0)&&(a>=a2)) { a=a2; e++; }
            if ((da<0.0)&&(a<=a2)) { a=a2; e++; }
            rr=r1*fabs(divide(a-a2,a2-a1));
            }
        // compute actual tube segment center c[3]
        u=r*cos(a);
        v=r*sin(a);
        vector_mul(p,bin,u);
        vector_mul(q,tan,v);
        vector_add(c,p,  q);
        vector_add(c,c,pos);
        // V is unit direction from arrow center to tube segment center
        vector_sub(V,c,pos);
        vector_one(V,V);
        // tube segment interpolation
        for (b=0.0,i=0;i<N;i+=3,b+=db)
            {
            u=cos(b);
            v=sin(b);
            vector_mul(p,U,u);      // normal
            vector_mul(q,V,v);
            vector_add(n1+i,p,q);
            vector_mul(p,n1+i,rr);  // vertex
            vector_add(p1+i,p,c);
            }
        if (e>1)                    // recompute normals for cone
            {
            for (i=3;i<N;i+=3)
                {
                vector_sub(p,p0+i  ,p1+i);
                vector_sub(q,p1+i-3,p1+i);
                vector_mul(p,p,q);
                vector_one(n1+i,p);
                }
            vector_sub(p,p0    ,p1);
            vector_sub(q,p1+N-3,p1);
            vector_mul(p,q,p);
            vector_one(n1,p);
            if (da>0.0) for (i=0;i<N;i+=3) vector_neg(n1+i,n1+i);
            if (e==  3) for (i=0;i<N;i+=3) vector_copy(n0+i,n1+i);
            }
        // render base disc
        if (!j)
            {
            vector_mul(n,U,V);
            glBegin(GL_TRIANGLE_FAN);
            glNormal3dv(n);
            glVertex3dv(c);
            if (da<0.0) for (i=N-3;i>=0;i-=3) glVertex3dv(p1+i);
            else        for (i=  0;i< N;i+=3) glVertex3dv(p1+i);
            glEnd();
            }
        // render tube
        else{
            glBegin(GL_QUAD_STRIP);
            if (da<0.0) for (i=0;i<N;i+=3)
                {
                glNormal3dv(n1+i); glVertex3dv(p1+i);
                glNormal3dv(n0+i); glVertex3dv(p0+i);
                }
            else for (i=0;i<N;i+=3)
                {
                glNormal3dv(n0+i); glVertex3dv(p0+i);
                glNormal3dv(n1+i); glVertex3dv(p1+i);
                }
            glEnd();
            }
        // swap buffers
        pp=p0; p0=p1; p1=pp;
        pp=n0; n0=n1; n1=pp;
        // handle r0 -> r1 edge
        if (e==1) a-=da;
        if ((e==1)||(e==2)||(e==3)) e++;
        }
    // release buffers
    delete[] ptab;
    }
//---------------------------------------------------------------------------
void glLinearArrow3D(double *pos,double *dir,double r0,double r1,double l,double al)
    {
//  const int _glCircleN=20;    // points per circle
    int e,i,N=3*_glCircleN;
    double U[3],V[3],W[3],u,v;
    double a,da=pi2/double(_glCircleN-1),r,t;
    double *ptab,*p0,*p1,*n1,*pp,p[3],q[3],c[3],n[3];
    // buffers
    ptab=new double [9*_glCircleN]; if (ptab==NULL) return;
    p0=ptab+(0*_glCircleN);
    p1=ptab+(3*_glCircleN);
    n1=ptab+(6*_glCircleN);
    // compute basis vectors
    vector_one(W,dir);
    vector_ld(p,1.0,0.0,0.0);
    vector_ld(q,0.0,1.0,0.0);
    vector_ld(n,0.0,0.0,1.0);
    a=fabs(vector_mul(W,p));            pp=p; t=a;
    a=fabs(vector_mul(W,q)); if (t>a) { pp=q; t=a; }
    a=fabs(vector_mul(W,n)); if (t>a) { pp=n; t=a; }
    vector_mul(U,W,pp);
    vector_mul(V,U,W);
    vector_mul(U,V,W);
    for (e=0;e<4;e++)
        {
        // segment center
        if (e==0) { t=0.0;  r= r0; }
        if (e==1) { t=l-al; r= r0; }
        if (e==2) { t=l-al; r= r1; }
        if (e==3) { t=l;    r=0.0; }
        vector_mul(c,W,t);
        vector_add(c,c,pos);
        // tube segment interpolation
        for (a=0.0,i=0;i<N;i+=3,a+=da)
            {
            u=cos(a);
            v=sin(a);
            vector_mul(p,U,u);      // normal
            vector_mul(q,V,v);
            vector_add(n1+i,p,q);
            vector_mul(p,n1+i,r);   // vertex
            vector_add(p1+i,p,c);
            }
        if (e>2)                    // recompute normals for cone
            {
            for (i=3;i<N;i+=3)
                {
                vector_sub(p,p0+i  ,p1+i);
                vector_sub(q,p1+i-3,p1+i);
                vector_mul(p,p,q);
                vector_one(n1+i,p);
                }
            vector_sub(p,p0    ,p1);
            vector_sub(q,p1+N-3,p1);
            vector_mul(p,q,p);
            vector_one(n1,p);
            }
        // render base disc
        if (!e)
            {
            vector_neg(n,W);
            glBegin(GL_TRIANGLE_FAN);
            glNormal3dv(n);
            glVertex3dv(c);
            for (i=0;i<N;i+=3) glVertex3dv(p1+i);
            glEnd();
            }
        // render tube
        else{
            glBegin(GL_QUAD_STRIP);
            for (i=0;i<N;i+=3)
                {
                glNormal3dv(n1+i);
                glVertex3dv(p0+i);
                glVertex3dv(p1+i);
                }
            glEnd();
            }
        // swap buffers
        pp=p0; p0=p1; p1=pp;
        }
    // release buffers
    delete[] ptab;
    }
//---------------------------------------------------------------------------

用法:

glColor3f(0.5,0.5,0.5);

glCircleArrowyz(+3.5,0.0,0.0,0.5,0.1,0.2,0.0*deg,+270.0*deg,45.0*deg);

glCircleArrowyz(-3.5,0.0,0.0,0.5,0.1,0.2,0.0*deg,-270.0*deg,45.0*deg);
glCircleArrowxz(0.0,+3.5,0.0,0.5,0.1,0.2,0.0*deg,+270.0*deg,45.0*deg);
glCircleArrowxz(0.0,-3.5,0.0,0.5,0.1,0.2,0.0*deg,-270.0*deg,45.0*deg);
glCircleArrowxy(0.0,0.0,+3.5,0.5,0.1,0.2,0.0*deg,+270.0*deg,45.0*deg);
glCircleArrowxy(0.0,0.0,-3.5,0.5,0.1,0.2,0.0*deg,-270.0*deg,45.0*deg);
glColor3f(0.2,0.2,0.2);
glLinearArrow3D(vector_ld(+2.0,0.0,0.0),vector_ld(+1.0,0.0,0.0),0.1,0.2,2.0,0.5);
glLinearArrow3D(vector_ld(-2.0,0.0,0.0),vector_ld(-1.0,0.0,0.0),0.1,0.2,2.0,0.5);
glLinearArrow3D(vector_ld(0.0,+2.0,0.0),vector_ld(0.0,+1.0,0.0),0.1,0.2,2.0,0.5);
glLinearArrow3D(vector_ld(0.0,-2.0,0.0),vector_ld(0.0,-1.0,0.0),0.1,0.2,2.0,0.5);
glLinearArrow3D(vector_ld(0.0,0.0,+2.0),vector_ld(0.0,0.0,+1.0),0.1,0.2,2.0,0.5);
glLinearArrow3D(vector_ld(0.0,0.0,-2.0),vector_ld(0.0,0.0,-1.0),0.1,0.2,2.0,0.5);

和箭头的概述(在图像的右侧):

我正在使用我的矢量库,所以这里有一些解释:


vector_mul(a[3],b[3],c[3]) 是叉积 a = b x c
vector_mul(a[3],b[3],c) 是标量 a = b.c 的简单乘法
a = vector_mul(b[3],c[3]) 是点积 a = (b.c)
vector_one(a[3],b[3]) 是单位向量 a = b/|b|
vector_copy(a[3],b[3]) 只是复制a = b
vector_add(a[3],b[3],c[3]) 正在添加a = b + c
vector_sub(a[3],b[3],c[3]) 正在减去 a = b - c
vector_neg(a[3],b[3]) 是否定的a = -b
vector_ld(a[3],x,y,z) 正在加载 a = (x,y,z)

pos 是圆箭头的中心位置,nor 是箭头所在平面的法线。 bin 是双法线,角度从这个轴开始。应该垂直于norr,r0,r1 是箭头的半径(弯、管、锥)

线性箭头类似,dir 是箭头方向,l 是箭头大小,al 是箭头大小。

【讨论】:

  • 您对数学的解释非常透彻,但所要求的是如何实现这一点的程序化解释。例如,如何使用three.js 找到单位向量vu
  • @MattVS 添加 GL 示例
猜你喜欢
  • 2018-03-07
  • 2017-02-01
  • 1970-01-01
  • 2012-02-20
  • 1970-01-01
  • 1970-01-01
  • 2013-02-25
  • 2019-08-05
  • 1970-01-01
相关资源
最近更新 更多