3

薄い長方形の立方体を と でコイル状に変形させようthree.jsとしましたtween.js。すでに尋ねられた質問を検索しましたが、どれも私を導きません。

どのモーフ機能を使用すればよいですか? また、コイル形状を作成するにはどうすればよいですか?

キューブからコイルへ

4

1 に答える 1

0

  1. チューブをNスライスのセットとして保存する

    各（円）スライスの中心点と法線ベクトルが必要です。

    const int N=128;
struct slice { float p[3],n[3]; };
slice mesh[N];

    開始時にチューブに初期化します（y軸に整列）

    for (int i=0;i<N;i++)
 {
 mesh[i].p[0]= 0.0;
 mesh[i].p[1]=-1.0+2.0*float(i)/float(N-1);
 mesh[i].p[2]= 0.0;
 mesh[i].n[0]= 0.0;
 mesh[i].n[1]=+1.0;
 mesh[i].n[2]= 0.0;
 }

  2. そのようなメッシュ表現の可視化コードを書く

    各スライスの円周ポイントを取得し、それらを QUAD_STRIP またはチューブ サーフェスに使用しているプリミティブと結合する必要があります。上と下は、中心点を中心に TRIANGLE_FAN で最適です。

    必要に応じてそれらを保存/使用する代わりに、C ++で私のglCircle3Dを使用してポイントを取得できます...

  3. チューブとらせんの間を補間する

    上記が機能している場合は、中心位置と法線を可変半径rと固定ネジでらせんに変えることができますm。だから私は試してみます：

    float a=6.283185307179586476925286766559*float(i*m)/float(N-1);
mesh[i].p[0] = r*cos(a);
mesh[i].p[2] = r*sin(a);

    法線も同様に計算できますが、今はテストする時間がなく、想像力があまり優れていないので、代わりに次のようにします。

    mesh[i].n[0] = mesh[i].p[0] - mesh[i-1].p[0];
mesh[i].n[1] = mesh[i].p[1] - mesh[i-1].p[1]; 
mesh[i].n[2] = mesh[i].p[2] - mesh[i-1].p[2];
normalize(mesh[i].n); // set to unit vector

    法線をスライス 1 からスライス 0 にコピーするだけで問題ありません。

  4. アニメーション化

    rゼロからいくつかに変更してメッシュをアニメーション化するだけRです。継続的な効果が必要な場合は、いくつかのステップで増加しているr=R*sin(t)場所を行うことができます...t

[edit1] C++ OpenGL の例

上記をすべてまとめると、次のようになります。

//---------------------------------------------------------------------------
//         height  ,tube r  ,screw r ,screws
void helix(double h,double r,double R,double N)
    {
    int i,j,na;
    double pos[3]={ 0.0,0.0,0.0 },x[3],y[3],
           nor[3]={ 0.0,1.0,0.0 },ss,dy,a,da,b,db;
    na=double(N*36.0);              // 36 slices per screw
    const int nb=36+1;              // 36 points per circle slice
    dy=h/double(na);                // y axis step
    da=2.0*M_PI*N/double(na);       // screw angle step
    db=2.0*M_PI/double(nb-1);       // slice circle angle step
    ss=1.0/sqrt((R*R)+(dy*dy));     // normalization scale
    double pnt[nb*12],*p0=pnt,*p1=pnt+(nb*6),*pp;   // 2 slice point buffers (normal3d+vertex3d)*nb*2 = 12*nb
    for (a=0.0,i=0;i<na;i++,a+=da)
        {
        if (a>2.0*M_PI) a-=2.0*M_PI;
        // slice center
        pos[0]=R*cos(a);
        pos[1]+=dy;
        pos[2]=R*sin(a);
        // slice normal
        nor[0]=-ss*R*sin(a);
        nor[1]=+ss*dy;
        nor[2]=+ss*R*cos(a);
        // slice basis vectors x,y
        x[0]=cos(a);
        x[1]=0.0;
        x[2]=sin(a);
        // y = cross(x,nor)
        y[0]=             -(x[2]*nor[1]);
        y[1]=(x[2]*nor[0])-(x[0]*nor[2]);
        y[2]=(x[0]*nor[1]);
        // get the slice points (remember 2 slices for QUAD STRIP) to actual point buffer p1
        for (pp=p1,b=0.0,j=0;j<nb;j++,b+=db,pp+=6)
            {
            // normal
            pp[0]=(x[0]*cos(b))+(y[0]*sin(b));
            pp[1]=(x[1]*cos(b))+(y[1]*sin(b));
            pp[2]=(x[2]*cos(b))+(y[2]*sin(b));
            // position
            pp[3]=pos[0]+(pp[0]*r);
            pp[4]=pos[1]+(pp[1]*r);
            pp[5]=pos[2]+(pp[2]*r);
            }
        // if 2 slices done render the slice between last slice p0 and actual slice p1
        glBegin(GL_QUAD_STRIP);
        if (i) for (j=0;j<6*nb;j+=6)
            {
            glNormal3dv(p0+j+0);
            glVertex3dv(p0+j+3);
            glNormal3dv(p1+j+0);
            glVertex3dv(p1+j+3);
            }
        glEnd();
        // swap last,actual slice point buffers p0 <-> p1
        pp=p0; p0=p1; p1=pp;
        }
    }
//---------------------------------------------------------------------------

OpenGL でらせんをレンダリングします。それはどこから(0,0,0)始まり、(0,h,0)どこで終わりますか：

  • rはチューブの半径です
  • Rはねじの半径です
  • hはらせんの高さ/サイズです
  • Nはネジの数ですh

ライティングを使用できるように、頂点と法線の情報を生成します。アニメーションにはこれを使用します：

static double t=0.0; t+=0.1; if (t>=pi2) t-=pi2;
double R=sin(t); if (R<0.0) R=0.0;
glColor3f(1.0,1.0,1.0); helix(1.0,0.05,0.3*R,6.0);

ご覧のとおり、正弦波の半分は無視されているため、ネジなしでチューブを実際に見ることができます. ここで照明付きの出力：

ヘリックス

左側はネジを外したチューブ ( R=0) です。右側は完全にモーフィングされたネジで、真ん中はその中間です。

PSモーフをより興味深いものにしたい場合は、Nパラメーター0を何らかの定数にアニメーション化することもできます。

于 2016-01-28T08:07:47.393 に答える