I have been working on developing a 3D tool and was in need of a zigzag structure. I managed to create it by iterating a function that produces 'V' multiple times, but now I am looking for a way to achieve the same effect using a single geometry and mesh.
function modelShape(points){
this.shape = new THREE.Shape();
this.shape.moveTo(points[0][0], points[0][1]);
for(var i=1; i<points.length; i++){
this.shape.lineTo(points[i][0], points[i][1]);
}
this.shape.lineTo(points[0][0], points[0][1]);
}
function structure(i){
points = [
[-1.5,0],
[-1.5,.5],
[0,3.5],
[1.5,.5],
[1.5,0],
[0,3]
];
modelShape.call(this, points);
var extrudeSettings = { amount: .25, bevelEnabled: true, bevelSegments: 0, steps: 1, bevelSize: 0, bevelThickness: 0 };
var geometry = new THREE.ExtrudeGeometry( this.shape, extrudeSettings );
geometry.dynamic = true;
geometry.colorsNeedUpdate = true;
var material = new THREE.MeshStandardMaterial({
color: 0xafafaf,
metalness: 0.9
});
this.mesh = new THREE.Mesh( geometry, material);
this.mesh.position.set(i*3,0,0)
}
for(i = 0;i < 20; i++){
var struc = new structure(i);
scene.add(struc.mesh);
}