Utilizing an EllipseCurve for Extrusion Paths in Three.js - How is it Done?

The issue: I'm struggling to convert an EllipseCurve into a path that can be extruded along in Three.js.

When I try to use the EllipseCurve as the extrude path, nothing shows on the screen even though there are no errors. However, if I switch it to a LineCurve3, the square extrudes along it perfectly.

Although I can confirm that the EllipseCurve is being generated correctly by displaying it with a line material, I am unable to make it work as an extrude path.

The code snippet

var radius = 1100;
var degreesStart = 75;
var degreesEnd = 30;
var radiansStart = (degreesStart * Math.PI) / 180;
var radiansEnd = ((degreesEnd) * Math.PI) / 180;

// this won't seem to work as an extrude path, but doesn't give any errors
var path = new THREE.EllipseCurve(0, 0, radius, radius, radiansStart, radiansEnd, true);

// this works fine as an extrude path
//var path = new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(1000, 1000, 0));

var extrusionSettings = { steps: 100, bevelEnabled: false, extrudePath: path };

// draw a square to extrude along the path
var sectionSize = [];
sectionSize.push(new THREE.Vector2(0, 0));
sectionSize.push(new THREE.Vector2(1000, 0));
sectionSize.push(new THREE.Vector2(1000, 1000));
sectionSize.push(new THREE.Vector2(0, 1000));

var sectionShape = new THREE.Shape(sectionSize);

var componentGeometry = new THREE.ExtrudeGeometry(sectionShape, extrusionSettings);
var component = new THREE.Mesh(componentGeometry, material);

group.add(component);

My attempts: I have tried extracting points from the curve into a path for the extrusion. The closest attempt gave me an error "Cannot read property 'distanceTo' of null."

 var ellipsePath = new THREE.CurvePath(path.getSpacedPoints(20)); 
// where 'path' is my EllipseCurve in the code above
// (and then changed the extrusion settings to use 'ellipsePath ' instead).

I'm struggling to understand how the EllipseCurve corresponds to points that form a path for extrusion.

If anyone has suggestions or code to solve this problem, I'd greatly appreciate the help. Thank you.

Answer №1

Encountering a similar issue, I faced challenges with EllipseCurve and CurvePath when working on 2D paths for ExtrudeGeometry in three.js. After researching the problem and studying examples of extrusions based on 3D splines, I decided to develop my own Curve and define a custom 3D .getPoint function. By replacing the "var path" line in the code snippet with the following solution, I was able to successfully resolve the issue:

var path = new THREE.Curve();
path.getPoint = function (t) {
    // Calculate coordinates along the arc for t ranging from 0 to 1
    var segment = (radiansStart - radiansEnd) * t;
    return new THREE.Vector3(radius * Math.cos(segment), radius * Math.sin(segment), 0);
    };

Answer №2

After being inspired by @james-dunn’s method, I decided to create my own Path3D class which is similar to a traditional THREE.Path, but the getPoint() function now returns a Vector3 object where the z coordinate is always 0:

class Path3D extends THREE.Path {
    constructor(points) {
        super(points);
    }
    
    getPoint(time) {
        const point2D = super.getPoint(time);
        const point3D = new THREE.Vector3(point2D.x, point2D.y, 0);
        return point3D;
    }
}

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

The FormData object appears to be blank, even though it was supposed to be populated when attempting to send a PDF file using a multipart FormData POST request in Cypress

I am attempting to send a PDF file as a POST request. The API supports the use of @RequestPart and @RequestParam: @RequestPart("file") MultipartFile file; @RequestParam(value = "document-types", required = false) Set<String> documentTypes; My appro ...

Using Angular NgRx - triggering an action from an effect once certain actions yield a result

I'm encountering difficulties in dispatching actions that require results from five other actions (all listed in my effect). Could someone lend a hand? Essentially, I need to trigger an action within the effect only after these five actions have retu ...

When zooming in on a d3js graph, the number of ticks begins to multiply

