# ExtrudeGeometry displays different aspects in different paths

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
``````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);

``````
1. a straight path on y-axis

just changed points to

``````const points = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 0, 100),
];
``````
1. curved path
``````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),
];
``````

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:

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()`.

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

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);
}
``````