在 Three.js 中控制自定义几何图形的缩放答案

【问题标题】：Controlling the scaling of custom geometries in Three.js在 Three.js 中控制自定义几何图形的缩放
【发布时间】：2019-07-12 01:20:42
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript three.js 3d csg threecsg

【解决方案1】：

scale() 方法通过将每个顶点的位置相乘来平等地变换每个顶点。因此，如果框架的内边缘位于 x=6，外边缘位于 x=10，将其缩放 2 将为您提供内部：x=12，外部：x=20，使框架宽度为 8 个单位。

为了缓解这种情况，您可以将框架分成 4 个不同的框：顶部、底部、左侧和右侧。当您想在 x 轴上缩放它时，您可以拉伸顶部和底部，并简单地移动左右边缘。这样你就可以保持 4 的厚度：

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

【讨论】：

这就是我想要实现的。问题是我有多个这样的“帧”（假设至少有 20 个），需要缩放，每个帧的缩放比例不同，这就是为什么我正在考虑为它重写缩放函数，所以我可以操纵它处理顶点的方式。我想我没有机会自己做，所以你的解决方案可能是唯一的。