I added zoom functionality to a d3 line chart and it was working fine at first. However, after zooming to a certain level, the y-axis ticks started displaying decimal numbers like (3.400000001). I then included the following code: .tickFormat(d3.format(", ...

Tips for aligning elements of varying heights

Currently, I am tackling a responsive web design challenge involving floating multiple items in 4 columns side by side. The issue arises due to the varying heights of these items, causing the floating to behave improperly. Here is the current problem illu ...

Implementing gridlines on a webpage using HTML and JavaScript to mimic the grid layout found in Visual Studios

Currently, I have a grid snap function in place, however, I am looking to add light grey lines horizontally and vertically on my Designing application. The goal is to achieve a similar aesthetic to Visual Studios' form designing feature. Utilizing so ...

What is the method for launching a new tab within an incognito window that is already open?

In the process of developing a Chrome extension, I am focusing on the functionality of creating a new tab from context menus within an incognito window. My current approach involves using the following script: chrome.windows.create({url: "https://google.c ...

Common mistakes encountered when utilizing webpack for react development

I'm currently following the exercises in Pro MERN Stack by Apress and have come across a webpack issue. Everything was running smoothly until I introduced webpack into the mix. Now, when I execute npm run compile, I encounter the following error: > ...

The wonders of jQuery popup windows

A code was discovered that displays a popup, but it currently relies on transparency (opacity: 0). I would like to modify it to use display: none instead, as the transparent window in the center of my website is causing issues. Here is the JavaScript code ...

Is it possible to utilize a designated alias for an imported module when utilizing dot notation for exported names?

In a React application, I encountered an issue with imports and exports. I have a file where I import modules like this: import * as cArrayList from './ClassArrayList' import * as mCalc1 from './moduleCalc1' And then export them like t ...

Stop music with one click, code in Javascript

I am encountering an issue with a set of 5 div boxes on my website. Each box is supposed to play a specific audio track when clicked, based on data attributes. However, I'm having trouble pausing the previous track when clicking on a new box, resultin ...

Controlled Checkbox Component in React

I'm really struggling with this. While I can easily work with select drop downs and text fields, I just can't seem to get checkboxes to function properly in a controlled manner. I want them to 'toggle' and respond to events in a parent ...

Issue with AngularJS: The select dropdown fails to update the selected option when the bound scope variable changes

I am facing an issue with a select control in my Angular app. The options for the select are generated dynamically from an array of objects in the scope. When I try to pre-select a specific option on app init by changing a bound variable on the scope, it d ...

Is there a way to update the state for a specific location on a map?

I have a requirement to update the quantity of a product by using setCount. let [product.quantity, setCount] = useState(product.quantity); Implementing increment and decrement functions for product.quantity const increaseQuantity = () => { setCoun ...

Unexpected outcomes from the Jquery contains method

Take a look at this example: http://jsfiddle.net/SsPqS/ In my HTML, there's a div with the class "record" to which I've added a click function. Within the click function, I have the following code snippet (simplified): $(".record").click(funct ...

How can one utilize a second drop-down list in asp.net to alter the selected index and visibility of a drop-down list?

I am working on an asp.net application that includes a drop down list with the following structure: <asp:DropDownList runat="server" ID="ddlChanges" CssClass="selectstyle" onchange="javascript:ddlChangesChanged();"> <asp:ListItem Text="-- Select ...

Adjust the HTML Canvas to cover the entire screen

I am trying to adjust the HTML Canvas element so that its width matches the width of the browser window and its height matches the height of the browser window. Below is the code snippet I am using: HTML: <body> <canvas id="gameCanvas" ...

Heroku is experiencing issues with loading Firebase credentials

Difficulty with Firebase Integration on Heroku Currently, I am facing an issue with my Node.js server deployed on Heroku that interacts with Firebase. When attempting to run the application on Heroku, I encounter an error stating that it is unable to load ...

What is the importance of cloning React state before making changes or while working on it?

Someone advised me to always create a clone or copy of the react state before making any changes to it. const newState = [...this.state] newState.name = 'hardik' I'm still unsure about the reason behind this recommendation. Why shouldn&apos ...

Please reset the form fields after the most recent edit

I've created a form that includes multiple select elements. When an option is selected, it activates the next select element and updates it with values using Ajax and PHP. However, I'm facing an issue where changing a previous option only resets ...

Get the value of the button that has been clicked

I have a query regarding building a website that can be started via PowerShell. The PowerShell HTML code I am using is: $proxys = "" foreach ($email in $ADObj.proxyAddresses){ $proxys += "<button id='$email' name='alias&apo ...