Threejs corrugated iron - three.js

Question

Imagine a sheet of corrugated iron. This has a length and width. Across the width, its basically lots of fairly tight curves. A curve repeats every couple of inches for the fill width of the sheet. To represent this in threejs I have created a shape which is a lot of Bezier curves. Basically the following is repeated until I have the desired width:
shape.bezierCurveTo(start + adjustment, curveHeight, start + curveWidth - adjustment, curveHeight, start + curveWidth, 0);
shape.bezierCurveTo(start + curveWidth + adjustment, -curveHeight, start + 2 * curveWidth - adjustment, -curveHeight, start + 2 * curveWidth, 0);
I then use ExtrudeGeometry to create a geometry:
var extrudeSettings = {
steps: 1,
amount: this.length,
bevelEnabled: false,
bevelThickness: 0,
bevelSize: 0,
bevelSegments: 0
};
let wallGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
But its slow. It obviously generates a lot of points. It's a very smooth curve though. Is there a setting I can use to reduce the points it uses in the curve to make it less smooth? That would reduce the overall number of triangles and speed things up.
The only other alternative I can think of is to use a texture which looks like the light/shadow of the curves. The problem with this is that it will only look good at one angle. As I rotate my structure the light/shadow won't change. When I use the ExtrudeGeometry it has the correct shadows and it looks beautiful.
What is interesting is that once the structure is fully drawn I can rotate and zoom in/out and it all works well. So it's obviously the number of points it has to work with initially that is causing the problem.
Any suggestions on how to speed up?

Answer 1

Besides of using curveSegments of extrudeSettings, you can deform a thin box geometry:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 5);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, .5));
var geom = new THREE.BoxGeometry(5, 5, .125, 50, 1, 1);
geom.vertices.forEach(function(v){
v.z += Math.sin(v.x * Math.PI * 2) * .125;
});
geom.computeFaceNormals();
geom.computeVertexNormals();
var corrugated = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({color: "silver"}));
scene.add(corrugated);
render();
function render(){
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
Or use the solution from 2pha.