CODEWITHSUNDEEP
javascriptmaththree.js
Pestav
Pestav

Reputation: 85

How to figure out the bounding box of a rotated trapezoid using the rotation

I'm trying to connect two rectangular object together which both have one corner cut off. After that operation they are practically trapezoids.

One object is rotated a certain amount of degrees which can vary depending on what input the user provides. I managed to calculate the angle that the second object needs to have so that it aligns with the cut of side of the main object.

The problem now is that there still is a gap between the objects. I think it is best to calculate the bounding box so I know how much I need to adjust the position in the x, y or z direction.

I have no idea how I can calculate the bounding box of this trapezoid though. I have searched the internet/stack overflow but haven't found anything that fits my needs.

The information that I have is the dimensions of the trapezoids and the angle of rotation.

Here is a drawing to hopefully make my case a bit more clear:

Drawing of the rotated trapezoid

Upvotes: 1

Views: 400

Answers (1)

prisoner849
prisoner849

Reputation: 17576

Just a concept of how your can work with 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>

Upvotes: 2

Related Questions