Hey can anyone tell me if I can draw a Line curve similar to Euler Spiral curve.
Not sure this is what you are looking for but one way to render such a curve is to transform the respective formula into a parametric curve. You can then sample the curve to create an array of points which can be used to create the geometry for a line. Or you pass the curve into TubeGeometry
in order to generate a geometry with a spatial expansion. Check out the following example to see this approach in action:
https://threejs.org/examples/webgl_geometry_extrude_splines
You should study how the parametric curves are actually implemented. The following file contains a bunch of classes derived from THREE.Curve
. The method Curve. getPoint()
performs the sampling, the parameter t
is a value between 0 and 1 defining at what place on the curve the sampling occurs.
There’s actually JavaScript code on the wiki page:
function drawEulerSpiral(canvas, T, N, scale) {
ctx = canvas.getContext("2d");
var dx, dy, t=0, prev = {x:0, y:0}, current;
var dt = T/N;
ctx.beginPath();
while (N--) {
dx = Math.cos(t*t) * dt;
dy = Math.sin(t*t) * dt;
t += dt;
current = {
x: prev.x + dx,
y: prev.y + dy
};
ctx.lineTo(current.x*scale, current.y*scale);
prev = current;
}
ctx.stroke();
}
drawEulerSpiral(document.getElementById("myCanvas"),10,10000,100)
Should be easy enough to adapt it for use with curve.getPoint
That one will accumulate errors over the steps, though. The examples in Wikipedia are a mix of methods of different accuracy.