javascript - 如何使用旋转找出旋转梯形的边界框
问题描述
我正在尝试将两个矩形对象连接在一起,它们都有一个角被切断。在该操作之后,它们实际上是梯形。
一个对象旋转了一定的度数,这可以根据用户提供的输入而变化。我设法计算出第二个对象需要具有的角度,以便它与主对象的侧面切割对齐。
现在的问题是对象之间仍然存在间隙。我认为最好计算边界框,这样我就知道需要在 x、y 或 z 方向上调整多少位置。
我不知道如何计算这个梯形的边界框。我搜索了互联网/堆栈溢出,但没有找到任何适合我需要的东西。
我拥有的信息是梯形的尺寸和旋转角度。
这是一张希望使我的情况更清楚的图:
解决方案
只是您如何使用的概念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>
推荐阅读
- javascript - Angular 7:找不到具有名称的控件:formControlName 以角度反应形式
- javascript - vuejs挂载:无法设置未定义的值
- c# - 对象的适当组织和转换
- rust - 尽管值已经存在,但 Entry::or_insert 仍然执行
- python - Django - 解析 URL 以获取对象并保存它
- php - 代码点火器电子邮件失败“遇到 SMTP 错误:550 未知用户”
- android - DrawerLayout 没有显示在我的预览窗口中。如何解决这个问题?
- python - 为什么python在关闭fifo文件时会生成sigpipe异常?
- javascript - 了解 JavaScript 中的 Promise 构造函数
- java - 测试未能完成。原因:'测试运行未能完成。预期 1 个测试,收到 0'。检查设备 logcat 以获取详细信息