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

是否可以指定应该如何缩放对象（比如编写我自己的缩放函数实现）或者是否有一个 property/method 可以使用，这将导致保留 "white space" vs ."object"份？提前谢谢你。

Answer 1

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

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

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

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

Controlling the scaling of custom geometries in Three.js

javascript

3d

csg

three.js

threecsg