Building Unique Staircases with Three.js Geometry

I have been working on creating a custom three.js geometry for round staircases, but I seem to have made some errors with the vertices and indexes of the steps.

Below is an example staircase that utilizes my custom geometry:

https://i.sstatic.net/uQXvP.jpg

The issue lies in the code at functions generateStepTops Line 177, generateStepFronts Line 259, and generateStepSide Line 338

var renderer, scene, camera, controls;
// Code continues...
body {
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

The part where the problem seems to be occurring:

for (var stepIndex = 0; stepIndex <= stepSegments; stepIndex++) {
    // Code snippet continues...
}

Answer №1

To determine the number of steps, divide the length of the stairs (thetaLength) by the length of one step (stepTheta).

var stepSegments = Math.ceil(thetaLength / stepTheta);

The input parameter segments (which is 3 in this case) is not the total number of segments, but rather the number of segments for one step of the stairs:

var stepThetaSegments = segments;
segments = stepSegments * stepThetaSegments;

Additionally, there are multiple misalignments in the vertex indices. An important consideration is that the tread and sides of the stairs need to be tiled in segments, while the front of the steps should not be tiled.
To visualize all the faces correctly, ensure all primitives have the same orientation (counterclockwise). Refer to Face Culling.

For detailed corrections, refer to the code snippet below.

Preview:

https://i.sstatic.net/fuIZW.png

var renderer, scene, camera, controls;

/* Function to create StairsGeometry */
function StairsGeometry(radius, holeRadius, segments, angle, thetaStart, thetaLength, stepTheta) {
  
  /* Constructor check */
  if (!(this instanceof StairsGeometry)) {
    throw new TypeError("StairsGeometry needs to be called using new");
  }

  THREE.Geometry.call(this);

  /* Set type and parameters */
  this.type = 'StairsGeometry';
}

// Remaining code goes here

body {
    margin: 0;
    overflow: hidden;
}

canvas {
    width: 100%;
    height: 100%
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

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

What is the best way to increase the value of a variable using jQuery?

As I work on adding dates to a slider, I find myself needing to increment the values with each click. Initially, I start with the year - 2. $('#adddates').click(function() { var year = 2; $("#slider").dateRangeSlider({ bounds: { ...

How to properly fill state values for testing components with React Testing Library?

Introducing my custom component -> export default() => { const [list, setList] = useState([]) const handleAddToList = () => { // Executes an API call and updates the list state. setList(response); } return ( <div> ...

Utilizing ngModel within the controller of a custom directive in Angular, instead of the link function

Is there a way to require and use ngModel inside the controller of a custom Angular directive without using the link function? I have seen examples that use the link function, but I want to know if it's possible to access ngModel inside the directive ...

Retrieve the world coordinate using Curve.getPoint() in Three.js

I am currently attempting to determine the position of a point along an ellipse curve in world coordinates using Three.js. To do so, I am utilizing the following function: pt = ellipse.getPoint(t[i]); However, this function returns a Vector2 object with c ...

Navigating between pages using React-router-dom

Just implemented a simple navigation using react-router-dom. Managed to get it working with this.props.history.push('/pathName'); But I'm not entirely sure if my understanding and approach are correct. Any advice on correcting my mistakes wo ...

Is there a way to increase the size of the icon without altering the dimensions of the button?

After implementing a code snippet to enable a button to copy the URL to the clipboard, I encountered an issue. Originally, the button displayed the text "copy," which changed to "copied" after clicking on it and reverted back after 2 seconds. However, I d ...

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

Can you point me to the location where the 'req' parameter is specified?

I've been exploring a new authentication approach detailed in this article. One issue I'm encountering is locating where the req parameter is declared in the snippet below. It seems like my code won't compile because this parameter isn&apos ...

The HTML code may fade away, but the JavaScript is still up and running behind the

Switching between different div elements in my HTML document is a challenge. Here's the code I currently have: <div id="screen1" class="current"> <div id="press_any_key_to_continue"> <font style="font-family: verdana" color="yellow ...

Every time I switch to a new Vue.js route, I find myself inexplicably redirected to the bottom of the page, leaving me scratching my head in confusion

I'm really struggling to understand why this issue is happening because there doesn't seem to be any code that would interfere with the scrolling. Every time I click on the link, it immediately takes me to the bottom of the view. I'm not sur ...

Instantly magnifying on the initial point regardless of the zoom type chosen is a feature of Chart.js zoom

Despite adding zoom functionality to my line chart, I am facing an issue where it automatically zooms in to the first point and does not allow me to zoom back out, except for using the reset zoom function. The zoom out function is also not working properly ...

The correct method for sending an array to a shader in three.js

In my current project, I have a straightforward program in which I am attempting to pass an array of predefined values (essentially serving as a lookup table) to a shader. The corresponding code snippet looks like this: var table = []; for ( var ...

Using Firebase Authentication in Next.js with Server-Side Components

As I explore how to implement authentication using Firebase in my Next.js app, one thing that stands out is the need to initialize Firebase with our configuration details (apiKey, etc.). The concern I have is when using any Firebase function from a client ...

Is it necessary to include async/await in a method if there is already an await keyword where it is invoked?

Here are the two methods I have written in Typescript: async getCertURL(pol: string): Promise<string> { return await Api.getData(this.apiUrl + pol + this.certEndpoint, {timeout: 60000}).then( (response) => { return response.data.certUR ...

Nashorn poses a security threat due to its ClassFilter vulnerability

Encountering some troubles with Nashorn and came across a concerning security vulnerability highlighted here: It appears that someone can easily execute code using this command: this.engine.factory.scriptEngine.eval('java.lang.Runtime.getRuntime().ex ...

Dividing an array in PHP using Ajax

Hey there, I have successfully sent data from PHP to Ajax using Json but now I need help in splitting the response. Can anyone guide me on how to alert each element separately? $.ajax({ url:"myHandler.php", type:"POST", ...

Bootstrapvalidator does not function properly with select2.js

My code is not validating the select field. What could be causing this issue? Can anyone provide a solution? Apologies for my poor English, and thank you in advance for your response. Here is my form: <form name="form_tambah" class="form_tambah"> ...

Setting the error name in an extended Error class in Node.js: A step-by-step guide

My goal is to assign the error name as err.name = 'ExpressValidatorError'; within a custom Error class called class AppError extends Error that is then passed to centralErrorHandler for filtering and handling errors based on err.name. Despite ...

Encountering a difficulty in sending data to the server through ajax with Cordova

I am currently working on a Phonegap Cordova project and I'm trying to send data to the server using AJAX but I'm encountering an error. Here is an example of my code: $(document).ready(function() { $('#frm').submit(function() ...

Unable to bind click eventListener to dynamic HTML in Angular 12 module

I am facing an issue with click binding on dynamic HTML. I attempted using the setTimeout function, but the click event is not binding to the button. Additionally, I tried using template reference on the button and obtaining the value with @ViewChildren, h ...