I'm writing a scene with meshes generated with ExtrudeGeometry from different shapes extruded along a SplineCurve3 used as extrudePath in ExtrudeGeometry's settings.
For now, to do that, I split the spline in many segments, but there is a problem, as you can see in the attached picture:
I want the starting point of second mesh (star) to be perpendicular to the end point of previous mesh (circle).
Here my jsfiddle.
Now as you can see in the picture and in the demo, the star does not start perpendicular to circle shape.
I found this topic, which seems to describe the same situation, and I read these answers: one, two.
So, probably, reading the last second link, I need to know the angle between tangent and up-vector (= Y) at level of the last point on spline_1, and apply that angle for a rotation on binormal of shape used with spline_2, before extrude it, and perhaps for this I need to use the "frames" option in ExtrudeGeometry... but I have not found any example about how to pass binormal vector in frames option... I found instead this page to understand how calculate tangents and binormals, to fill my knowledge; in my case, I need to align the shape (star) in the first frame of spline_2 with the shape (circle) in the last frame of spline_1; so, probably I need to know the angle between the tangent and the up-vector on last point of spline_1, and apply that angle for a rotation on binormal of first frame of spline_2... so I tried to add the follow before add meshes to the scene:
var tangent, axis, up, radians;
var t = 1; // last point of spline_1
tangent = spline_1.getTangent( t ).normalize(); // tangent unit on last point of spline_1, which I need to pass as tangent for the first point of spline_2
up = new THREE.Vector3(0,1,0); // set up-vector equal to Y axis
radians = Math.acos( up.dot( tangent ) ); // angle between up-vector and tangent in last point of spline_1, to be applied on binormal of spline_2 at its first frame
axis = new THREE.Vector3(); // create a new vector for binormal (= rotation axis)
axis.crossVectors( up, tangent ).normalize(); // binormal equal to cross product between up and tangent vectors of spline_1, which I need to pass as binormal for the first point of spline_2
but now how to rotate only the first frame of spline_2, instead of apply rotation to all the extruded star mesh?... Maybe using frames option in ExtrudeGeometry?
As alternative approach, is then possible to use segments of a unique spline to extrude different shapes (avoiding probably the above problem), as @WestLangley suggested? For example, following this topic, I tried to use "t" as reference to set position on a unique spline, but without success; consider:
// Catmull-Rom spline (SplineCurve3)
// t = (point number) / (number of points - 1)
var spline = new THREE.SplineCurve3([
new THREE.Vector3(7.67, 279.32, 904.50), // t = 0
new THREE.Vector3(21.48, 265.57, 937.23), // t = 1/23
new THREE.Vector3(57.94, 254.71, 934.70), // t = 2/23
new THREE.Vector3(49.16, 217.44, 935.41), // t = 3/23
new THREE.Vector3(28.10, 221.71, 903.81), // t = 4/23
new THREE.Vector3(51.95, 247.45, 888.89), // t = 5/23
new THREE.Vector3(71.82, 240.66, 857.35), // t = 6/23
new THREE.Vector3(100.53, 261.25, 871.66), // t = 7/23
new THREE.Vector3(107.88, 249.14, 907.15), // t = 8/23
new THREE.Vector3(138.08, 227.01, 908.38), // t = 9/23
new THREE.Vector3(155.60, 208.83, 937.33), // t = 10/23
new THREE.Vector3(186.68, 228.31, 947.35), // t = 11/23
new THREE.Vector3(206.93, 195.57, 943.90), // t = 12/23
new THREE.Vector3(203.43, 198.27, 906.12), // t = 13/23
new THREE.Vector3(227.68, 227.35, 907.16), // t = 14/23
new THREE.Vector3(264.72, 231.83, 910.87), // t = 15/23
new THREE.Vector3(277.70, 267.24, 914.58), // t = 16/23
new THREE.Vector3(312.24, 269.76, 898.61), // t = 17/23
new THREE.Vector3(323.17, 305.65, 893.96), // t = 18/23
new THREE.Vector3(310.66, 337.84, 909.49), // t = 19/23
new THREE.Vector3(307.87, 363.10, 881.36), // t = 20/23
new THREE.Vector3(293.54, 391.54, 901.52), // t = 21/23
new THREE.Vector3(284.14, 402.13, 936.36), // t = 22/23
new THREE.Vector3(265.69, 431.90, 950.82) // t = 23/23 = 1
]);
for( var t = 0; t < 0.5; t++) {
var spline_1 = spline.getPoints(t); // to be used as extrudePath with shape_1 for ExtrudeGeometry
}
for( var t = 0.5; t <= 1; t++) {
var spline_2 = spline.getPoints(t); // to be used as extrudePath with shape_2 for ExtrudeGeometry
}
But it's not good.
I ask you a help to solve this issue...
I'm happy to start understanding and merging all found sources, but there is not an improvement. I would be happy for your help.
Many thanks in advance,
Greetings,
Riccardo
# EDIT 1
Found the way to split a unique spline in segments, and apply them as extrudePath for each shape, but I obtain the same result:
