2016-09-23 66 views
5

Próbuję utworzyć zakrzywioną strzałkę 3D w pliku three.js. Aby wykonać to zadanie, utworzyłem Tube, który podąża za zakrzywioną ścieżką i Cylinder w kształcie stożka (ustawiając promień Top jako mały). obecnie wyglądają tak:Zastosuj obrót do cylindra na podstawie końcówki rury Normalny

2D

3D

Ja próbuje ustawić strzałką (Cylinder w kształcie stożka) na końcu rury tak: (Photoshopped)

arrow mockup

Nie jestem strasznie silny w matematyce i całkiem nowy dla three.js. Czy ktoś mógłby mi pomóc zrozumieć, jak połączyć te dwa?

Tu jest mój bieżący kod:

 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? 

bym bardzo wdzięczny jeśli ktoś mógłby próbować proste wyjaśnienie tego, co jest konieczne matematycznie i programowo wykonać

  • Znalezienie normalny usytuowany na końcu rurka
  • Przesuwanie stożka w prawidłową lokalizację

Każda pomoc jest doceniana!

+0

dodano edit1,2 do mojej odpowiedzi – Spektre

Odpowiedz

1

Nie używaj do tego celu, jeśli możesz utworzyć grot bezpośrednio na miejscu. Podobnie zginaną rurę można zrobić w ten sposób. Jedyne, czego potrzebujesz, to ostatni segment linii zdefiniowany przez punkty końcowe A,B.

Niech ostry jest punkt A i B centrum podstawy dysku. Aby utworzyć grot strzałki, potrzebujesz 2 dodatkowych bazowych wektorów, pozwalających nazwać je U,V i promień r z płyty bazowej. Od nich można tworzyć punkty tarczowe z prostego okręgu wzoru tak:

arrow head

  1. uzyskać AB punkty końcowe

  2. obliczeniowych U,V bazowych wektorów

    U,V powinny leżeć w bazie dysków grot i powinien być oklepany do siebie nawzajem.Kierunek grotu (linia |BA|) jest podstawa płyty normalne, więc wykorzystać przekrój produktu, który zwraca wektor prostopadły do ​​pomnożonych te sposób:

    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. tworzą/renderowanie geometrii grot

    który jest łatwy kabiny A,B są centrami wentylatora trójkąta (potrzeba 2) a punkty podstawy płyty są obliczane następująco:

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

    Więc pętli ang przez cały krąg z pewnym krokiem, aby zdobyć wystarczającą ilość punktów (zwykle 36 jest wystarczającą) i wykonać oba trójkątne wentylatory. Nie zapominaj, że ostatni punkt na dysku musi być taki sam jak pierwszy, w przeciwnym razie pojawi się brzydkie wrażenie lub dziura na ang = 0 lub stopni.

Jeśli nadal chcesz wybrać rotacje, możesz to zrobić w ten sposób. obliczyć U,V,W w taki sam sposób jak powyżej i skonstruować z nich macierz transformacji. początkiem O będzie punkt B i osi X,Y,Z będzie kolejność zależy od modelu grot strzałki. W powinien być zgodny z osią modelu. U,V może być w dowolnej kolejności. Więc po prostu skopiuj wszystkie wektory do swoich miejsc i użyj tej macierzy do renderowania. Aby uzyskać więcej informacji zobacz:

[Uwagi]

Jeśli nie wiesz jak obliczyć operacje wektorowe typu produktów krzyż/kropka lub wartości bezwzględnej patrz:

// 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)) 

[Edytuj1] prosta implementacja GL

I NIE kod w swoim środowisku, ale jak downvote i komentarzu sugerują, faceci nie są w stanie umieścić to razem na własną rękę, co jest dziwne biorąc pod uwagę, że masz tak daleko więc o proste C++/GL exmaple sposobu zrobić (można tego portu do środowiska):

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

czyni wygiętą strzałkę w płaszczyźnie XY z centrum x,y,z i dużym promieniu r. r0 ma promień rury, a r1 jest promieniem podstawy grota. Ponieważ nie mam twojej definicji krzywej, wybieram okrąg w płaszczyźnie XY. a0,a1,a2 to kąty, w których rozpoczyna się strzała (a0), rozpoczyna się grot strzałki (a1) i kończy (a2). pi2 jest po prostu stały pi2=6.283185307179586476925286766559.

Pomysł polega na zapamiętywaniu rzeczywistych i poprzednich punktów koła segmentu rurowego, tak aby w przypadku ptab,p0,p1 trzeba było obliczać wszystko dwa razy.

Ponieważ wybrałem samolot XY bezpośrednio, wiem, że jeden wektor bazowy jest dla niego normalny.i drugi jest prostopadły do ​​niego, a do kierunku strzałki, aby szczęśliwie krążyć to samo, dlatego nie ma potrzeby stosowania produktów krzyżowych w tym przypadku.

Mam nadzieję, że jest wystarczająco jasne, jeśli nie komentuje mnie.

[Edit2]

Musiałem dodać to do mojego silnika tak tutaj jest wersja 3D (nie związany tylko na oś wyrównane strzały i stożek jest wygięty zbyt). To jest to samo, poza obliczaniem wektora bazowego i zmieniam również kąty trochę w nagłówku <a0,a1> jest cały przedział i aa jest wielkości grota strzałki, ale później w kodzie jest konwertowany do oryginalnej konwencji. Dodałem również normalne dla obliczeń oświetlenia. Dodałem również liniową strzałkę, w której obliczenia wektorów bazowych nie wykorzystują właściwości koła w przypadku, gdy masz inną krzywą. Oto wyniki:

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

Wykorzystanie:

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

i przegląd arows (po prawej stronie obrazu):

arrows

używam mojego Wektor lib więc tutaj są niektóre wyjaśnienia:


vector_mul(a[3],b[3],c[3]) jest iloczynem a = b x c
vector_mul(a[3],b[3],c) jest proste mnożenie przez skalarne a = b.c
a = vector_mul(b[3],c[3]) jest kropka produkt a = (b.c)
vector_one(a[3],b[3]) jest wektor jednostkowy a = b/|b|
vector_copy(a[3],b[3]) jest skopiuj a = b
vector_add(a[3],b[3],c[3]) dodaje a = b + c
vector_sub(a[3],b[3],c[3]) się odejmując a = b - c
vector_neg(a[3],b[3]) to jest negacja a = -b
vector_ld(a[3],x,y,z) jest tylko ładowanie a = (x,y,z)

pos jest pozycja centrum kręgu strzałki i nor jest normalne płaszczyzny w którym znajduje się strzałka. bin jest binarny i kąty zaczynają się od tej osi. powinien być prostopadły do ​​nor. r,r0,r1 są promienie strzałki (wyginać, rurka, stożek)

strzałka liniowy podobne The dir jest w kierunku wskazanym strzałką l jest wielkość strzałki i al jest grot wielkości.

+0

Twoje wyjaśnienie matematyki jest bardzo dokładne, ale to, o co prosiło, to programowe wyjaśnienie, jak to wdrożyć. Na przykład, w jaki sposób można byłoby znaleźć wektory jednostek "v" i "u" przy użyciu pliku three.js? –

+0

@MattVS dodał przykład GL – Spektre