【问题标题】:How to figure out the bounding box of a rotated trapezoid using the rotation如何使用旋转找出旋转梯形的边界框
【发布时间】:2020-01-26 11:55:29
【问题描述】:

我正在尝试将两个都有一个角的矩形对象连接在一起。操作后,它们实际上是梯形。

一个对象会旋转一定的度数,这取决于用户提供的输入。我设法计算出第二个对象需要具有的角度,以便它与主对象的侧面切割对齐。

现在的问题是对象之间仍然存在间隙。我认为最好计算边界框,这样我就知道需要在 x、y 或 z 方向上调整多少位置。

我不知道如何计算这个梯形的边界框。我搜索了互联网/堆栈溢出,但没有找到任何适合我需要的东西。

我掌握的信息是梯形的尺寸和旋转角度。

这是一张图,希望能让我的情况更清楚一点:

【问题讨论】:

  • 我不知道文档中有关于此的内容,这很尴尬。是否可以在单词位置而不是本地位置获得对象周围的边界框?
  • Box3 就是这样做的。
  • 嗯,这很奇怪。旋转对象上的边界框与非旋转对象上的边界框相同。不是因为是本地职位吗?
  • 你在计算网格几何的边界框吗?毫不奇怪,它只使用顶点坐标,而不考虑网格的旋转、平移和缩放。将其用作new THREE.Box3().setFromObject(your_mesh); 将为您提供您期望的边界框。

标签: javascript math three.js


【解决方案1】:

只是关于如何使用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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-24
    • 2019-06-01
    • 2021-09-01
    • 2021-08-25
    • 1970-01-01
    • 2018-12-29
    相关资源
    最近更新 更多