在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）。

是否可以指定对象的缩放比例（例如编写我自己的scale函数实现），还是可以使用一种属性/方法来保存“空白”与“对象”部分？预先谢谢你。

Answer 1

scale()方法通过乘以每个顶点的位置来相等地转换它们。因此，如果框的内部边缘位于x=6，外部边缘位于x=10，则将其缩放2即可得到内部x=12，外部x=20 ，使框架宽8个单位。

为减轻这种情况，您可以将框架分成4个不同的框：顶部，底部，左侧和右侧。当您想在x轴上缩放时，可以拉伸顶部和底部，只需移动左右边缘即可。这样，您可以保持4的厚度：

当您想在y轴上缩放时，可以完成反操作。拉伸左右框，然后移动顶部和底部，使它们对齐。