How to draw the auxiliary line of the official curve example project?

Help & Support
1

https://playcanvas.com/editor/scene/476092

I want to draw a line, like this

2

For the line rendering, you can use code from the following sample project:

https://playcanvas.com/project/500630/overview/bezier

Now to draw both the curve and the auxiliary line, I am not sure the curve object provides all the necessary info. In any case you may need some math to iterate and draw both lines from point to point, here your internet is your best friend. This isn’t Playcanvas related but any Javascript or related solution would do.

4

I know how to render lines, just connect all points, but the sample project does not return points, how can I draw this guide line?

5

Ok, so from what I see from the sample project you have a list of the start/end points of each leg of the animation:

image

The update method of the CameraPath script provides you also with an example on how to get the point on each animation frame:

    // Work out how far we are in time we have progressed along the path
    var percent = this.time / this.duration;
    
    // Get the interpolated values for the position from the curves     
    this.entity.setPosition(this.px.value(percent), this.py.value(percent), this.pz.value(percent));

You could run the same method on initialize time and for specific intervals (e.g. 10%, 20%, 30% of the total duration) and get points along the camera path, as many as you like, to draw lines.

Those would be points to draw the curves. For the auxiliary lines you will need also the center/gravity point for the bezier curve. The bezier.js library might have something for that as well.

6

不明觉厉 :grinning: