Discovering the boundaries of a rotated trapezoid by utilizing the rotation technique

As I work on connecting two rectangular objects together, both with one corner cut off, they essentially transform into trapezoids.

One of the objects undergoes a rotation by a user-provided degree value. I have successfully determined the angle that the second object must be rotated in order to align with the cut side of the main object.

However, a gap persists between the two objects. To address this issue, I believe it is necessary to calculate the bounding box to determine the necessary adjustments in the x, y, or z directions.

My challenge now lies in figuring out how to calculate the bounding box of this trapezoid. Despite my efforts to search online, I have yet to find a solution that suits my specific requirements.

Given the dimensions of the trapezoids and the rotation angle, I am keen on finding a resolution. The following image provides further clarity on the scenario:

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

javascriptmaththree.js

Answer №1

Exploring the possibilities of using THREE.Box3():

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5, 8, 13);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10, 0x404040, 0x202020));

//trapezoid
var tPoints = [
  new THREE.Vector2(0, 1),
  new THREE.Vector2(1, 0),
  new THREE.Vector2(5, 0),
  new THREE.Vector2(5, 1)
];

var tGeom = new THREE.ExtrudeGeometry(new THREE.Shape(tPoints), {
  depth: 1,
  bevelEnabled: false
});
tGeom.center();
var tMat = new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
});
var trapezoid = new THREE.Mesh(tGeom, tMat);
trapezoid.position.set(0, 2.5, 0);
scene.add(trapezoid);

var box3 = new THREE.Box3();
var box3Helper = new THREE.Box3Helper(box3);
scene.add(box3Helper);

renderer.setAnimationLoop(() => {
  trapezoid.rotation.z += 0.01;
  box3.setFromObject(trapezoid);
  renderer.render(scene, camera)
});
body {
  overflow: hidden;
  margin: 0;
}
<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

Particles are not appearing when using the Three.js shader material

Hey there, I've been working on a simple scene with a grid of particles in the shape of a cube. Check it out here: https://codepen.io/sungaila/pen/qqVXKM The issue I'm facing is that when using a ShaderMaterial, the particles don't seem to ...

javascriptthree.jsshader

Implementing Vue.js click event behavior on a component within the template

Encountering an issue while developing Vue's template onclick event. Trying to open a module when clicking a file, I have looked at some samples with native code, but it does not quite fit into my code and I cannot reach the console. Here is my code: ...

javascripttemplatesvue.jsonclick

Using Jquery $.ajax may lead to temporary freezing of the Browser

I have a $ajax function that fetches multiple JSON objects from a URL and converts them into divs. There are around 50 objects, and I am using setInterval to call the $ajax function every 10 seconds for updates on each of the created divs. However, I' ...

javascriptjquery

Guide on scheduling a daily API GET request in a Node.js script for 11:00pm

I am working on a node js application that involves making an AWS API GET call. http://localhost:3000/amazon/api Within this call, I have specified the necessary functionalities. My goal is to automate this call to run everyday at 11:00PM using node js ...

javascriptnode.jscronschedule

What sets apart importing components in computed from importing components in dynamic import in Vue.js?

Imagine there are 4 components available on a page or within a component, and the user can utilize them based on their selection by toggling between Input, Image, Video, or Vudio components. There are two ways to lazily load these components: 1) <temp ...

javascriptvue.jswebpackvuejs2

Run several asynchronous HTTP requests in the background within a Chrome extension

I am facing a situation where I need to make multiple ajax requests through a Chrome extension and display the successful results in the popup HTML of the extension. I have created an array of URLs and loop through them to perform the ajax requests. Every ...

javascriptjqueryajaxgoogle-chrome-extension

Code executing twice instead of once in Javascript

Having trouble with a script in my demo below. When I enter "first input", submit, then click on the returned "first input", it alerts once as intended. However, upon refresh, if I enter "first input", submit, then add "second input", submit, and finally c ...

javascriptphpjqueryhtml

Encountering a 500 internal server error after deploying due to utilizing getServerSideProps in Next.js

When trying to redeploy my website on Vercel, I added getServerSideProps to my index.js file. However, I encountered an error that I am not familiar with. The program works perfectly on localhost. This is the getServerSideProps code that I added: export a ...

javascriptreactjsnext.js

Node.js causing excessive CPU usage due to repeated gettimeofday calls

Recently, I encountered a situation with a long-running node.js process that would occasionally spike to 100% CPU usage and stop responding to requests. In an effort to diagnose the issue, I used strace to inspect the process and discovered a series of get ...

javascriptlinuxnode.jsstrace

Currently, I am creating a regular expression to manage a specific task, but I have hit a roadblock in

Criteria: The string must not contain any uppercase letters. Special characters such as '^$.?*+()' are not allowed in the string. If the string includes '[', it must be followed by zero or more characters other than '[' and & ...

javascriptregexreactjs

Automated vertical alignment of rows within the Bootstrap table

I'm currently working on a table for my personal project that populates with data from the database. I am trying to get the rows to display vertically under headings (see screenshot at the bottom of this question). I have attempted various solutions f ...

javascripthtmlcssejsbootstrap-5

Angular 2 is not recognizing the element 'router-outlet'

I am currently utilizing universal-cli... This is how my app.node.module.ts appears: /** * This file and `main.browser.ts` are quite similar, for now! * By separating these, you can create logic, imports, etc that are "Platform" specific. * If you wis ...

javascriptnode.jsangularangular-routinguniversal-cli

In search of a hover functionality similar to what can be found on Stack Overflow

I am really impressed by the hover effects on StackOverflow. I would love to incorporate a similar feature into my own web application. Can anyone provide me with more information? What is this feature called? Are there any libraries available for it? I h ...

javascriptjquerytooltipmouseover

Error in Vue Google Maps: Marker not defined

I'm currently working on integrating a single location map using Google Maps in Vue 2 with Vue-google-maps-2. Despite using code that has successfully worked for other parts of the application where multiple markers are plotted from an array, I am enc ...

javascriptvue.js

Tips for assigning a personalized value to an MUI Switch when it is in the off position

I am currently utilizing the MUI Switch component to create an On-Off button. I have manually set the value as "on" and it is functioning correctly when the switch is in the true state. However, there doesn't seem to be an option to change the default ...

javascriptreactjsmaterial-ui

Create a scrollable div within a template

After discovering a template that I want to use for my personal project, I noticed a missing element... There's a div where content can be added. That's fine, but what if I add more content than fits in the space provided? The whole website beco ...

javascriptjqueryhtmlcsstemplates

Promise chain failure in express

I've developed an express.js server for managing REST API requests and extracting data from a MongoDB database. However, I'm encountering an issue with the promise chain when I send a GET request to a specific endpoint ("localhost:8081/api/getUse ...

javascriptmongodbrestapiexpress

Is add1 missing from the DOM? Learn how to include it

Having an issue with Java-Script and an HTML form. The scenario is that there's a main form with an "Add" button, which when clicked should display a second form. Next to the second form is another button labeled "Add1," which ideally should trigger ...

javascripthtml

The Vue feature responsible for displaying information on the webpage is currently not working as expected

I'm in the process of developing a settings page for a project. This particular page is based on HTML and utilizes JSON to store data, with Vue 3 being used to display the information on the page. However, I've encountered an issue where the data ...

javascriptjsonvue.js

The overall outcome determined by the score in JavaScript

Currently, I am working with a dataset where each person is matched with specific shopping items they have purchased. For instance, Joe bought Apples and Grapes. To gather this information, individuals need to indicate whether they have made a purchase. I ...

javascriptwidgetmax