Vertical extrusion with Three.js

I am new to three.js and looking to extrude a shape vertically. I have successfully set the points for my 2D shape, but the extrusion is happening along the z-axis instead of the y-axis. Is there a simple way to achieve vertical extrusion without resorting to rotations or using a box geometry as a workaround for more complex shapes?

I've attempted rotating the mesh after extrusion, but it complicates calculating object positions within the extruded shape. Keeping it straightforward, I'm seeking a solution like the one shown here:

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

Here's my current code snippet:

export function createStorageLocation(storageLocation: StorageLocation) {
  const shape = new Shape();
  shape.moveTo(0, 0);
  shape.lineTo(0, 200 / 100);
  shape.lineTo(400 / 100, 200 / 100);
  shape.lineTo(400 / 100, 0);
  shape.lineTo(0, 0);

  const extrudeSettings: ExtrudeGeometryOptions = {
    steps: 2,
    depth: 10,
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 1,
  };

  const geometry = new ExtrudeGeometry(shape, extrudeSettings);

  const material = new MeshStandardMaterial({
    color: 'blue',
    opacity: 0.7,
    transparent: false,
  });

  const location = new Mesh(geometry, material);
  const axesHelper = new AxesHelper(5);
  location.add(axesHelper);
  location.position.set(
    storageLocation.startPoint.x / 100,
    storageLocation.startPoint.y / 100,
    storageLocation.startPoint.z / 100
  );
  return location;
}

Current state of the application: https://i.sstatic.net/Ns668.png

Answer №1

ExtrudeGeometry assumes that the shape to be extruded is positioned on the xy plane and that the extrusion direction is along the +z axis. For reference, take a look at lines 421-449 in the source code, specifically line 432:

v( vert.x, vert.y, depth / steps * s );

In this snippet, v(x, y, z) is a method that adds a set of coordinates to the vertex array of the object; vert.x and vert.y represent the x- and y-coordinates of the shape being extruded; and depth / steps * s calculates the z-coordinate during a specific step of the extrusion process.

The assumption regarding the shape lying on the xy plane is critical due to the two-dimensional nature of Shape objects; they are inhabitants of the Flatland defined by the xy plane.

If you desire a different behavior (i.e., without any rotations), you will need to devise your own solution. This may involve adapting the internal workings of ExtrudeGeometry to shift the extrusion from the z axis to the y axis. While straightforward for simple shapes like rectangles with linear extrusions (as seen in your examples), this task becomes increasingly intricate as the complexity of the shape and the extrusion path grows. Nonetheless, it remains more complex than embracing the standard extrude-then-rotate approach.

Answer №2

I have discovered a solution involving rotation and translation, realizing my mistake of rotating the mesh instead of the geometry itself. However, I am still intrigued by the correct method for achieving this. Here is the functioning code snippet:

export function createStorageLocation(storageLocation: StorageLocation) {
  const shape = new Shape();
  shape.moveTo(0, 0);
  shape.lineTo(0, 200 / 100);
  shape.lineTo(400 / 100, 200 / 100);
  shape.lineTo(400 / 100, 0);
  shape.lineTo(0, 0);

  const extrudeSettings: ExtrudeGeometryOptions = {
    steps: 2,
    depth: 10,
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 1,
  };

  const geometry = new ExtrudeGeometry(shape, extrudeSettings);
  geometry.rotateX(MathUtils.degToRad(-90));
  geometry.translate(0, 0, 200 / 100);

  const material = new MeshStandardMaterial({
    color: 'blue',
    opacity: 0.7,
    transparent: false,
  });

  const location = new Mesh(geometry, material);
  const axesHelper = new AxesHelper(5);
  location.add(axesHelper);
  location.position.set(
    storageLocation.startPoint.x / 100,
    storageLocation.startPoint.y / 100,
    storageLocation.startPoint.z / 100
  );

  location.updateMatrix();
  return location;
}

Resulting visualization can be viewed here.

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

Utilizing the Express-busboy npm package to generate a new directory within the public folder of

While working on my controller, I encountered an issue when trying to readFile sent from the browser via AJAX. Unexpectedly, a directory was created in my public folder with a name like '3d6c3049-839b-40ce-9aa3-b76f08bf140b' -> file -> ...

How to locate the index.js file within my application using Node.js?

Directory Structure bin - main.js lib - javascript files... models - javascript files... node_modules - folders and files public - index.html route - javascript files... index.js package.json I am using Express and angular.js. The ser ...

Pressing element against another element

I have a somewhat unconventional request - I want to trigger a click event with an HTML element while hovering over another element. Let's imagine we have a .cursor element hovering over an anchor text. In this scenario, clicking on the .cursor shoul ...

