Question

我用三个j绘制一个CubicBezierCurve3曲线。但是，我希望它能够通过稳定的过渡逐个绘制，而不是一次绘制整个曲线。您可以将其视为移动的火箭，留下气路。

我的想法是以下

找到构成CubicBezierCurve3的所有点，并保存在名为“allpoints”的变量中。假设我们在CubicBezierCurve3中找到了正好50个点，如下所示

    #include <stdio.h>
#include <stdlib.h>


typedef struct Stack {
    struct Stack *next;
    int data;
} Stack;

Stack* push(Stack*head, int d) {   //add a datapoint to the top of the stack
    Stack *temp;
    temp=malloc(sizeof(Stack));
    temp->data=d;
    temp->next=head;

    return temp;
}


Stack* pop(Stack*head) {      //read the top data point, and delete it
    Stack* newHead=head->next;
    printf("%i", head->data );
    free(head);
    return newHead;
}

int peek(Stack*head) {   // return the top datapoint, without delete
    return head->data;
}

void isempty(Stack*head) {     
    if (head==NULL) {
        printf("Stack empty");
    }

    printf("Stack has data");
}

void print(Stack*head) {    //print complete Stack
    Stack* cursor;
    cursor=head;

    while (cursor!=NULL) {
        printf("%i", cursor->data);
    }
}
int main(int argc, const char * argv[]) {
    Stack* head;
    head=malloc(sizeof(Stack));
    head=NULL;
    head=push(head, 4);
    head=push(head, 2);
    head=push(head, 1);
    printf("%i", peek(head));
    print(head);
    head=pop(head);
    print(head);
    isempty(head);
    head=pop(head);
    head=pop(head);
    isempty(head);


    return 0;
}

在每次迭代中，绘制10个点，这意味着

迭代0：绘制点0到9迭代1：绘制点10到19 迭代2：绘制点20到29迭代3：绘制点30到 39迭代4：绘制点40到49

此函数负责在每次迭代时绘制10个点，因为我们有50个点，所以我们可以在第5次迭代结束时调用cancelAnimationFrame。该函数包含一些解决方法，以处理时间。（仅在每10次迭代后，我绘制10点序列，否则，转换将太快，我们将无法弄清楚差）

var curve = new THREE.CubicBezierCurve3(
        new THREE.Vector3( -5, 0, 20 ),
        new THREE.Vector3(0, 15, 0 ),
        new THREE.Vector3(0, 15, 0 ),
        new THREE.Vector3( 2, 0, -10 )
);

geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints( 50 );
allpoints = geometry.vertices;

JS Fiddles

以下是我尝试过的平滑过渡的JS Fiddle
以下是CubicBezierCurve3中所有点的JS Fiddle

我的问题是，有没有更好的方法/ API来实现这一目标？此外，我想在关闭之前给点积分一点延迟，就像LED如何下降而不是突然变得不可见。实际上，它甚至不必通过使用单个点来完成，正如我所尝试的那样，我正在寻找任何可以逐渐绘制给定的三次贝塞尔曲线的部分。

Answer 1

也许您应该考虑使用粒子系统 the THREE.GPUParticleSystem plugin ，如this example所示。

它已经让我想起了火箭的＆＃34;气体轨迹＆＃34; ......

样条曲线在三个js中稳定过渡

1 个答案: