Step-by-Step Guide to Cutting a Cube with Three.js

I am facing a unique challenge that I haven't seen discussed before. From my limited knowledge of how 3D objects are rendered using webgl and three.js, it appears that I am struggling to create a geometric shape similar to a parallelepiped that does not have all angles of 90 degrees, while inheriting its geometry from cubegeometry.

My objective is to achieve something like this:

The desired outcome should resemble what the following CSS code would do for an HTML element:

-moz-transform: skew(0,-45.1deg);

Can anyone provide guidance or a solution to this dilemma?

Thank you for your help.

javascriptthree.jsgeometry

Answer №1

To achieve the desired outcome, start by constructing a cube mesh and then implement a shear matrix on the cube's geometry. This process will distort the geometry as described.

let geometry = new THREE.BoxGeometry( 10, 10, 10 );

let shearMatrix = new THREE.Matrix4();

shearMatrix.set(   1,   Syx,  Szx,  0,
                Sxy,     1,  Szy,  0,
                Sxz,   Syz,   1,   0,
                  0,     0,   0,   1  );

geometry.applyMatrix4( shearMatrix );

For an alternative approach, refer to https://example.com/solutions/shearmatrix

Current three.js version: r.143

Answer №2

In the latest version of Three.js, an update was made to the Matrix4.makeShear() function, which has been credited to @WestLangley

For more information, visit: 

const geometry = new THREE.BoxGeometry(5, 5, 5);

const matrix = new THREE.Matrix4();
matrix.makeShear(1, 0, 0, 0, 0, 0);

geometry.applyMatrix4(matrix);

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

Error encountered in jQueryUI Autocomplete: the function 'this.source' is not defined

I have been working on incorporating a live search feature that scans through keys in a JSON obtained from a public API. To achieve this, I am utilizing Jquery UI. However, I encountered the following error and I am uncertain about how to resolve it. Un ...

javascriptjqueryhtml

Mastering the use of Action.Submit in adaptive cards to simulate user input

I am trying to implement MessageFactory.SuggestedActions within my "welcomeCard" adaptive card. Essentially, in my adaptive card (welcome card), I have several buttons for the user to click on, each with an Action.Submit type. { "type" ...

javascriptnode.jstypescriptbotframeworkadaptive-cards

Easily toggle between various image source paths

In my current application, all HTML files have hardcoded relative image paths that point to a specific directory. For example: <img src="projectA/style/images/Preferences.png"/> Now, I am considering switching between two different project modes: & ...

javascriptjqueryhtmlangularjs

The Slice method is malfunctioning after the array has been filtered

I am currently working on creating a news portal app using Next JS, Redux, mongoose, and Express. My Issue is: While I am able to filter specific items from an array successfully, I encounter problems when attempting to display a specific number of items, ...

javascriptreactjsnext.js

Leveraging server-side data with jQuery

When my client side JQuery receives an array of JSON called crude, I intend to access and use it in the following way: script. jQuery(function ($) { var x = 0; alert(!{JSON.stringify(crude[x])}); ...

javascriptjquerynode.js

Issue encountered with websocket connection while attempting to include dependencies

My current project involves integrating charts for the graphical component using React within an Electron software. I've added interaction with buttons (sections) to insert different data into the graphs based on user clicks on one of the sections. Th ...

javascriptpythonnode.jsreactjswebsocket

How come my useEffect still contains outdated data?

I have encountered an issue with my useEffect in a React component. Despite having all the necessary dependencies, the state does not update after the useEffect completes. It always displays the previous render. Below is the code snippet of the hook: exp ...

javascriptreactjsreact-hooks

Is there a feature similar to Google/YouTube Insight called "Interactive PNGs"?

Recently, I have been exploring the YouTube Insight feature and I am intrigued by how their chart PNGs are generated. When you view the statistics for a video, the information is presented in interactive PNG images. These images seem to be entirely compos ...

phpjavascripthtmlchartspng

Update a JavaScript variable with fresh information and then execute JSON parsing

I have implemented this code to display a Verite Timeline on my webpage: <div id="timeline-embed"></div> <script type="text/javascript"> var timeline_config = { width: "100%", height: "100%", debu ...

javascriptjqueryjson

Implementing method overrides in TypeScript class objects inherited from JavaScript function-based classes

I am facing a challenge with overriding an object method defined in a JavaScript (ES5) function-based class: var JSClass = function() { this.start = function() { console.log('JSClass.start()'); } } When I call the start() method, it pri ...

javascripttypescript

Issue: Module '../utils/composeObjs' not found after global installation of generator-stencil

Currently, I am in the process of developing a generator for stenciljs which can be found at https://github.com/AkashGutha/generator-stencil Within this project, there is a handy utility function located at the root directory. This function resides in one ...

javascriptnode.jsyeomanyeoman-generatorstenciljs

Error: The function $(...).maxlength is not recognized - error in the maxlength plugin counter

I have been attempting to implement the JQuery maxlength() function in a <textarea>, but I keep encountering an error in the firefox console. This is the code snippet: <script type="text/JavaScript"> $(function () { // some jquery ...

javascriptjquery

Aptana's Smart Code Completion

Does Aptana offer code completion for custom JavaScript libraries? If so, how can we enable it? ...

javascriptaptanacode-completion

The handleChange function fails to trigger when selecting a date using Material UI components

I am currently facing an issue with the material ui datepicker. When I click on a date, the selected date is not chosen and the date window does not close. I suspect this is due to passing the date into another file and the handleChange function (from Form ...

javascriptreactjsformsmaterial-uiformik-material-ui

Is it possible to arrange a react map based on the length of strings?

I am working on a React function that loops through an object and creates buttons with text strings retrieved from the map. I want to display the text strings in order of their length. Below is the code snippet for the function that generates the buttons: ...

javascriptarraysreactjssortingmaterial-ui

Dynamic Checkbox Functionality in REACT

Motivation: My goal is to generate multiple rows with a variable number of checkboxes that will be managed by a useState hook. Challenge: The page freezes or displays constant loading, with no content visible. There are no console logs, and even the debug ...

javascriptreactjscheckboxmaterial-ui

Understanding the use of JSON and JavaScript is proving to be quite a challenge for me

Although I understand the "parse" and "stringify" methods for JSON, I am still struggling to use it effectively despite seeing many examples and questions. In a previous homework assignment, I created an image gallery with hard-coded links to images. Now, ...

javascriptjsonobject

What are the steps to implement Lazy loading in Node.js?

const posts = await Post.find().populate("receiver").populate("author") try { res.json({ status: true, message: 'All posts fetched', data: posts.reverse() ...

javascriptnode.jsmongodblazy-loading

Save the output of a function in node.js

I have created a function that utilizes the nodejs module recursive-readdir to read all files within a folder recursively. The function is functioning correctly, but I am facing an issue with exporting the 'routes' array using 'module.export ...

javascriptnode.js

When the object contains multiple arrays, filter out the id and remove it when clicked

I am working with an object that contains multiple arrays and aiming to filter out the id of the item to be removed onClick. However, I have encountered an error while trying to implement this logic. The error message I received is filter is not a functio ...

javascriptarraysreactjsnext.js