continuously adjust the cost

I'm struggling with incorporating a JavaScript function that is required for my school project. The task at hand is to create a store where the price updates dynamically when quantities are added or removed. The +/- buttons are functioning correctly; ...

Loading a Vue.js template dynamically post fetching data from Firebase storage

Currently, I am facing an issue with retrieving links for PDFs from my Firebase storage and binding them to specific lists. The problem arises because the template is loaded before the links are fetched, resulting in the href attribute of the list remainin ...

Is it possible for me to transfer a class attribute to a directive template in AngularJS?

I recently came across this directive in AngularJS: productApp.directive('notification', function($timeout) { return { restrict : 'E', replace : true, scope : { type: "@", message: "@ ...

The structure of NodeJS Express API calls revolves around handling asynchronous events

Currently, I am working on a hobby project using NodeJS and Express, but I am finding it challenging to manage asynchronous calls. There is a bug that I would like the community's help in resolving. I have set up an Express layout where I send post r ...

Tips for concealing a div in JavaScript when other divs are not present

Is there a way to hide the title div if related divs are not present in the HTML structure? This is the main HTML structure: <div class="row parent"> <div id="title-1" class='col-12 prov-title'> <h2 ...

"Enhance User Experience with Autoplay.js for Interactive Content and Sound Effects

I'm trying to get both the animation and audio to start playing automatically when the page loads. Currently, the animation pauses when clicked, but I want it to load along with the audio playback. I attempted to use var playing=true; to enable autop ...

I encountered an issue where I am unable to subtract from jQuery's .outerHeight() within an if statement

I've been working on creating an ajax request that triggers when a div is scrolled to the bottom. I thought I had it figured out with this code, but I've run into an issue. Everything works fine without subtracting 100 from the elem.outerHeight() ...

How can I handle moving to button code-behind when validation fails without relying on Page.IsValid?

Recently, I encountered a challenge with an ASP.NET page that contains both ASP.NET validators and JavaScript checks. As I delved into the button code behind the scenes: protected void Button2_Click(object sender, EventArgs e) { if (Page.IsVal ...

What could be the reason for my Angular component not updating its value?

component1.html : <div class="nums-display"> {{nums}} </div> TS: nums: Array<number> = [0, 1, 2, 3]; ngOnInit(): void { this.numService.getNum().subscribe((res) => { this.num = res; }); } component2.html: <div (cli ...

How can I duplicate an array of objects in javascript?

I'm struggling with a javascript issue that may be due to my lack of experience in the language, but I haven't been able to find a solution yet. The problem is that I need to create a copy array of an array of objects, modify the data in the cop ...

Converting Integers to Integers in Javascript: A Step-by-Step

Let's say I have a Method written in JavaScript in GWT(JSNI) which accepts the wrapper data type Integer and I need to convert it into a Primitive Data type inside JS. public static native void nativeMethod(Integer index)/*-{ // What is the best ...

Response from a Clean jQuery Web Service

I've been seeing a lot of code examples calling web services that return JSON data, but they tend to involve back-end languages like PHP. Does anyone know of a tutorial for a jQuery-only solution? For example, setting up div tags with IDs, then direct ...

Utilizing onClick with material-ui button - functioning flawlessly for a single interaction

I have been attempting to encapsulate a Material-UI button within another component. Everything seems to be working well, except for when I try to handle the onClick event - it appears to only work once. Here is an example that demonstrates the issue: ht ...

JavaScript: What's the best way to update the URL in the address bar without triggering a page refresh?

Similar Question: How can I use JavaScript to update the browser URL without reloading the page? I've observed websites like GMail and GrooveShark altering the URL in the address bar without having to refresh the entire page. Based on my understa ...

Extract the Date portion from a DateTime object in ASP.NET MVC

I am currently facing an issue with a property in my Model [Display(Name = "День рождения")] [DataType(DataType.Date)] public System.DateTime Birthday { get; set; } When trying to save the value to the database using AJAX, it is also ...

Organize object properties based on shared values using JavaScript

Check out the JavaScript code snippet below by visiting this fiddle. var name = ["Ted", "Sarah", "Nancy", "Ted", "Sarah", "Nancy"]; var prodID = [111, 222, 222, 222, 222, 222]; var prodName = ["milk", "juice", "juice", "juice", "juice", "juice ...

Utilizing the Input method in Node.js

Transitioning from Python 3 to Node.js has me wondering if there is a similar function in Node.js to Python's input. For example, consider this code snippet: function newUser(user = null, password = null) { if (!user) user = prompt("New user name ...