控制Three.js中自定义几何的缩放

Question

我有一个自定义对象，它是两个网格的减法。此减法创建一个类似框架的对象。

createFrame (x, y, z) {
    const frameMesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
    frameMesh.scale.set(x, y, z);
    const smallerFrameMesh = frameMesh.clone()
    smallerFrameMesh.scale.set(x - 4, y - 4, z);

    // subtraction
    const frameGeometry = fromCSG(toCSG(frameGeometry).subtract(toCSG(smallerFrameMesh)));

    const frame = new THREE.Mesh(frameGeometry, new THREE.MeshStandardMaterial(0xffffff));
    frame.geometry.computeVertexNormals();
    frame.userData.isFrame = true;

    return frame;
}

现在，每当大小改变时，我都会动态缩放此帧。问题是使用.scale只能使我的对象拉伸，而我希望它保留框架的宽度（在这种情况下为4）。

是否可以指定对象应该如何缩放（比如编写我自己的缩放函数实现），或者是否有使用的属性/方法会导致保留“空白”与“对象”部分？先感谢您。

Answer 1

scale()方法通过乘以它们的位置来平等地转换每个顶点。因此，如果你在x=6处有框架的内边缘，而在x=10处有外边缘，那么将它缩放2会给你内部：x=12，外部：x=20，使框架宽8个单位。

为了缓解这种情况，您可以将框架分成4个不同的框：顶部，底部，左侧和右侧。如果要在x轴上缩放，可以向上和向下拉伸，只需移动左右边缘即可。这样你保持4的厚度：

如果要在y轴上缩放，可以执行反转。您拉伸左右框，然后移动顶部和底部，使它们对齐。