Creating 3D extrusions with Three.js by specifying depth and a direction vector

Question

Creating 3D extrusions with Three.js by specifying depth and a direction vector

My goal is to extrude a shape and generate an ExtrudeGeometry, but I need the ability to control the direction of the extrusion. Specifically, I have a direction specified in a Vector3.

The shape is initially drawn on the x-y plane, with the default extrusion depth being along the z-axis. For example, a direction vector of (0,0,1) results in a standard extrusion, while (0,0,-1) would extrude the shape in the opposite direction.

I attempted to use an extrude path for this purpose, but found that the shape could rotate freely, which was not my desired outcome. I require the shape to maintain its original orientation. More information on this issue can be found in my previous question here.

I considered adjusting the vertices of the resulting ExtrudedGeometry using a matrix transformation, but encountered difficulties achieving the desired geometry. It's possible that the face normals may become inverted after applying this method due to my lack of expertise in handling matrices.

Note The direction vector will never be perpendicular to the z-axis as it would result in invalid shapes.

The main question:

How can I reliably extrude my shape in the specified direction? To illustrate, consider a square shape on the x-y plane with dimensions of 2000 units, extruded by 2000 units using three different direction vectors. Below are 2D and 3D visual representations of the expected outcomes.

javascript vector three.js geometry

Answer 1

Answer №1

To extrude your geometry, start by specifying an extrusion depth in the usual way. Next, incorporate a shear matrix to tilt your geometry. You can find more information on how to apply a shear matrix here.

Below is an example of how to define a shear matrix for tilting a geometry:

var matrix = new THREE.Matrix4();

var dir = new THREE.Vector3( 0.25, 1, 0.25 ); // Customize this vector according to your needs

var Syx = dir.x / dir.y,
    Syz = dir.z / dir.y;

matrix.set(   1,   Syx,   0,   0,
              0,     1,   0,   0,
              0,   Syz,   1,   0,
              0,     0,   0,   1  );

geometry.applyMatrix4( matrix );

(Keep in mind that the y-axis is upward in the three.js coordinate system, unlike what you may be used to from typical illustrations)

Compatible with three.js version r.113

Answer 2

To extrude your geometry, start by specifying an extrusion depth in the usual way. Next, incorporate a shear matrix to tilt your geometry. You can find more information on how to apply a shear matrix here.

Below is an example of how to define a shear matrix for tilting a geometry:

var matrix = new THREE.Matrix4();

var dir = new THREE.Vector3( 0.25, 1, 0.25 ); // Customize this vector according to your needs

var Syx = dir.x / dir.y,
    Syz = dir.z / dir.y;

matrix.set(   1,   Syx,   0,   0,
              0,     1,   0,   0,
              0,   Syz,   1,   0,
              0,     0,   0,   1  );

geometry.applyMatrix4( matrix );

(Keep in mind that the y-axis is upward in the three.js coordinate system, unlike what you may be used to from typical illustrations)

Compatible with three.js version r.113

Creating 3D extrusions with Three.js by specifying depth and a direction vector

Answer №1

Similar questions

What steps should I take to make this slider functional?

Transforming Uint8Array into BigInt using Javascript

Ways to eliminate all attributes and their corresponding values within HTML tags

Bringing in a created class establishes the universal prototype

Insert the object into a designated location within a multi-dimensional array

What is the process for locating inline CSS styles within HTML body tags?

Retrieve information from an API and assign the corresponding data points to the graph using Material UI and React

Which takes precedence: the end of the script tag or the backtick?

What is the functionality of the large arrow notation when used in conjunction with the value formatter in ag-Grid

vue-awesome-swiper / The button's name is synchronized, causing all other swiper elements to move in unison

The request to http://localhost:5000/error resulted in a 404 (Not Found) error message. I encountered difficulties connecting

Can cucumber steps be executed conditionally within a single scenario?

Automatically update and reload Express.js routes without the need to manually restart the server

Is there a way to eliminate the # sign from hash data using jQuery?

How can I ensure that my text input and button are in sync in ReactJS?

What is the process for programmatically injecting a search query to activate the places_changed event for the Google Maps API?

Why is AJAX failing to execute PHP file from JavaScript?

What is the best way to patiently wait for a promise to fulfill, retrieve its value, and pass it to another function?

Utilizing an object map to pass objects as props without losing their keys

Include the image source in the array