I am new to three.js and looking to extrude a shape vertically. I have successfully set the points for my 2D shape, but the extrusion is happening along the z-axis instead of the y-axis. Is there a simple way to achieve vertical extrusion without resorting to rotations or using a box geometry as a workaround for more complex shapes?
I've attempted rotating the mesh after extrusion, but it complicates calculating object positions within the extruded shape. Keeping it straightforward, I'm seeking a solution like the one shown here:
https://i.sstatic.net/JfkrO.png
Here's my current code snippet:
export function createStorageLocation(storageLocation: StorageLocation) {
const shape = new Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 200 / 100);
shape.lineTo(400 / 100, 200 / 100);
shape.lineTo(400 / 100, 0);
shape.lineTo(0, 0);
const extrudeSettings: ExtrudeGeometryOptions = {
steps: 2,
depth: 10,
bevelEnabled: false,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1,
};
const geometry = new ExtrudeGeometry(shape, extrudeSettings);
const material = new MeshStandardMaterial({
color: 'blue',
opacity: 0.7,
transparent: false,
});
const location = new Mesh(geometry, material);
const axesHelper = new AxesHelper(5);
location.add(axesHelper);
location.position.set(
storageLocation.startPoint.x / 100,
storageLocation.startPoint.y / 100,
storageLocation.startPoint.z / 100
);
return location;
}
Current state of the application: https://i.sstatic.net/Ns668.png