2016-09-23 242 views
5

我正在嘗試在three.js中製作一個彎曲的3D箭頭。爲了完成這個任務,我創建了一個Tube,它遵循一條曲線路徑和一個形如圓錐體的圓形(通過將radiusTop設置爲很小)。目前,他們看起來像這樣:將旋轉應用到基於管終止的圓柱正常

2D

3D

我試圖定位箭頭(圓筒形如錐)在管的末端像這樣:(Photoshop處理)

arrow mockup

我在數學上不是很強大,對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? 

我將不勝感激,如果有人可以嘗試的東西是必要的數學上一個簡單的解釋和編程實現

  • 尋找正常的位於結束管
  • 將圓錐移位到正確位置

任何幫助表示讚賞!

+0

在我的回答中增加了edit1.2 – Spektre

回答

1

當您可以直接在適當的位置創建箭頭時,請不要使用旋轉。同樣,彎曲管也可以這樣做。只有你需要的是由A,B端點定義的最後一行。

A爲銳點,B爲光盤基座中心。要創建箭頭,您需要2個額外的基本矢量,請將它們稱爲基礎光盤的U,V和半徑r。從他們身上,你可以用簡單的圓式創建光盤點是這樣的:

arrow head

  1. 獲得AB端點

  2. 計算U,V基向量

    U,V應該說謊在箭頭的光盤基地,應該是perpe彼此相連。箭頭(線|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 deg。

如果你仍然想旋轉,那麼這是可行的。按照與上述相同的方式計算U,V,W並從它們構建變換矩陣。原點O將點B和軸X,Y,ZU,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)) 

[編輯1]簡單的GL實現

我不代碼在你的環境,但作爲downvote和評論建議你們不能把這個一起在自己這是奇怪的考慮,你走到這一步所以這裏簡單C++/GL〔實施例如何做到這一點(您可以將此端口連接到環境):

overview

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平面,所以我知道一個基矢量是正常的。其次是垂直於它和箭頭的方向幸運的是,圓形屬性自己提供了這一點,因此在這種情況下不需要交叉產品。

希望很明顯,如果不評論我。

[EDIT2]

我需要把它添加到我的引擎,所以這裏是3D版(不綁定只是爲了軸對準箭頭和圓錐彎曲太)。除了基矢量計算以外,它也是一樣的,我也在頭<a0,a1>中改變了角度,整個區間和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); 

和arows概述(圖像的右側):

arrows

我用我的矢量lib以使此處是一些解釋:


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是箭頭大小。

+0

您對數學的解釋非常全面,但要求提供的是如何實現這一功能的程序化解釋。例如,如何使用three.js找到單位向量'v'和'u'? –

+0

@MattVS增加了GL的例子 – Spektre