How to Make a Zigzag Formation in three.js?

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

Answer №1

Check out this simple function that generates points to create a unique zigzag pattern based on specified parameters:

// numSegments - number of zigzag segments
// segmentWidth - width of each segment
// segmentHeight - height of each segment
// lineThickness - thickness of the line
function createZigZagPoints(numSegments, segmentWidth, segmentHeight, lineThickness) {

  let points = [];

  for (let i = 0; i < numSegments; i++) {
    points.push([i * segmentWidth, 0]);
    points.push([i * segmentWidth + segmentWidth / 2, segmentHeight]);
  }

  points.push([numSegments * segmentWidth, 0]);
  points.push([numSegments * segmentWidth, -lineThickness]);

  for (let i = numSegments; i > -1; i--) {
    points.push([i * segmentWidth + segmentWidth / 2, segmentHeight - lineThickness]);
    points.push([i * segmentWidth, -lineThickness]);
  }

  return points;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the fetch function within a React functional component

I have been experimenting with different methods to fetch data only once before rendering, but I am encountering some challenges: It is not possible to call dispatch in componentDidMount as there is a restriction that it can only be done in Functional c ...

Executing functions in real-time using React Native

I'm fairly new to Object-Oriented Programming (OOP) and my understanding of promises, asynchronous/synchronous function execution is quite basic. Any guidance or help from your end would be greatly appreciated! Let's take a look at an example fr ...

Sinon - observing the constructor function

While I've come across a few related inquiries, none seem to address what I am specifically looking to achieve. My goal is to monitor a constructor method in such a way that when an object created with the constructor calls this method from a differe ...

Positioning tooltip arrows in Highcharts

I'm attempting to modify the Highcharts tooltip for a stacked column chart in order to have the arrow on the tooltip point to the center of the bar. I understand that I can utilize the positioner callback to adjust the tooltip's position, but it ...

Ways to obtain an attribute through random selection

Figuring out how to retrieve the type attribute from the first input element: document.getElementById('button').addEventListener('click', function() { var type = document.querySelectorAll('input')[0].type; document.getE ...

How to effectively manage errors in WCF using JavaScript?

Does anyone have instructions on using callback functions in a WCF Service that is accessible to Javascript? I am particularly interested in retrieving information from the FailureCallback to understand why my method is not working as expected. To clarify ...

Setting a value in the selectpicker of rsuitejs involves assigning a specific value to the

const _DATA = [{ code: 'code1', name: 'Jagger' },{ code: 'code2', name: 'Tigger' },{ code: 'code3', name: 'Lion' }] <SelectPicker data={_DATA.map(x => {return {label: x.n ...

unique jquery plugin accesses function from external javascript file

As a beginner, I am attempting to create a custom jQuery plugin for which I have a simple HTML form: <form id="registerForm" action = "somepage" method="post" class="mb-sm"> <div class="form-group"> <div class="col-md-12"> ...

Increase the dimensions of the jQuery modal confirmation box

I am working on a jQuery confirmation dialog that displays some details for the user. My goal is to have the dialog adjust its dimensions after the user clicks "YES" to show a smaller text like "Please wait...". How can I dynamically change the size of the ...

The column must have a defined value and cannot be left empty

I encountered an issue while trying to populate a database with seed data. The error message I received is: name: 'SequelizeDatabaseError', parent: Error: Column 'id' cannot be null code: 'ER_BAD_NULL_ERROR', errno: 1048, sql ...

There was an error in reading the property 'RNFSFileTypeRegular' of null, with the JavaScript engine reporting as hermes

Below are the dependencies listed in my package.json file: "dependencies": { "@expo/vector-icons": "^14.0.2", "@react-navigation/native": "^6.0.2", "expo": "~51.0.23", & ...

What is the method utilized by Redux to store data?

I am currently developing a small application to enhance my understanding of how to utilize redux. Based on my research, redux allows you to store and update data within the store. In my application, I have implemented an HTML form with two text inputs. Up ...

What is the best way to update just the image path in the source using jQuery?

I am currently working on implementing a dark mode function for my website, and I have successfully adjusted the divs and other elements. However, I am facing an issue with changing the paths of images. In order to enable dark mode, I have created two sep ...

The addition of ngRoute causes the controller in AngularJS to malfunction

Currently, I am attempting to implement routes in my angularJS application and have encountered an issue where integrating 'ngRoute' into the app causes the main controller to malfunction. Furthermore, I am experiencing difficulties with ngRoute ...

Tips for maximizing the efficiency of a callback when utilizing the filter function in Primefaces for 'myDataTable'

Currently using Primefaces 5.1, and I've encountered a situation where I want to hide a table until after the filter is applied in Javascript. My initial thought was to simply set the css of the table to visibility:hidden;, followed by running the fol ...

The functionality of the OnClientClick event within the ASP.NET platform

While utilizing ASP.NET to pass a value to a JavaScript function, I encountered an issue where it doesn't seem to work when trying to pass a value from another control. It seems to behave as if there is a syntax error and just reverts back to the main ...

The attribute "property" is not found in the specified type of "Request<ParamsDictionary>"

Struggling to enhance the Request interface in the express package with custom properties, I keep encountering this TypeScript error: TS2339: Property '' does not exist on type 'Request<ParamsDictionary>'. Any ideas on how to re ...

An error occurred with the datepicker: Unable to connect to 'bsValue' as it is not recognized as a property of 'input'

Despite importing DatepickerModule.forRoot() in my Angular unit test, I am encountering the following error: Error: Template parse errors: Can't bind to 'bsConfig' since it isn't a known property of 'input'. (" ...

Display a div every 3 seconds with the help of jQuery

I am seeking a solution to display the second div (box2) every 3 seconds. Can anyone help me achieve this using jQuery? <div id="box1" style="background-color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This ...

Encrypting href links in Nodemailer with Handlebars for forwarding purposes

I am working on a project that involves utilizing NodeMailer + Handlebars for sending and tracking emails. I am interested in changing every href link to the project URL before redirecting to the destination link. For example: Original email: <a href ...