ExtrudeGeometry displays different aspects in different paths

Questions
1

I’m trying to create ExtrudeGeometry with Shape and CatmullRomCurve3,but aspect of ExtrudeGeometry will be rotate 90deg if the CatmullRomCurve3 is not a straight path on x-axis.

So how can i make the aspect not be rotated with different kinds of paths?

  1. a straight path on x-axis
    image
const shape = new THREE.Shape();
shape.moveTo(-5, 5);
shape.lineTo(5, 5);
shape.lineTo(10, -5);
shape.lineTo(-10, -5);
shape.lineTo(-5, 5);

const points = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(100, 0, 0),
];
const path = new THREE.CatmullRomCurve3(points);

const geo = new THREE.ExtrudeGeometry(shape, {
extrudePath: path,
steps: 1000,
bevelEnabled: false,
});

const mat = new THREE.MeshPhongMaterial({ color: 0x00ffff });
const mesh = new THREE.Mesh(geo, mat);

scene.add(mesh);
  1. a straight path on y-axis
    image

just changed points to

const points = [
	new THREE.Vector3(0, 0, 0),
	new THREE.Vector3(0, 0, 100),
];
  1. curved path
    image
const points = [
	new THREE.Vector3(0, 0, 0),
	new THREE.Vector3(20, 0, 10),
	new THREE.Vector3(40, 0, 15),
	new THREE.Vector3(60, 0, 25),
	new THREE.Vector3(80, 0, 40),
	new THREE.Vector3(100, 0, 60),
];
2

I think the mentioned rotation is a side effect of the technique (frenet frames) that is used to create vertices along an arbitrary curve. To fix this, you can apply an additional rotation after the geometry has been generated. E.g. transforming the geometry of the second screenshot via geo.rotateZ( Math.PI * 0.5 ); fixes the issue:

Live example: three.js dev template - module - JSFiddle - Code Playground

However, this gets more complicated for more complex transformation like with the third points set. You could try it with the Object3D API with methods like rotateOnWorldAxis().

3

Thank you for the above solution.Well, it solved my problem in another way.

4

But sometimes i don’t want to change any property of geometry or mesh. In this situation, i rotated the shape of ExtrudeGeometry.

const rotateShape = (shape) => {
    const center = new THREE.Vector2(0, 0);
    const rad = 90 / 180 * Math.PI;
    const points = shape.getPoints().map((v) => v.rotateAround(center, rad));
    return new THREE.Shape(points);
}