时间戳

首页 > 解决方案 > 在 Three.js 中控制自定义几何图形的缩放

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

问题描述

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

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

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

标签： javascriptthree.js3dcsgthreecsg

解决方案

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

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

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

推荐阅读